Layout verschiebt sich

firewoman · 09.12.2009

Hallo,

ich habe mal wieder ne Frage bezüglich meines Layouts.
Ich habe ein einfaches Layout mit Header,Navi,Textbereich und Footer.
Zwischen Textbereich und Navi zeigt es mir immer einen Abstand von 10 px an, das gleiche zwischen Footer und Textbereich.Habe schon alle möglichen Paddings und Margins auf null gestellt aber irgendwie bekomme ich es nicht hin.
Kann mir jemand eine Antwort geben?

Tattoomaus78 · 09.12.2009

AW: Layout verschiebt sich

Quellcode? Stylesheet?

firewoman · 09.12.2009

AW: Layout verschiebt sich

vielen Dank für die Hilfe

Quellcode:

HTML:

<title>Unbenanntes Dokument</title>

<link href="layout.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="wrapper"> 

<div id="kopfbereich"> 
</div>  
<!-- Ende Kopfbereich -->

<div id="navibereich"> 

</div>  <!-- Ende Navibereich -->


<div id="textbereich">
 
 
  <p align="center">&nbsp;</P>
  <blockquote>
    <p align="left">Top-Solostimmen, ausgefeilte Chorsätze und 
      groovige <br />
      Rhythmen sind unser Markenzeichen. 
      <br />
      Seit 1990 touren wir durch Deutschland,die Schweiz, Östereich und Italien. <br />
      Der Spaß an der Musik hält uns zusammen und gerade das 
      bekommt unser Publikum reichlich zu spüren. <br />
      Wir freuen uns schon auf ein Engagement bei Euch!</p>
  </blockquote>
</div>  <!-- Ende textbereich -->


<div id="fussbereich"> 
</div>  <!-- Ende Fussbereich -->
</div>

</body>
</html>

Css:

Code:

body {
background-color:#FFFFFF;

}


#wrapper {
    background-color:#FFFFFF;
    color:#000000;
    margin:0;
    padding:0;
    
}
    

#kopfbereich {
    background-color: #FFFFFF;
    background-image: url(images/header.jpg);
    height: 192px;
    width: 802px;
    margin:0;
    padding:0;
    margin-left: auto;
    margin-right: auto;
    background-position: 0px 0px;

    
    
}
#navibereich {
    background-image: url(images/nav.gif);
    background-repeat: no-repeat;
    height: 40px;
    width: 802px;
    background-position: 0px 0px;
    margin-left: auto;
    margin-right: auto;

    
    
}
#textbereich {
padding-top: 0;
text-align:left;
width:802px;
background: #ffffff url(images/content_bg.jpg) repeat-y;
background-position: 0px 0px;
margin-left: auto;
margin-right: auto;

    




    
}
#fussbereich {
    background-color: #FFFFFF;
    background-image: url(images/footer.jpg);
    height: 83px;
    width: 802px;
    margin:0 auto;
    padding:0;
}

d0xId · 09.12.2009

AW: Layout verschiebt sich

#kopfbereich {
background-color: #FFFFFF;
background-image: url(images/header.jpg);
height: 192px;
width: 802px;
margin:0;
padding:0;
margin-left: auto;
margin-right: auto;
background-position: 0px 0px;

}

Ich weiss nicht wie das aussieht, wenn man margin und padding auf 0 setzt und dann noch ma seperat margin-left oder so setzt. Könnte sein das dies nicht w3c conform ist, bin mir aber nicht sicher.

#textbereich {
padding-top: 0;
text-align:left;
width:802px;
background: #ffffff url(images/content_bg.jpg) repeat-y;
background-position: 0px 0px;
margin-left: auto;
margin-right: auto;

Also ich wurd ma ne positionasangabe für top einguegen.
Also beim textbereich als top die hoehe des Navi und head Bereiches.

top:232; , wenn ich mich nicht verechnet habe ^^

mfg d0xid

WebMediaService · 09.12.2009

AW: Layout verschiebt sich

Setzte ein zentrales margin und padding
*{padding: 0; margin: 0;}
Damit steht alles auf 0. Dann gib dem wrapper eine width von 802px und kontrolliere eine gif und img wie hoch die sind in Bezug auf deine Div-Container. Dann sollte es klappen.

highjanni · 15.12.2009

AW: Layout verschiebt sich

du mußt am anfang alle vom browser vordefinierten abstände auf 0 setzen und dann nach und nach neu definieren wie du sie brauchst.
*{padding: 0; margin: 0;}