• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

iframes?!

D

DeDaffid

Neues Mitglied
Hallo zusammen,
ich bin noch Anfänger in Sachen html und css.
Habs mittlerweile geschafft meine Seite mit CSS zu "layouten".
Jetz habe ich noch folgendes problem:
Ich möchte dass sich beim klicken auf de navi nur der content-Bereich ändert. Wie mache ich das am besten?

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TSV Bobstadt 1926 e.V.</title>
<meta name="author" content="David Mach">
<meta name="publisher" content="David Mach">
<meta name="copyright" content="David Mach">
<meta name="description" content="Website des TSV Bobstadt mit aktuellen Fußballergebnissen der Mannschaften - Termine - Bilder uvm">
<meta name="keywords" content="TSV, Bobstadt, Fußball, Verein">
<meta name="page-topic" content="Sport">
<meta http-equiv="content-language" content="de">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="teststyle.css" type="text/css">
</head>
<body>
<div id="all">
<div id="header">
<img src="Banner101.jpg" height="200" width="850" alt="Logo">
</div>
<marquee bgcolor="#EEEB33" scrollamount="5" scrolldelay="5">Die AH-Fußballer haben ab sofort freitags um 19.30Uhr Training!</marquee>
<ul id="navi">
<li><a href="index.html">Home</a></li>
<li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
<li><a href="Bilder.html">Bilder</a>
     <ul>
       <li><a href="oberhof.html">Oberhof 09</a></li>
       <li><a href="AHLampertheim.html">AH-Turnier Lampertheim</a></li>
     </ul>
</li>
<li><a href="Mannschaften.html">Mannschaften</a>
     <ul>
       <li><a href="1Mannschaft">1. Mannschaft</a></li>
       <li><a href="Jugendabteilung.html">Jugendabteilung</a></li>
       <li><a href="AHAbteilung.html">AH-Abteilung</a></li>
     </ul>
</li>
<li><a href="guestbook.html">Gästebuch</a></li>
<li><a href="about.html">Wir über Uns</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>

<div id="banner">
<h1>Werbung</h1>
<p>Hier kommen die ganzen Logos von der Bandenwerbung rein</p>
</div>

<div id="content">
<h1>TSV Bobstadt 1926 e.V.</h1>
<h2>TSV Bobstadt</h2>
<p>
Herzlich Willkommen auf der Website des TSV Bobstadt 1926 e.V.
Auf dieser Seite finden Sie die aktuellen Fußballergebnisse der Mannschaften,
desweiteren können Sie Termine verschiedener Veranstaltungen im Sportheim nachlesen,
sich in unserem Gästebuch verewigen oder die verschieden Bilder anschauen.</p>
<p>Viel Spaß!</p>
</div>
<p id="footer">Webmaster: David Mach, E-Mail: [email protected]</p>
</div>
</body>
</html>
PHP: 
div#header       {
                 background-image:url(Banner101.jpg);
                  }
#navi
{
padding: 0;
margin: 0;
float: left;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 180px;
}

#navi li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}

#navi li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navi li a:link          { color: #0D0604; }
#navi li a:visited       { color: #667; }

#navi li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}

div#banner       {
                 font-size: 0.9em;
                 float: right; width: 150px;
                 margin: 0; padding: 0;
                 border: 1px solid black;
                 }


div#content      {
                 min-height: 600px; width: 507px;
                 margin: 0 180px;
                 padding: 5px;
                 border: 1px solid black;
                 }

body             {
                 color: black;
                 font-size: 12pt;
                 font-family: Helvetica,Arial,sans-serif;
                 margin: 0; padding: 0;
                 }

p#footer         {
                 clear: both;
                 font-size: 8pt;
                 width: 850px;
                 margin: 0; padding: 0;
                 text-align: center;
                 background-color: green; border: 1px solid silver;
                 }

div#all          {
                 width: 850px;
                 border: 0px solid red;
                 margin: auto;
                 }
liebe Grüße
David
 
Dafür gibt es verschiedene Möglichkeiten, ein iframe wäre wohl mit die schlechteste. AJAX wäre noch eine Möglichkeit, dann hast du aber das Problem, dass deine Seite nicht mehr funktioniert, wenn jemand JavaScript deaktiviert hat.
Am Besten ist es, du lässt das Verhalten beim Klick auf einen Link so, wie es sein soll, nämlich dass eine neue Seite geladen wird. Mit PHP kannst du Inhalte per include in die aktuelle Seite einbinden, so müsstest du dir nur eine Datei erstellen, in die du dann dein Menü und per Variable den jeweiligen Inhalt einbindest.
 
Das kannst du auch einfacher machen.
Lager die anderen Sachen einfach aus, wie z.B. Header, Footer, usw...

Danach bindest du sie mit PHP und require_once wieder ein.

Du kannst auch den Content auslagern und mit einem Klick auf einen Button/Link die URL des Includebefehls für den Content ändern und somit eine andere Seite in den Content laden.

