| Hier eine
weitere Spielerei mit einer Hintergrundgrafik. Das Bild
hat wieder genau die Grösse unseres IFRAMES, nur
ist das Gif diesmal mit runden Ecken versehen worden.
Das Gif wird nun in den Ordner images mit dem Dateinamen
background_2.gif abgespeichert. Nun zum Code der extern
ausgelagerten CSS Datei:
#iframe_4
{
background-image: url(images/background_2.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_4">
<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:
|
