Frage stellen
Ich versuche gerade eine kleine html/css Webseite zu erstellen und bin an folgendes Problem beim Stylen gestoßen:
Ich habe einen Div-Container mit der id="wrapper". Dieser soll als äuserer Kasten dienen um unter anderem auch die abstände für die Kinderelemente vorzugeben.
Einz kurz vorweg, das design soll nicht statisch sein, sondern flexiebel für viele Monitore und Auflösungen.
Jetzt läuft der Container Wrapper nicht bis ganz nach unten, sprich er umschließt nicht die ganzen Kinderelemente.
Wo ist dort mein Problem? Wie kann ich denn dies lösen?
Ich habe viele möglichkeiten versucht, von display, position, clear...etc... ohne erfolg.
Hier der Quellcode (html):
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="navigation"><ul>
<li><span class="menu_current"><a href="#" target="_top" class="menu_current"> Startseite </a></span>
</li>
<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> Unsere Leistungen </a></span>
</li>
<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> Aktionen </a></span>
</li>
<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> Bild bearbeitung </a></span>
</li>
<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> Posterdruck </a></span>
</li>
<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> Preisliste </a></span>
</li>
<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> Kontakt </a></span>
</li>
<li><span class="menu_default"><a href="#" target="_top" class="menu_default"> Impressum </a></span>
</li>
</ul></div>
<div id="content"><h1>content</h1></div>
</div>
<div id="bottom"><h2>Bottom</h2></div>
</div>
</body>
</html>
und meine CSS:
- Code: Alles auswählen
@charset "UTF-8";
/* ---- Browser Style Reset Start ---- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ---- Browser Style Reset Ende ---- */
body {
background-color: #4d5453;
font-family: Verdana;
font-size:1em;
}
#wrapper {
width:95%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header{
height:125px;
background-color:#FFFFFF;
}
#container {
background-color:#FFFFFF;
position: absolute;
width: 95%;
background-image: url(../img/container-bg.png);
background-repeat:repeat-y;
}
/* ----- Start Navigation ----- */
#navigation {
width: 190px;
padding-left:10px;
float: left;
}
#navigation ul li {
list-style-position: inside;
list-style-type: none;
}
#navigation .menu_current {
line-height:2em;
}
#navigation .menu_current a, #navigation .menu_current a:active, #navigation .menu_current a:link, #navigation .menu_current a:visited {
color:red;
text-decoration: none;
}
#navigation .menu_default {
line-height:2em;
}
#navigation .menu_defaultt a, #navigation .menu_default a:active, #navigation .menu_default a:link, #navigation .menu_default a:visited {
color:blue;
text-decoration: none;
}
/* ----- Ende Navigation ----- */
#content {
padding-left:200px;
}
#bottom {
clear:both;
background-color:#FFFFFF;
height:45px;
}