Such einfach mal nach Tutorials für include() und require_once().

Falls du nichts findest, sind ich und andere User hier immernoch da...

Viel Glück^^

Timmer

PS: Verdammt, _Thor_ war schneller...
 
@Thor
Warum sind iframes die schlechteste Variante?
Das mit der neuen Seite laden will ich aber verhindern damit man schnellere Ladezeiten hat.
@Timmer
Ich werde es mal mit php probieren.

Danke an euch
 
Durch die Verwendung von iframes hast du z.B. keine wechselnden Seitentitel und kannst dir keine Bookmarks für die eingebundenen Seiten erstellen, weil sich die URL nicht ändert, nur der Inhalt im iframe.

PHP ist die bessere Wahl.
 
Wunderbar, danke.
Nochmal zum verständnis:
Wenn ich php anwende muss ich meinen content in eine eigene .html stecken die dann reingeladen wird?
 
Ja, aber nur den Inhalt, kein komplettes Dokument. Also kein Doctype, kein head, kein body, nur der Teil, der importiert werden soll.
 
Sorry, aber Ihr müsst mir helfen :)
ich steh grad voll aufm Schlauch.
Ich weiß nicht wie ich es in den #content container reinbringen soll.
 
Das ist eigentlich ganz einfach. Du hast deine Datei, in die du etwas einbinden möchtest, nennen wir sie mal index.php. Die ist ganz normal aufgebaut, Doctype, head, body usw. Jetzt kommst du an die Stelle im body, an der du externe Inhalte einbinden möchtest.

Hier mal schematisiert.
PHP: 
{Doctype}
  {head}...{/head}
  {body}
    {irgendwas}{/irgendwas}
    <?php include('content.php') ?>
  {/body}

Deine content.php sieht nun so aus:

PHP: 
  <div id="content">
    <h2>Überschrift</h2>
    <p>Text</p>
    ...
  </div>
 
Du kannst es so machen:

In deiner index.php werden die einzelnen Teile der Seite includiert.

Etwa so:

index.php
Code: 
<?php 

include('header.php');

include('content.php');

include('footer.php');

?>
Dann hast du 3 Dateien: eine für den Header, eine für den Content und eine für den Footer.

In den Header muss jetzt der Anfang rein, also etwa so:

header.php
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Titel der Seite</title>
</head>
<body>

In den Content kommt der Inhalt deiner Seite:

content.php
Code: 
<div id="content">
<p>Hier steht etwas Text!</p>
<div id="oh_my">
<div id="god">
<p>Blabla</p>
</div>
<p>Blablabla</p>
</div>
</div>

und in den Footer kommt das Ende deiner Seite, z.B. so:

footer.php
Code: 
<a href="xyz.htm">Impressum</a> <a href="http://www.google.de">Google</a>
</body>
</html>

Mit einem Klick auf einen Link muss sich dann die URL für den Content ändern und die Seite neu laden. Das kannst du auch mit einer Variable machen, derren Wert sich dann ändert...

Viel Spaß beim Coden
 
ich hab jetzt mal ein wenig rumprobiert.
aber jedesmal wenn ich der index oder ner andren datei die endung php gebe öfnnets diese nicht es öffnet sich nur n fenster zum runterladen der datei.
eigentlich gebe ich nicht so schnell auf aber ich glaub ich machs doch mit dem neu laden der seite ;)
 
ich hab die ganze zeit offline geschaut obs geht....muss ich die dateien erst auf mein webspace hochladen?

Bin übrigens bei hosteurope, mit dem WebPack M2.0

EDIT:
Habs jetzt hochgeladen und es funktioniert :):):)

Vielen Dank :)
 
Um den PHP-Code verarbeiten zu können, brauchst du einen Server, das kannst du auch lokal machen, aber dann brauchst du XAMPP, Vertrigo oder den Apache mit PHP-Modul.
Ich kenne hosteurope nicht und weiß nicht, ob dort PHP installiert ist, probier es aus.
 
Auf hosteurope ist PHP istalliert, das weiß ich, weil ich es auch selbst nutze.

Funktioniert jetzt alles?
 
Jop das einbinden klappt einwandfrei.
Nur ie muss ich meine navi ändern dass nur in den content reingeladen wird?
muss ich da dann target="" angeben?
 
Wie gesagt, du kannst es auch so machen, dass du eine Variable für den Content definierst, diese dann per index.php?id=1 oder so aufrufst, dann heißen deine Seiten z.B. 1.php und die 2te heißt 2.php

Code: 
include ($_GET['id'] + '.php');

Und in der Navi setzt du die Links auf index.php?id=xyz

Das müsste funktionieren
 
Seit dem ich die website mache wunder ich mich über gar nichts mehr wenn was nicht funktioniert. Hab vorher so gut wie keine html kenntnisse gehabt und null css. aber es funktioniert mit viel geduld dann doch irgendwann :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben