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
