nicht angemeldet
Hallo,
ich hab ne Frage zu einem CSS-Layout. Das ist wie folgt aufgebaut:
| upperbar |
| menu | content |
| | |
|
| lowerbar |
Das Problem nun ist, dass sich das div#menu über die gleiche Höhe erstrecken soll wie das div#content. Bei http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm ist das ja mit dem Listentag <ul> gemacht, ich weiß aber nicht, wieso es da klappt und bei mir nicht.
HTML-Datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Picz</title>
<link rel="stylesheet" type="text/css" href="data/styles/standard/style.css" />
</head>
<body>
<div id="page">
<div id="upperbar">
<h1>Picz</h1>
</div>
<div id="menu">
<a href="#" class="menu">Gallerie Eins</a><hr />
<a href="#" class="menu">Gallerie Zwei</a><hr />
<a href="#" class="menu">Gallerie Drei</a><hr />
<a href="#" class="menu">Gallerie Vier</a><hr />
</div>
<div id="content">
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
</div>
<div id="lowerbar">
<a href="?page=galleries">Gallerien</a> | <a href="?page=pictures">Bilder der aktuellen Galerie</a> | <a href="?page=impressum">Impressum</a>
</div>
</div>
</body>
</html>
und Stylesheet:
/* CSS Document */
body
{
margin: 150px;
padding: 0px;
color: black;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center; /* Zentrierung im Internet Explorer */
background: white;
}
div#page
{
width: 756px;
margin: auto; /* standardkonforme horizontale Zentrierung */
padding: 0px;
text-align: left;
border: 1px solid #484848;
background: #ffffe0;
}
div#menu
{
width: 180px;
float: left;
margin: 0px;
padding: 0px;
background: #009933;
border-right: 1px solid #484848;
}
div#content
{
margin-left: 180px;
padding: 2px;
}
div#upperbar
{
width: 746px;
margin: 0px;
padding: 5px;
text-align: center;
background: #C4ECB0;
border-bottom: 1px solid #484848;
}
div#lowerbar
{
clear: both;
width: 752px;
margin: 0px;
padding: 2px;
text-align: center;
background: #C4ECB0;
border-top: 1px solid #484848;
}
h1
{
margin: 0px;
padding: 0px;
font-size: 24px;
font-weight: bold;
}
hr
{
width: 180px;
height: 1px;
margin: 0px;
padding: 0px;
border: none;
color: #484848;
background: #484848;
}
a
{
color: #999999;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
a.menu
{
margin: 0px;
padding: 5px;
display: block;
line-height: 13px;
color: #CCCCCC;
text-align: center;
}
Kann mir da wer helfen?
Viele Grüße,
Philip