CSS – IFRAME – mit Hintergrundgrafik – Beispiel 5:
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> <div> <div> 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>