KingKiba
Threadersteller
Dabei seit: 24.08.2007
Ort: -
Alter: 36
Geschlecht: -
|
Verfasst So 12.10.2008 23:23
Titel CSS Problem mit Divs |
|
|
Hello hello,
also ich hab da ein Problem, ich hab halt einen Quelltext geschrieben der relativ simple ist und die Inhalte, die Divs, mit class="" benannt.
Hier mal der Quelltext:
Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testseite</title>
<link href="css/template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="div1">
<div class="div1_1">
</div>
<div class="div1_2">
</div>
</div>
<div class="div2">
<a href="index.php"><img src="images/logo.png" title="" alt="" style="border: 0px; width: 468px; height: 60px;"></a>
</div>
<div class="div3">
<div class="div3_1">
</div>
<div class="div3_2">
</div>
<div class="div3_3">
</div>
</div>
<div class="div4">
<div class="div4_1">
</div>
<div class="div4_2">
</div>
<div class="div4_3">
</div>
</div>
<div class="div5">
<div class="div5_1">
<div class="div5_1menu1">
</div>
<div class="div5_1menu2">menu
</div>
<div class="div5_1menu3">
</div>
<div class="div5_1menu0">
</div>
<div class="div5_1menu1">
</div>
<div class="div5_1menu2">menu
</div>
<div class="div5_1menu3">
</div>
<div class="div5_1menu0">
</div>
<div class="div5_1menu1">
</div>
<div class="div5_1menu2">menu
</div>
<div class="div5_1menu3">
</div>
</div>
<div class="div5_2">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div class="div5_3">
</div>
</div>
<div class="div6">
<div class="div6_1">
</div>
<div class="div6_2">© 2008
</div>
<div class="div6_3">
</div>
</div>
</body>
</html> |
Im class="div5_2" wird später halt der inhalt stehen, deshalb müssen class="div5_1" und class="div5_3" immer die selbe höhe wie class="div5_2" haben, genauso anders rum.
Mit height: 100% im CSS wird man auch nicht weiter kommen, das weiss man ja
hier noch die CSS:
Code: | body {
font-family : Verdana, Helvetica, sans-serif;
font-size : 12px;
line-height : 20px;
color : #00000;
margin: 0;
background-image: url(../images/back_verlauf.jpg);
}
a:link, a:visited, a:active, a:focus {
text-decoration : none;
color: #000000;
font-weight:bold;
}
a:hover{
text-decoration : none;
color: #E3E3E3;
font-weight:bold;
}
.div1 {
width: 970px;
height: 20px;
margin-left: auto;
margin-right: auto;
}
.div1_1 {
width: 157px;
height: 20px;
float: right;
background-image: url(../images/top_suchen_back.jpg);
}
.div1_2 {
width: 200px;
height: 20px;
float: right;
border: 1px solid red;
}
.div2 {
width: 970px;
height: 96px;
margin-left: auto;
margin-right: auto;
padding-top: 18px;
}
.div3 {
width: 970px;
height: 4px;
margin-left: auto;
margin-right: auto;
}
.div3_1 {
width: 4px;
height: 4px;
float: left;
margin-left: 11px;
background-image: url(../images/content_links.jpg);
}
.div3_2 {
width: 951px;
height: 4px;
float: left;
background-image: url(../images/content_mitte.jpg);
}
.div3_3 {
width: 4px;
height: 4px;
float: left;
background-image: url(../images/content_rechts.jpg);
}
.div4 {
width: 970px;
height: 26px;
margin-left: auto;
margin-right: auto;
}
.div4_1 {
width: 4px;
height: 26px;
margin-left: 11px;
float: left;
background-image: url(../images/content_links_l.jpg);
}
.div4_2 {
width: 951px;
height: 26px;
float: left;
background-color: #ffffff;
}
.div4_3 {
width: 4px;
height: 26px;
float: left;
background-image: url(../images/content_rechts_l.jpg);
}
.div5 {
width: 970px;
min-height: 350px;
margin-left: auto;
margin-right: auto;
}
.div5_1 {
width: 157px;
min-height: 350px;
float: left;
background-image: url(../images/menu_empty.png);
}
.div5_1menu1 {
width: 157px;
height: 7px;
background-image: url(../images/menu_oben.jpg);
}
.div5_1menu2 {
width: 157px;
background-image: url(../images/menu_mitte.jpg);
}
.div5_1menu3 {
width: 157px;
height: 9px;
background-image: url(../images/menu_unten.jpg);
}
.div5_1menu0 {
width: 157px;
height: 25px;
background-image: url(../images/menu_empty.png);
}
.div5_2 {
width: 809px;
min-height: 350px;
background-color: #ffffff;
float: left;
}
.div5_3 {
width: 4px;
min-height: 350px;
float: left;
background-image: url(../images/content_rechts_l.jpg);
}
.div6 {
width: 970px;
height: 25px;
margin-left: auto;
margin-right: auto;
}
.div6_1 {
width: 6px;
height: 25px;
margin-left: 11px;
float: left;
background-image: url(../images/footer_links.jpg);
}
.div6_2 {
height: 25px;
width: 949px;
text-align: center;
float: left;
background-image: url(../images/footer_mitte.jpg);
}
.div6_3 {
width: 4px;
height: 25px;
float: left;
background-image: url(../images/footer_rechts.jpg);
} |
weiss da jemand bescheid wie ich das problem am besten lösen kann?
|
|