Homepage-Tipps & -tricks für Webmaster mit CSS

Scrollbare Div-Box anstatt Iframe

Es muß nicht immer gleich ein Iframe sein ...
Alternativ zum Iframe kann auch eine scrollbare Div-Box zum Einsatz kommen. Diese Box lässt sich vielfältig formatieren und hat darüber hinaus noch den Vorteil, dass sie W3C-konform ist! Nachfolgend zeigen wir Ihnen anhand eines Beispiels, wie das mit ein wenig CSS zu bewerkstelligen ist:

Anweisung in der CSS-Datei:

.box
{
width: 350px;
height: 150px;
overflow: auto;
font-family: Arial, Helvetica, Tahoma;
font-size: 12px;
background-color: #666;
color: #FF9933;
padding: 5px;
text-align: justify
}

Anweisung im Html-Dokument:

<html>
<head>
<title>Div-Box</title>
<link rel="stylesheet" type="text/css" href="css/box.css">
</head>
<body>
<div class="box">
Text Text Text Text ...
</div>
</body>
</html>

Beispiel ansehen

Tipp: Mit der Anweisung "overflow: auto" in der CSS-Datei lässt sich die Scrollbar der Box je nach Inhalt automatisch aktivieren bzw. deaktivieren!

[ veröffentlicht am 03.05.2008 ] __________________________

Das könnte Sie vielleicht auch interessieren:
[ Mouseover-Info-Box mit CSS kreieren, formatieren und gestalten ]
[ Info-Box "Deluxe" mit 'legend' & 'fieldset' hervorheben ]

zurück | weiter

Diese Seite wurde zuletzt am 03.09.2010 10:42 aktualisiert.

Anzeigen

Marktplatz

WebPack® 3.0: Mit über 20 Web-Applikationen wie Wordpress, phpBB Forum und MediaWiki. Ab EUR 1,49/Monat*!
[ mehr Infos ]

Mit klarmobil.de ab 9 Cent/Min. in alle Netze ohne Grundgebühr keine Vertragsbindung incl. 10 EUR Startguthaben für nur 4,95 EUR - [ jetzt wechseln und sparen! ]