Hallo....erstelle gerade eine neue Seite...jetzt soll der Header und Navi die komplette Browserseite ausfüllen, der Contentbereich soll dann mittig drunter, ebenfalls dann mittig der Footerbereich. Ich bekomm es aber nicht hin....jedesmal ist der Header- und Navibereich viel zu kurz. siehe Beispiel:
Hier die html-Seite:
Hier der css-Code:
Wäre schön wenn ihr mir helfen könntet.
Viele Grüße,
Mell
Hier die html-Seite:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<link href="basic.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* Dieser negative Rand mit 1 Pixel hat in jeder Spalte in diesem Layout die gleiche korrigierende Auswirkung. */
ul.nav a { zoom: 1; } /* Mit der zoom-Eigenschaft erhält IE den Auslöser hasLayout, der erforderlich ist, um den zusätzlichen Leerraum zwischen den Hyperlinks zu korrigieren. */
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="header">
<p>HEADER</p>
<!-- end .header --></div>
<div class="navi">
<p>NAVI</p>
</div><!-- end .navi -->
<div class=inhalt>
<div class="sidebar1">
<h1> Sidebar</h1>
<!-- end .sidebar1 --></div>
<div class="content">
<h1>Content</h1>
<!-- end .content --></div>
</div>
<!-- end .container --></div>
<div class="footer">
<p>Footer</p>
<!-- end .footer --></div>
</body>
</html>Hier der css-Code:
Code:
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background-color: #660000;
width: 1360px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px; }
a img {
border: none;
}
a:link {
color:#414958;
text-decoration: underline;
}
a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 100%;
background-color: #600;
position: relative;
}
.header {
background-color: #CCFF00;
}
.navi {
background-color: #096;
position: relative;
}
.inhalt {
background-color: #600;
}
.sidebar1 {
float: right;
height: auto;
background-color: #FFFFFF;
}
.content {
float: left;
background-color: #FFFFFF;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #6F7D94;
color: #FFF;
}
/* ~~ Fußzeile ~~ */
.footer {
clear: both;
background-color: #CCCCCC;
}
/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}Wäre schön wenn ihr mir helfen könntet.
Viele Grüße,
Mell
