Wenn ich das padding wegnehme, verschiebt sich das Design

[Tobias]

Hallo,

ich mache gerade ein Design, was auf CSS basiert.

Nun habe ich im Head-Bereich eine Grafik als Hintergrund genommen.

Was wie folgt aussieht:
http://s3.directupload.net/images/080328/d297txqx.jpg

Wie ihr sehen könnt, ist das padding auf 10 px und fängt an sich zu wiederholen (der Banner)

Wenn ich das padding nun auf 0 setze, verschiebt sich das Design wie folgt:

http://s6.directupload.net/images/080328/yfzd4f62.jpg


Mein CSS.Code ist :

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;

}
#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 0px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 0px 0px 0px 0px;
 background: #BD9C8C;
 background-image: url(images/head.jpg);
}
#menuleiste { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 200px;
 float: left;
}
#content { 
 float: right;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 678px;
 display: inline;
}
#footer { 
 width: 900px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

 

[Commodore]

Gib dem ganzen doch ein padding nach links und nach rechts.


[css]padding[/css]


Alternativ kannst du die Grafik auch breiter machen.

 

[neuroleptika]

Der header ist 900px breit.
Wrapper ist jedoch 922px breit.

Menüleiste
border: 1px ~ 2
padding: 10px ~ 20
width: 200px ~ 200
Gesamt: 222px

Content:
border: 1px ~ 2
padding: 10px ~ 20
width: 678px ~ 678
Gesamt: 700 px

Content+Meneueleiste =922px

border+padding+width = gesammtbreite einer Box.
Darum fehlen dir ohne padding 22px.

Beim IE5 ist das nicht so. Also hast du die css-Datei für den IE5 schon fertig :-)

 

[Tobias]

Dankeschön!

Und euch allen ein schönes Wochenende!