Hallo allerseits,
ich bin gerade dabei ein Layout für meine Webseite zu basteln. Ich habe es auch soweit fertig. Es gibt oben einen Banner, ein Verlauf/momentane Position auf der Seite im Banner, links ein Menu, rechts der eigentliche Content und unten die Fußleiste. Im Moment sind die Höhen der beiden mittleren Divs variabel, abhängig vom jeweiligen Inhalt. Ich möchte nun die beiden Container für das Menü und den Inhalt immer gleich groß machen, d.h. wenn der div-Container vom Inhalt aufgrund des Inhalts größer ist, als der Menü-Container soll das div für das Menü genauso hoch sein und genauso umgekehrt. Heißt also, es gibt immer 2 Spalten, die vom Banner bis zur Fussleiste reichen, unabhängig vom Inhalt, allerdings vergrößern sich die Div-Bereiche, wenn mehr Inhalt dazu kommt. Ich hoffe Ihr wisst, was ich meine. Ich schicke jetzt noch das html und css dazu.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="styles/site.css">
<link rel="stylesheet" type="text/css" href="styles/history.css">
<link rel="stylesheet" type="text/css" href="styles/menu.css">
</head>
<body>
<div id="site">
<div id="banner">
<div id="history"><a href="" class="history">HOME</a> > <a href="" class="history">NEWS</a></div>
</div>
<div id="menu">
<ul class="menu">
<li><a href="" class="menu">Menu</a>
<ul class="submenu">
<li><a href="" class="submenu">Submenu</a></li>
<li><a href="" class="submenu">Submenu</a></li>
</ul>
</li>
<li><a href="" class="menu">Menu</a></li>
<li><a href="" class="menu">Menu</a></li>
<li><a href="" class="menu">Menu</a></li>
</ul>
</div>
<div id="content">content <br />content<br />content <br />content<br />content <br />content<br />content <br />content<br /></div>
<div id="footer">footer</div>
</div>
</body>
</html>*charset "utf-8";
/* CSS Document */
body{
background-color:#BFCDD6;
height:100%;
background-attachment:fixed;
background-repeat:repeat;
text-align:center;
}
div{
position:static;
display:block;
}
div#site{
top:0px;
width:800px;
margin:0px auto;
margin-top:10px;
}
div#banner{
position:relative;
float:none;
background:url(../pics/banner.png);
height:120px;
width:798px;
clear:both;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
border-top:1px solid #FFFFFF;
background-repeat:repeat-x;
}
div#history{
position:relative;
float:right;
clear:both;
height:32px;
width:607px;
top:88px;
background:url(../pics/history.png);
background-repeat:repeat-x;
border-left:1px solid #FFFFFF;
text-align:left;
padding-top:10px;
padding-left:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:lighter;
color:#5B5F82;
}
div#menu{
position:relative;
float:left;
clear:none;
width:180px;
background:url(../pics/menu.png);
background-repeat:repeat-y;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
border-top:1px solid #FFFFFF;
text-align:left;
}
div#content{
position:relative;
float:left;
clear:right;
width:618px;
background:#EDF4FA;
border-right:1px #FFFFFF;
border-top:1px solid #FFFFFF;
}
div#footer{
position:relative;
float:none;
background:url(../pics/footer.png);
height:40px;
width:798px;
clear:both;
border:1px solid #FFFFFF;
}