Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

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

  1. #1
    Teeny
    Registriert seit
    22.09.2009
    Ort
    Bodensee
    Beiträge
    39
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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-Code:
    <!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>
    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;
     }
    Ich hoffe das geht in Ordnung das ich euch den Code reingesetzt habe?
    und ich hoffe das mir jemand helfen kann?
    LG Jenny
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Probleme beim Layout erstellen. Der Navibereich schlißet nicht an der Kopfzeile a


  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme beim Layout erstellen. Der Navibereich schlißet nicht an der Kopfzeile a

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

  4. #4
    Teeny
    Themenstarter

    Registriert seit
    22.09.2009
    Ort
    Bodensee
    Beiträge
    39
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme beim Layout erstellen. Der Navibereich schlißet nicht an der Kopfzeile a

    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-Code:
    <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
    Geändert von bodenseejenny (06.10.2009 um 22:28 Uhr)

  5. #5
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard AW: Probleme beim Layout erstellen. Der Navibereich schlißet nicht an der Kopfzeile a

    Zitat Zitat von bodenseejenny Beitrag anzeigen
    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.

  6. #6
    Kämpfer
    Gast

    Standard AW: Probleme beim Layout erstellen. Der Navibereich schlißet nicht an der Kopfzeile a

    Morgen

    Probier es allgemein mal so:

    HTML-Code:
    <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.
    Geändert von Kämpfer (07.10.2009 um 09:43 Uhr)

  7. #7
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Probleme beim Layout erstellen. Der Navibereich schlißet nicht an der Kopfzeile a

    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 ^^

  8. #8
    Teeny
    Themenstarter

    Registriert seit
    22.09.2009
    Ort
    Bodensee
    Beiträge
    39
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme beim Layout erstellen. Der Navibereich schlißet nicht an der Kopfzeile a

    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

  9. #9
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Probleme beim Layout erstellen. Der Navibereich schlißet nicht an der Kopfzeile a

    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*

  10. #10
    Teeny
    Themenstarter

    Registriert seit
    22.09.2009
    Ort
    Bodensee
    Beiträge
    39
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Probleme beim Layout erstellen. Der Navibereich schlißet nicht an der Kopfzeile a

    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

Ähnliche Themen

  1. flexibles layout erstellen
    Von loui14 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 12.07.2009, 22:38
  2. Beim Layout die Kanten abrunden?
    Von halop im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 18.09.2008, 15:29
  3. beim css layout verlinken
    Von Verena im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 20.03.2007, 18:57
  4. Ich habe layout probleme:(..beim ie
    Von gast im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 02.09.2006, 16:07
  5. Probleme beim Erstellen einer Funktion in der config
    Von vandur im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 08.08.2006, 14:55

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •