Hallo,
ich will mir ein template für meine HP bauen, aber das mit den divs haut nicht so hin, wie ich es will. WEr hat einen heissen Tip für mich?
Ich habe zur besseren Sichtbarkeit mal alle divisions farbig umrandet.
Eigentlich sollte der header und footer eine statische Höhe haben, was auch klappt.
Im Bereich main sollte links über die ganze Höhe das menuleft gehen mit statischer Breite. der rechte teil soll oben vom topmenu(statische Höhe) und darunter vom content(dynamische Höhe) gefüllt sein.
Das menuleft soll die gleiche Höhe haben, wie topmenu und content zusammen.
HTML
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>test OH</title>
<link rel="stylesheet" href="teststyle.css" type="text/css">
</head>
<body>
<div id="header">header
</div>
<div id="main">
<div id="menuleft"><span editable="true" id="menuleft">menu</span>
</div>
<div id="topmenu"><span editable="true" id="topmenu">topmenu</span>
</div>
<div id="content">
<span editable="true" id="content">Inhalt</span>
</div>
</div>
<div id="footer">
<span editable="true" id="footer">unten</span>
</div>
</body>
</html>Die Stylesheets
HTML
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
width: 800px;
height: 100%;
margin-right: auto;
margin-left: auto;
text-align: center ;
border-style: solid;
border-color: red;
}
#header {
height: 150px;
border-style: solid;
border-color: green;
}
#main {
height: 100%;
border-style: solid;
border-color: blue;
}
#topmenu {
height: 25px;
margin-left: 150px;
border-style: solid;
border-color: yellow;
}
#menuleft {
min-height:500px;
float: left;
width: 150px;
border-style: solid;
border-color: orange;
}
#content {
min-height:500px;
overflow: auto;
margin-left: 150px;
background-color: rgb(255, 255, 204);
border-style: solid;
border-color: violet;
}
#footer {
height: 25px;
clear: both;
border-style: solid;
border-color: grey;
}Was mach ich falsch?
