Hallo Leute,
Nach meinem letzten Post habe ich mir ein CSS Buch ( Little Boxes ) gekauft und hab fleißig CSS gelernt.
Nun will ich mir selber eine Layoutvorlage basteln, bekomme es aber überhaupt nicht hin. Im Kopfbereich verwende ich zwei Grafiken, die ich gefloatet habe. Eine Überschrift ist auch im Kopfbereich. Den Navibereich habe ich nach links gefloatet, so das der Textbereich quasi nach oben ( neben den Navibereich ) gesprungen ist. Der Textbereich hat einen breiten "margin-left" bekommen. Mein Problem ist, das der Textbereich ( hell blau) nicht an den Kopfbereich anschließt, der wrapper (grau) ist ihm da im Weg. Das gleiche ist passiert beim Navibereich. Dem Navibereich ist sogar noch ein Stück "body" (ornage) im Weg.
Was habe ich falsch gemacht oder nicht bedacht?
Hier das 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" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="playmo.css" rel="stylesheet" type="text/css" media="screen" />
<title>Jenny's und Lukas Playmowelt</title>
</head>
<body id="startseite">
<div id="wrapper">
<div id="kopfbereich">
<img src="drachegespiegelt.gif" id="drachegespiegelt" alt="Bild von einem Drachenkopf" />
<img src="drache.gif" id="drache" alt="Bild von einem Drachenkopf" />
<h1>Jenny's und Lukas Playmobilseiten</h1>
</div> <!-- Ende Kopfbereich -->
<div id="textbereich">
<h2>Willkommen</h2>
</div> <!-- Ende textbereich-->
<div id="navibereich">
<ul>
<li id="navi01"><a href="home.html">Home</a></li>
<li id="navi02"><a href="ueber_uns.html">Über Uns</a></li>
<li id="navi03"><a href="unser_playmobil.html">Unser Playmobil</a></li>
<li id="navi04"><a href="dioramen.html">Dioramen</a></li>
<li id="navi05"><a href="lukas_welt.html">Lukas Welt</a></li>
<li id="navi06"><a href="customizing.html">Customizing</a></li>
<li id="navi07"><a href="comics.html">Comics</a></li>
<li id="navi08"><a href="gaestebuch.html">Gästebuch</a></li>
<li id="navi09"><a href="mailto:playmojenny@playmowelt.de">E-Mail</a></li>
</ul>
<ul>
<li id="navi10"><a href="copyright.html">Copyright</a></li>
<li id="navi11"><a href="impressum.html">Impressum</a></li>
</ul>
</div> <!-- Ende navibereich -->
</div> <!-- Ende wrapper -->
</body>
</html>
Alles anzeigen
Hier das CSS dazu:
/*==========================================================================================================================
Stylesheet für Jennys Homepage
Stand: Grundgerüst
Datei: playmo.css
Datum: 05.Oktober 2009
Autor: Jennifer Schulte
Aufbau: 1. Kalibrierung der Site
2. Kopfbereich
3. Navigationsbereich
4. Textbereich
5. Sonstige Styles
===========================================================================================================================*/
/*======================================================================================
1.Kalibrierung
=====================================================================================*/
body {
background-color: orange;
color: white;
font-family: monospace, Verdana, Arial, Helvetica, sans-serif;
margin: 10px 0 0 0 ;
padding-top: 15px;
}
div#wrapper {
background-color: grey;
color: white;
margin: 0;
}
/*=====================================================================================
2.Kopfbereich
====================================================================================*/
img#drachegespiegelt {
float: left;
margin: 0 10px 10px 10px;
}
img#drache {
float: right;
margin: 0 10px 10px 10px;
}
#kopfbereich {
background-color: #003399;
padding-bottom: 20px;
margin-bottom: 50px;
overflow: hidden;
position: static;
}
/*=====================================================================================
3.Navigationsbereich
====================================================================================*/
a {
color: red;
text-decoration: none;
}
#navibereich {
float: left;
width: 250px;
background-color: #003399;
}
#navibereich li {
list-style-type: none;
padding: 5px;
border-left: 1px solid red;
}
#navibereich ul {
font-size: 18px;
font-family: "bauhaus 93", monospace, Verdana, Arial, Helvetica, sans-serif;
}
/*=====================================================================================
4.Textbereich
====================================================================================*/
#textbereich {
margin-left: 400px;
background-color: #0000ff;
margin-top: 0;
}
/*=====================================================================================
5.Sonstige Styles
====================================================================================*/
#kopfbereich h1 {
font-size: 300%;
font-family: "bauhaus 93", monospace, Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
Alles anzeigen
Ich hoffe das geht in Ordnung das ich euch den Code reingesetzt habe? 
und ich hoffe das mir jemand helfen kann?
LG Jenny
