CSS – IFRAME 1

CSS – IFRAME 1

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 CSS-Code definiert eine box die 200×200 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 180×180 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>
<div>
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>

Hinterlasse eine Antwort

Users on page
Now online: 0
Overall: 3450634