Hi Leute
ich bin neu hier und bin gerade am CSS lernen.
Jetzt habe ich schon Probleme und komm nicht weiter :cry:
Meine Navigation ist jetzt im Kopfteil doch der Kopfteil sollte unter der Navigation andocken.
ich danke euch im vorraus für eure Hilfe
HTML Code
HTML
<!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" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="contentbereich">
<div id="top_nav">
<ul>
<li>Startseite</li>
<li>Imressum</li>
<li>Kontakt</li>
</ul>
</div>
<div id="masthead">
<p>kopf</p>
</div>
<div id="container">
<div id="left_col">
<ul>
<li>Startseite</li>
<li>Imressum</li>
<li>Kontakt</li>
</ul>
</div>
<div id="page_content">
mitte
</div>
<div id="right_col">
rechts
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>CSS Code
Code
*{
margin: 0;
padding: 0;
}
body {
text-align: center;
background-color: #E1E1E1;
}
#contentbereich {
background-color: #5555FF;
width: 1000px;
margin: 0px auto;
}
#top_nav {
text-align:left; /* Textausrichtung */
margin-top:0px; /* Außenabstand oben */
margin-bottom:10px; /* Außenabstand unten */
margin-left:20px; /* Außenabstand links */
margin-right:15px; /* Außenabstand rechts */
}
#top_nav ul {
list-style:none; /* keine Aufzählungspunkte */
}
#top_nav li {
float: right; /* Anordnung links */
margin-left:0px; /* Außenabstand oben */
width:90px; /* Breite des Links */
background-color:silver; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
border-bottom:1px red solid; /* Rahmenfarbe unten */
border-right:2px blue solid; /* Rahmenfarbe unten */
margin-top:0px; /* Außenabstand oben */
padding-top:8px; /* Innenabstand oben */
padding-bottom:8px; /* Innenabstand unten */
padding-left:8px; /* Innenabstand unten */
padding-right:8px; /* Innenabstand unten */
}
#navi a:link { color:blue; text-decoration:none; }
#navi a:visited { color:black; text-decoration:line-through; }
#navi a:focus { color:green; text-decoration:overline; }
#navi a:hover { color:red; text-decoration:overline; }
#navi a:active { color:orange; text-decoration:underline; }
#masthead {
background-color: #FFD42A;
padding-top: 50px;
}
#container {
background-color: #808080;
position: relative;
width: 100%;
}
#left_col {
background-color: #00FF00;
width: 200px;
position: absolute;
left: 0px;
top: 0px;
text-align: left;
padding-left:30px;
padding-top: 10px;
}
#left_col ul {
list-style:none; /* keine Aufzählungspunkte */
}
#left_col li {
float:left; /* Anordnung links */
margin-left:0px; /* Außenabstand oben */
width:90px; /* Breite des Links */
background-color:silver; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
border-bottom:1px red solid; /* Rahmenfarbe unten */
border-right:2px blue solid; /* Rahmenfarbe unten */
margin-top:0px; /* Außenabstand oben */
padding-top:8px; /* Innenabstand oben */
padding-bottom:8px; /* Innenabstand unten */
padding-left:8px; /* Innenabstand unten */
padding-right:8px; /* Innenabstand unten */
}
#navi a:link { color:blue; text-decoration:none; }
#navi a:visited { color:black; text-decoration:line-through; }
#navi a:focus { color:green; text-decoration:overline; }
#navi a:hover { color:red; text-decoration:overline; }
#navi a:active { color:orange; text-decoration:underline; }
#page_content {
background-color: #FFFF00;
margin-right: 200px;
margin-left: 200px;
text-align: left;
padding-left: 60px;
padding-top: 10px;
}
#right_col {
background-color: #00FFFF;
width: 200px;
position: absolute;
right: 0px;
top: 0px;
text-align: left;
padding-left: 20px;
padding-top: 10px;
}
#footer {
background-color: #FFFF00;
}