Hallo erst mal. Ich habe mir eine Template auf Basis von XHTML und CSS geschrieben. So weit so gut. Jetzt habe ich aber das Problem, das wenn sich die Navigation links erweitert, sich der DIV (left2) über den Hauptrahmen des DIV (container) hinausschiebt. Also der Hauptrahmen (Container erweitert sich nicht mit. Weiß eventuell jemand Rat? Hier die Dateien:
XHTML
Code:
<!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>Titel</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen, projection" />
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="suche">Suche</div>
<div id="navtop">Navigation Top</div>
<div id="left"><p>Navigation (dynamische Höhe)</p>
<div id="left2">Grafik (fixe Größe und Ausrichtung unten) </div>
</div>
<div id="content"><p>Content (dynamische Höhe)</p></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
CSS
Code:
* {
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color:#000;
}
/* Formatierung allgemein */
a {
color: #cc0066;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a img {
border: 0 none;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color:#666;
}
tr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color:#666;
}
h1, h2, h3 {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#333333;
background: transparent;
}
h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1.0em;
margin-bottom:10px;
}
h2{
font-size: 1.4em;
}
h3{
font-size: 1.2em;
}
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
.label{
font: bold 100% Verdana,Arial,sans-serif;
color: #334d55;
}
hr{
border:solid #ff0000 1px;
height:1px;
}
/*Styles für die Container*/
#container {
position: relative;
margin: 0px auto;
margin-top: 5px;
width: 958px;
border: 1px solid #000;
background-color:#fff;
}
#header {
height: 181px;
background-color: #990000;
}
#suche{
position:absolute;
left:727px;
top:46px;
width:225px;
height:28px;
background:none;
}
#navtop{
position:absolute;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:left;
color:#FFFFFF;
left:739px;
top:121px;
width:214px;
height:16px;
}
#content {
height: 250px;
background-color: #fff;
margin-left: 235px;
padding:15px;
}
#left{
position: absolute;
left: 0;
width: 235px;
background-color:#FF9900;
padding-top:15px;
}
#left2{
position:absolute;
left: 0;
width: 235px;
height:130px;
background-color:#990000;
}
#footer {
height: 20px;
text-align:center;
padding-top:5px;
margin-top:10px;
margin-left:235px;
margin-right:15px;
border-top: 1px solid #666;
}