Probleme beim Layout erstellen. Der Navibereich schlißet nicht an der Kopfzeile an.

bodenseejenny

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:

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:

Code

/*==========================================================================================================================
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

Grevas

http://www.ohne-css.gehts-gar.net/0042.php

sejuma

Du musst bei #kopfbereich den margin-bottom löschen.

bodenseejenny

Danke! Hat jetzt geklappt. Trotzdem ich noch nicht gecleart habe.
Der Kopfbereich hat jetzt auch keinen margin mehr...

Grevas
muss immer gecleart werden? Die Überschrift

HTML

<h1>Jennys und Lukas Playmobilseiten</h1>

soll ja schon zwischen beiden gefloateten Drachengrafiken stehen bleiben. Wenn ich die Überschrift nun cleare, rutscht doch diese Überschrift unter die zwei Drachenlogos im #kopfbereich oder?
Oder muss ich dann #textberiech clearen? oder vielleicht #navibereich und #textbereich?Beide sollen direkt unter dem #kopfbereich beginnen. Der Navibereich links und der #textbereich rechts daneben.
Den #navibereich habe ich auch gefloatet, darunter kommt aber kein Element mehr was ich clearen könnte.
Was muss ich dann dafür clearen?

LG Jenny

Elvis

Zitat von bodenseejenny

muss immer gecleart werden?

Einer Regel nach ja, aber auch hier ist die Regel dass es Ausnahmen gibt.

Da ich schon zu müde bin um alles zu lesen UND zu verstehen, schmeiß ich einfach mal die Vermutung in den Raum, dass auch der Ort des clearens geschickt gewählt werden muss.

Kämpfer

Morgen

Probier es allgemein mal so:

HTML

<div id="aussenrahmen">
    <div id="div1"></div>     <!-- float: left; -->
    <div id="div2">              <!-- float: left; -->
       <div id="div2.1"></div> <!-- mussen nur bei bedarf gefloatet werden -->
       <div id="div2.2"></div>
    </div>
    <div id="div3"></div>      <!-- float: left; -->
    <div id="div4"></div>      <!-- float: left; -->
    <div id="clear">&nbsp;</div> <!-- clear: both; height: 0; -->
</div>

Unter anderen kannst du das cleardiv auch als id="footer"(höhe 25px statt 0) benutzen, so mach ich es immer und geht problemlos.

Grevas

Man muss clearen, sobald man an den Punkt kommt, indem man nichtmehr floaten will. Z.B. neue Zeile eben.

Ehrlichgesagt hab ich mir das ganze auch nicht sehr genau angeschaut, hab gelesen das du floatest und hab nach einem Clear gesucht - kein clear - hier hast du n Link *g* muss ja nicht unbedingt die Ursache für ein Problem sein, aber bei "x y ist verschoben" bin ich ein bisl faul und will es sehen, dann findet man das ganze nämlich schneller. Um das ganze bei mir noch reinzuklatschen hatte ich dann erstmal keine lust gehabt

bodenseejenny

Danke euch allen!
So, ich hab noch mal nachgeschaut. Anstatt zu clearen, hab ich die beiden Drachengrafiken mit "overflow: hidden" in den Kopfbereich eingeschlossen. Das ist doch so was wie ein Clear. Dann müsste ja alles in Ordnung sein?

LG Jenny

Grevas

nein das ist nicht sowas wie ein clear.... Mit clear sagst du "ab hier nichtmehr floaten!", wenn man das nicht macht, verrutscht gerne mal was in die Zeile wenns reinpasst (so gehört sichs ja auch). Overflow hat damit nichts zu tun *g*

bodenseejenny

Danke!
Also habe ich mit "overflow hidden" die Grafik nur eingeschlossen. Wenn ich jetzt aber den Navibereich " cleare ", ( der ja vertikal auf der linken Seite verläuft) dann würde doch der Textbereich, den ich daneben platziert habe, unter den Navibereich verrutschen. Und das wäre ja gar nicht gewünscht. Dem Textbereich habe ich ja extra ein breites " margin-left" gegeben, damit der Navibereich links neben dem textbereich steht.
Belasse ich das jetzt so oder gibt es da noch eine andere Lösung, die ich machen muss?
Ohne das Clear, passt es bis jetzt gott sei dank noch!
Aber manchmal passieren schon komische Dinge mit dem Navibereich wenn ich was ändere, so dass der wrapper mal durchschaut oder der body.

LG Jenny

thilda

Wenn du das clear-DIV mehr als einmal benutzt, darfst du keine ID machen, sondern musst eine Class nehmen!

ID's dürfen pro seite nur einmalig vorkommen!

Tags