Iframes

Wo liegt jetzt der Unterschied zwischen den normalen Frames und den Inline-Frames? Wir haben bei normalen Frames gesehen, das sie immer einen Bereich des Browsers "abteilen" von oben nach unten, oder von links nach rechts. Sagen wir, wir haben ein viereckiges Layout, und das soll in die Mitte. Jetzt können wir das natürlich mit normalen Frames folgendermaßen aufbauen:

Das ist auch gut möglich solange wir einen einfarbigen Hintergrund nutzen. Jetzt wollen wir aber ein Ornament Muster im Hintergrund. Dabei passiert uns folgendes:

Überall, so ein neuer Frame anfängt wird auch das Hintergrundmuster neu angefangen. Das gibt Ränder dort wo die Frames aneinandergrenzen und sieht hässlich aus. Dafür eignen sich nun Iframes.

Mit Iframes bietet sich die Möglichkeit einen viereckigen Frame einfach irgendwo mitten in die Pampa zu legen:

Damit wird uns auch der Hintergrund vernünftig angezeigt:

Ein Iframe lässt sich mit folgendem Code an jeder Stelle der HTML Seite einfügen:

<iframe src="url der seite" name="name des frames" width="breite" height="höhe"></iframe>

Höhen und Breitenangaben sollten bei Iframes möglichst absolut sein, prozentuale Angaben werden nur vom IE Unterstützt.
Natürlich kann man dem Iframe genau wie dem normalen Frame sagen das der scrollen oder nicht scrollen soll, ob man ihn größer ziehen kann oder nicht und man kann ihm die Frameborder verbieten. Diese Angaben werden, genau wie bei den Frames, in den <iframe> Tag geschrieben.

Iframes lassen sich entweder Dynamisch in eine Webseite einbinden oder statisch.
Dynamisch wäre beispielsweise durch das Verwenden von Tabellen:

<table width="100%" height="100%">
<tr><td>
<center>
<iframe src="seite.html" name="main" width="500" height="350"></iframe>
</center>
</td></tr>
</table>

Damit sitzt der Iframe immer in der Mitte des Browserfensters, egal wie groß der Browser ist.
Man kann aber auch sagen er soll an eine ganz bestimmte Stelle:

<div style="position:absolute; left:abstand von links; top:abstand von oben; width:500; height:350">
<iframe src="seite.html" name="main" width="500" height="350"></iframe>
</div>

Damit wird er brav immer in seiner Ecke sitzen bleiben und immer den selben abstand nach links und oben haben.

In den Foren wird immerzu nach transparenten Iframes gefragt. Hierzu: es wird hier keine erklärung dafür geben ;D Wir wissen wie's geht, aber das funktioniert nur im IE und ist unnötig. Die meisten Leute "slicen" ihre Layouts in Photoshop, Pain Shop Pro oder einem anderen Programm (slicen=das Layout in mehrere Grafiken zerlegen). Dabei könnt ihr festlegen wo der Content hinkommen soll. Benutzt einfach die Grafik dieses Slices um sie per CSS oder Body-Tag als Hintergrund in die Seite einzubinden die im Iframe erscheint. Das ersparrt hässliche Giftgrüne Flecken für Opera, Mozilla oder andere Browser. Habt ihr transparente Iframes werden viele Leute sagen: Auf die Seite gehe ich nicht mehr, das ist ja vergewaltigung für die Augen ;D