In
diesem Tutorial habt ihr ja schon erfahren, wie man einen Iframe codet.
Ich möchte euch nun zusätzlich noch erklären, wie man es hinbekommt so einen Iframe "durchsichtig" zu machen.
So etwas eignet sich gut, wenn Teile des Designs in den Text hineinragen sollen.
Es sollte noch erwähnt werden, dass es Browser gibt (Firefox), die Iframes, falls keine Hintergrundfarbe angegeben ist, automatisch transparent machen, allerdings trifft das auf die meisten anderen Browser nicht zu.
Deswegen muss man sich etwas anderes einfallen lassen.
Es gibt verschiedene Möglichkeiten eine Transparenz im Iframe herzustellen, wobei auf Browser-Kompatibilität und Validität geachtet werden muss.
Möglichkeit 1: Filter / Wie man's nicht macht
Die erste Möglichkeit ist zwar die einfachste, aber gleichzeitig auch die problematischste, da in diesem Fall eine Transparenz ausschließlich vom Internet Explorer erkannt werden kann.
Dazu wird mit einem sogenannten Filter gearbeitet.
<iframe name="frame1" src="http://www.giatu.de" width="300" height="100" frameborder="0" style="FILTER: chroma (color=#000000)"></iframe>
Der normale Iframe-Code wird mit
style="FILTER: chroma (color=#000000)" ergänzt.
Alles, was in dem Frame die Farbe #000000, also schwarz hat, wird transparent.
Wenn ihr den Hintergrund der Seiten, die im Iframe angezeigt werden, schwarz macht, dann wird dieser Hintergrund transparent.
Allerdings wird auch
alles andere, was schwarz ist, transparent, sprich Bilder, Schrift u.s.w.
ACHTUNG: Ich stelle diese Möglichkeit nur der Vollständigkeit halber vor, sie sollte nicht benutzt werden!
Möglichkeit 2: Hintergrundbild
Diese Möglichkeit ist viel besser als die erste, da sie in allen Browsern funktioniert, allerdings ist dazu ein wenig Fummelarbeit notwendig.
Das Prinzip ist allerdings relativ simpel: Der Iframe ist nicht transparent, das Hintergrundbild, was die Seiten, die in ihm angezeigt werden haben, zeigt einfach nur genau das, was hinter dem Frame liegt.
Öffne dazu dein Layout als Bild in deinem Grafikprogramm und schneide genau den Teil aus, über dem später dein Iframe liegen soll.
Speicher es separat z.B. als frameback.jpg ab.
Nun legst du für die Seiten, die im Iframe angezeigt werden sollen, folgenden CSS-Code fest:
body {
background-image: url('frameback.jpg');
background-repeat: no-repeat;
background-attachement: fixed;
background-position:top left;
}
Zeile 2: Hintergrundbild wird festgelegt
Zeile 3: Hintergrundbild wiederholt sich nicht
Zeile 4: Hintergrundbild bleibt beim Scrollen stehen
Zeile 5: Position des Hintergrundbildes (nicht notwendig)
Nun musst du nur noch den Iframe so positionieren, dass er genau an der Stelle über dem Layout liegt, wo du das Bild ausgeschnitten hast und dass er genau so groß ist, wie dein Hintergrundbild.
Der Iframe-Code, den du hier benutzen musst ist der oben genannte OHNE das mit dem style-Attribut!
Möglichkeit 3: Div statt Iframe
Divs sind in allen Browsern, falls sie keine Hintergrundfarbe zugewiesen bekommen haben, automatisch transparent.
Statt einem Iframe könnten wir also auch ein Div benutzen:
<div id="content">
Dein Text
</div>
und ihn mit CSS aussehen lassen, wie einen Iframe:
#content {
width:300px;
height:100px
overflow: auto;
}
Zeile 1: Das Element mit der id "content" wird angesprochen
Zeile 2: Die Breite des Divs wird auf 300px festgelegt
Zeile 3: Die Höhe des Divs wird auf 100px festgelegt
Zeile 4: Scrollbalken, falls nötig, werden angezeigt.
Das Komplizierte daran ist, dass man sich auf ein Div-Layout umstellen muss. Denn hier werden die Unterseiten nicht einfach reingeladen. Jede Unterseite muss das Layout enthalten.
Das Div ist, im Gegensatz zu einem Iframe, kein Fenster im Fenster, in dem eine andere Datei angezeigt werden kann.
Es muss also in die uebermich.html, die links.html u.s.w. der Div-Container eingefügt werden.
An der Stelle, wo in meinem Code "Dein Text" steht, kommt dann der Text rein, der je nach Unterseite variiert.
Hier wäre es dann auch von Vorteil mit
PHP include zu arbeiten.
Wer schon einmal ein Div- oder Tabellenlayout hatte, kann das wahrscheinlich leichter nachvollziehen, doch ich hoffe, dass auch mit Divs unerfahrene Leute es verstehen. Denn das Ersetzen des Iframes hat noch einen weiteren, entscheidenden Vorteil: alle Browser können Divs darstellen, Iframes allerdings nicht.
Variety
supi 6blümchen^^aber mögl2 find ich immernoch die beste lösung auch wenns etwas gedult erfordert.
und es gibt noch ne mögl ihndem man in die unterseiten am anfang einen code einfügt oO nur frag mich nicht wie der war xD ich benutze keine frames mehr...
und der war für jeden browser geeignet