| Im folgenden
wird beschrieben, wie wir mittels CSS ein IFRAME für
unsere Webseite basteln können. Das 1 Beispiel
zeigt ein simples IFRAME, das auf 3 ineinander verschachtelten
DIV-Containern basiert. Zunächste der CSS Code,
den wir in unsere externe CSS- Datei einbinden:
#iframe_1
{
text-align: justify;
width: 200px;
height: 200px;
background: #CCCCCC;
}
.abstand_iframe{
padding: 10px;
}
.scrollbereich {
overflow: auto;
width: 180px;
height: 180px;
}
Erklärungen:
Dieser (blaugefärbt)
CSS-Code definiert eine box die 200x200 Pixel gross
ist die in der die Schrift auf Blocksatz gestellt wurde
und die einen grauen Hintergrund hat. Der Grund warum
wir das text Attribut auf justified gestellt haben,
dient lediglich der Anschauung, damit wir bei späteren
Beispielen die Ecken und Kanten besser erkennen können.
Als
nächstes erstellen wir eine Klasse welche die CSS-Formatierung
für den Abstand innerhalb unseres erstellten Containers
regelt. Der Abstand der hier gemeint ist, bezieht sich
auf den Inhalts des Containers (also den Text und den
Scrollbalken) bis zum äusseren grauen Rand. Wir
stellen den Abstand auf 10 Pixel ein.
Zum Schluss
benötigen wir eine Klasse die für den eigentlichen
Scrollbereich zuständig ist - hier legen wir die
Breite und die Höhe fest (in unserem Fall 180 Pixel),
das Attribut "overflow:
auto" ist die css Anweisung dafür, das ein
Scrollbalken angezeigt werden soll, wenn der Text die
Größe von 180x180 Pixel überschritet.
Dies ist auch der Grund dafür, dass wir den Text
in unserem IFRAME entsprechend lang schreiben müssen,
ansonsten wird der Scrollbalken bei der Ausgabe NICHT
angezeigt.
Um unseren
IFRAME auf der Webseite sichbar zu machen, brauchen
wir noch den dafür nötigen HTML-Quelltext.
Dieser sieht in unserem Falle wie folgt aus:
<div id="iframe_1">
<div class="abstand_iframe">
<div class="scrollbereich">
Hier der Beispiel Text, dieser sollte von den Zeilen
her Länge sein als die der Iframe (in unserem Fall
200 Pixel) vorher definiert wurde, damit wir den scrollbalken
erkennen können.
</div>
</div>
</div>
Das Ergebnis:
|
