Frage stellen
unzwar kämpfe
ich nun schon seit ner Stunde mit meinem Layout. Ich habe eine Div 1, in der mehrere andere Divs sind. Nun habe ich aber das Problem, das die Div 1 nicht größer wird bzw. gar nicht an gezeigt wird, wenn keine Höhe definiert ist. Was mache ich falsch? Die Div heißt OUTLINE CSS:
- Code: Alles auswählen
body {
font-family: Verdana,Arial,Trebuchet MS,Helvetica,Sans-Serif;
font-size: 12px;
text-decoration: none;
text-align: center;
color: #000000;
background-color :#8e8e8e;
margin: 0px;
padding: 0px;
}
div#header {
width: 100%;
height: 154px;
background-image: url(images/header.gif);
padding-left: 0px;
padding-top: 2px;
font-weight: ;
border: 0px;
}
.input_bar {
border: none;
width: 99px;
height: 21px;
font-family: Verdana,Arial,Trebuchet MS;
font-size: 14px;
padding: 2px;
background-image: url(images/form.gif);
}
div#out{
width: 907px;
height: 154px;
position: relative;
margin: 0 auto;
text-align: left;
border: 0px;
}
div#loginfeld {
width: 893px;
height: 27px;
text-align: right;
font-family: Trebuchet MS, Verdana;
font-size: 18px;
color: #FFFFFF;
border: 0px;
}
div#logo {
width: 414px;
height: 111px;
background-image: url(images/logo.gif);
float: left;
border: 0px;
}
div#warenkorb {
width: 157px;
height: 39px;
background-image: url(images/warenkorb.gif);
margin-top: 16px;
margin-left: 310px;
padding: 34 5 5 5;
float: left;
border: 0px;
}
div#bg {
width: 100%;
height: 612px;
background-image: url(images/bg.gif);
padding-left: 0px;
padding-top: 0px;
font-weight: ;
border: 0px;
}
div#outline {
width: 907px;
position: relative;
margin: 0 auto;
text-align: left;
border: 0px;
}
div#inhalt {
width: 907px;
height: 200px;
background-color :#FFFFFF;
border: 0px;
}
div#schatten {
width: 907px;
height: 15px;
background-image: url(images/schatten.gif);
border: 0px;
}
div#bottom {
width: 907px;
height: 38px;
background-image: url(images/bottom.gif);
border: 0px;
}
div#navi {
width: 200px;
margin-left: 15px;
float: left;
border: 0px;
}
div#navigation {
width: 200px;
height: 41px;
background-image: url(images/navigation.gif);
border: 0px;
}
div#navi_bg {
width: 190px;
background-image: url(images/bg_.gif);
padding: 0 5 0 5;
border: 0px;
}
div#navi_bottom {
width: 200px;
height: 18px;
background-image: url(images/navi_bottom.gif);
border: 0px;
}
div#login {
width: 200px;
height: 41px;
background-image: url(images/login.gif);
margin-top: 15px;
border: 0px;
}
div#content {
width: 661px;
margin-left: 15px;
float: left;
border: 0px;
}
div#erklaerung {
width: 661px;
height: 41px;
background-image: url(images/erklaerung.gif);
border: 0px;
}
div#content_bg {
width: 651px;
background-image: url(images/bg_.gif);
padding: 0 5 0 5;
border: 0px;
}
div#content_bottom {
width: 661px;
height: 17px;
background-image: url(images/cont_bottom.gif);
border: 0px;
}
div#cont_ {
width: 661px;
height: 21px;
background-image: url(images/content.gif);
margin-top: 15px;
border: 0px;
}
div#berichte {
width: 907px;
background-color :#FFFFFF;
border: 0px;
}
div#berichte_ {
width: 875px;
height: 41px;
background-image: url(images/berichte.gif);
margin-left: 15px;
margin-top: 15px;
border: 0px;
}
div#berichte_bg {
width: 865px;
background-image: url(images/bg_.gif);
margin-left: 16px;
padding: 0 5 0 5;
border: 0px;
}
HTML:
- Code: Alles auswählen
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header"> <div id="out"> <div id="loginfeld"> Benutzername <input name="username" id="username" class="input_bar" alt="username" size="18" type="text"> Passwort <input name="passwd" id="passwd" class="input_bar" size="18" alt="password" type="password"> <input name="Submit" class="button" value="Login" type="submit"> </div> <div id="logo"> </div> <div id="warenkorb"> 1 Kunde </div> </div> </div>
<div id="bg">
<div id="outline">
<div id="schatten"></div>
<div id="inhalt">
<div id="navi">
<div id="navigation"></div>
<div id="navi_bg">Startseite</div>
<div id="navi_bottom"></div>
<div id="login"></div>
<div id="navi_bg">Login</div>
<div id="navi_bottom"></div>
</div>
<div id="content">
<div id="erklaerung"</div>
<div id="content_bg">Erklärung, hier :)</div>
<div id="content_bottom"></div>
<div id="cont_"></div>
<div id="content_bg">HuHu, ich bin der Inhalt :)</div>
<div id="content_bottom"></div>
</div>
</div>
<div id="berichte">
<div id="berichte_"></div>
<div id="berichte_bg">Hier kommen Testberichte ect. hin :)</div>
</div>
<div id="bottom"></div>
</div>
</div>
</body>
</html>
