Übergroßer Inhalt in Elementen
Im folgenden Beispiel habe ich den Befehl overflow
eingebaut. Wurde eine Bereich mit width
oder height
definiert, und der Inhalt passt hier nicht rein, können Sie mit overflow
die
Anzeige bestimmen. Folgende Angaben sind möglich:
overflow:visible |
= Das Element wird soweit ausgeweitet, bis es in den Bereich passt |
overflow:hidden |
= Das Element wird abgeschnitten nicht Netscape bis 4.x |
overflow:scroll |
= Es werden scrollbalken angezeigt nicht in Netscape bis 4.x und Opera bis 6.0 |
overflow:auto |
= Der Browser entscheidet, wie die Anzeige aussieht. nicht in Netscape bis 4.x und Opera bis 6.0 |
<html> <head> <title>Layout 3</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="author" content="Frank Gancosch"> ... <style type="text/css"> body { color: #FFFFFF; background-color: #0000C0; font-size: 12px; font-family: Helvetica,Arial,sans-serif; margin: 0; padding: 10px; min-width: 41em; } h1 { padding:8px; background-color:#0000C0; border:0; margin:4px; text-align:center; font-family:Arial,Helvetica,sans-serif; font-size:20px; color:#FFFF00; } ul#menue { font-size:12px; float:left; width:100px; margin:4px; padding:4px; border:0; background-color:#0000C0; } ul#menue li { list-style:none; margin:0 0 0 4px; padding:10px; } ul#menue a { display:block; padding:2px; font-weight:bold; } ul#menue a:link { color:#FFFFE0;} ul#menue a:visited { color:#FFFFFF; } ul#menue a:hover { color:#000000; background-color:#FFFFC0; } ul#menue a:active { color:#FFFFFF; } div#inhalt { margin:8px 4px 4px 130px; padding:8px; border:1px double black; background-color:#FFFFE0; overflow:auto; height:300px } div#inhalt h2 { font-size: 18px; font-family:Helvetica,Arial,sans-serif; color:#0000C0} div#inhalt p {font-size:12px; margin:20px 0px; color:#000000;} div#fusszeile { clear:both; margin:8px 4px 4px 4px; padding:8px; border:0; background-color:#0000C0; color:#FFFF00; text-align:center; } </style> </head> <body> <h1>Überschrift</h1> <ul id="menue"> <li><a href="#eins">Thema 1</a></li> ... <li><a href="#sechs">Thema 6</a></li> </ul> <div id="inhalt"> <h2>Inhalt</h2> <p><img style="border:0; width:100px; height:40px; float:left; margin:5px;" src="bild01.gif" alt="[Bildname]"> <a name="eins">Thema 1</a> - Hier steht irgendwelcher Text. .... Thema 6 - Hier steht irgendwelcher Text.</p> </div> <div id="fusszeile"> Design 2006 by Frank Gancosch </div> </body> </html>Das ganze sieht so aus