| Um ein Hintergrundbild
in unseren IFRAME einzubinden, müssen wir zunächst
mit einem Bildbearbeitungsprogramm ein Hintergrundbild
erstellen. Dieses Bild sollte in dieser Übung genau
die Grösse unseres IFRAMES haben also 200x200 Pixel.
Das Gif wird nun in den Ordner images mit dem Dateinamen
background.gif abgespeichert. Nun zum Code der extern
ausgelagerten CSS Datei:
#iframe_3
{
background-image:
url(images/background.gif);
scrollbar-arrow-color: #000066; /* dunkelblau*/
scrollbar-face-color: #FFFFFF; /* weiss*/
scrollbar-highlight-color: #5AE100; /* grün*/
scrollbar-3dlight-color: #FF9900; /* orange*/
scrollbar-shadow-color: #FF0000; /* rot*/
scrollbar-darkshadow-color: #000000; /* schwarz*/
scrollbar-track-color: #cedcff; /* hellblau*/
text-align: justify;
width: 200px;
height: 200px;
background: #CCCCCC;
.abstand_iframe{
padding: 10px;
}
.scrollbereich {
overflow: auto;
width: 180px;
height: 180px;
}
.scrollbarabstand{
padding-right: 20px;
}
Entsprechend
ändern wir unseren HTML CODE wie
folgt:
<div id="iframe_3">
<div class="abstand_iframe">
<div class="scrollbereich">
<div class="scrollbarabstand">
Hier der Beispiel - Text, dieser sollte von den Zeilen
her länger sein als das Iframe selbst (in unserem
Fall 200 Pixel), damit wir den Scrollbalken erkennen
können.
Haben wir zu wenig Text eingegeben, verschwindet unser
im IE eingefärbter Scrollbalken und wir sehen unseren
Text auf einem von uns erstellten Hintergrundbild, dass
wir in den Ordner.....
</div>
</div>
</div>
</div>
Das Ergebnis:
|
