Höhe und Breite
Mit Hilfe von width
können Sie die Breite, und mit height
die Höhe von Bereiche
bestimmen. Mit float:...
können Sie Boxen so aurichten, das ein mehrspaltiges
Layout entsteht. Im folgenden Beispiel habe ich z.B. drei Spalten: Die Menüleiste wird mit float:left
links ausgerichtet, Die News-Spalte wird rechts ausgerichtet. Dazwischen wird dann der Inhalt geschrieben:
<!DOCTYPE HTML> <html lang="de"> <head> <title>Layout</title> <style type="text/css"> body { color: black; background-color: white; font-size: 12px; font-family: Helvetica,Arial,sans-serif; margin: 0; padding: 10px; min-width: 41em; } h1 { padding:8px; background-color:#0000C0; border:1px solid #000000; margin:4px; text-align:center; font-family:Arial,Helvetica,sans-serif; font-size:20px; color:#FFFF00; height:40px; } ul#menue { font-size:12px; float:left; width:100px; margin:4px; padding:8px; border:1px solid #000000; background-color:#0000C0; } ul#menue li { list-style:none; margin:0 0 0 4px; padding:10px; } ul#menue a { display:block; padding:4px; font-weight:bold; } ul#menue a:link { color:#FFFFC0;} ul#menue a:visited { color:#C0C0FF; } ul#menue a:hover { color:#000000; background-color:#FFFFC0; } ul#menue a:active { color:#FFFFFF; } div#inhalt { margin:8px 130px 4px 130px; padding:8px; border:1px double black; background-color:#FFFFE0; } div#inhalt h2 { font-size: 18px; font-family: Helvetica,Arial,sans-serif; } div#inhalt p {font-size:12px; margin:20px 0px;} div#neues { font-size:12px; float:right; width:100px; margin:4px; padding:8px; border:1px solid #000000; background-color:#0000C0; color:#FFFFFF; } div#fusszeile { clear:both; margin:8px 4px 4px 4px; padding:8px; border:1px double black; background-color:#0000C0; color:#FFFF00; text-align:center; } </style> </head> <body> <h1>Überschrift</h1> <ul id="menue"> <li><a href="layout01.htm">Seite 1</a></li> <li<<a href="layout01.htm">Seite 2</a></li> ... </ul> <div id="neues"> <p>News:<p> <p>Hier stehen irgendwelche News.</p> </div> <div id="inhalt"> <h2>Inhalt</h2> <p> <img style="border:0; width:100px; height:40px; float:left; margin:5px;" src="bild01.gif" alt="[Bildname]"> Thema 1 - Hier steht irgendwelcher Text. Thema 1 - Hier steht irgendwelcher Text. ....</p> </div> <div id="fusszeile"> Design 2006 by Frank Gancosch </div> </body> </html>Das ganze sieht so aus