width 100% länger als die Seite

[René Maroufi]

Hallo,

ich bin heute auf das Phänomen gestossen, das ein Seitenelement, dessen Hintergrundbild über die ganze Breite der Seite laufen soll, mit der Angabe width:100% im CSS geringfügig breiter als die Seite ist, so das ein Scrollbalken gezeigt wird. Das Elternelement wäre aber body und das hat sowohl padding, als auch margin auf 0px gesetzt. Daher müßte doch wohl width:100% exakt die Seitenbreite einnehmen. Wie kommt das und wie kann ich dies korrigieren?

Gruß
René

[apsel]

Om nah hoo pez nyeetz, René Maroufi!

Schau dir mal das Boxmodell an, vielleicht hilft das schon weiter.

Matthias

[ChrisB]

Hi,

ich bin heute auf das Phänomen gestossen, das ein Seitenelement, dessen Hintergrundbild über die ganze Breite der Seite laufen soll, mit der Angabe width:100% im CSS geringfügig breiter als die Seite ist, so das ein Scrollbalken gezeigt wird. Das Elternelement wäre aber body und das hat sowohl padding, als auch margin auf 0px gesetzt. Daher müßte doch wohl width:100% exakt die Seitenbreite einnehmen. Wie kommt das und wie kann ich dies korrigieren?

Das Element selbst oder das Vorfahrenelement von BODY könnten noch margin oder padding haben, und ggf. irgendeins von den dreien auch noch einen Rahmen.

Mit Firebug sollte sich recht leicht herausfinden lassen, was Sache ist.

MfG ChrisB

[René Maroufi]

Das Element selbst oder das Vorfahrenelement von BODY könnten noch margin oder padding haben, und ggf. irgendeins von den dreien auch noch einen Rahmen.

Das Elternelement von body ist html, das habe ich auch mal versuchsweise auf padding:0 und margin:0 gesetzt ohne das es was gebracht hat. Auch alle borders habe ich mal auf 0 gesetzt, ohne sichtbaren Effekt.

Mit Firebug sollte sich recht leicht herausfinden lassen, was Sache ist.

Ich habe mal Firebug installiert. Ich hatte vorher auch schon das Addon Webdeveloper im Firefox installiert, aber das zeigt mir zwar die Elementgrößen, aber eben nicht warum das Element so groß ist.

Live sieht man diese Seite jetzt hier:

http://www.maruweb.de/religion-der-zukunft/

Gruß
René

[ChrisB]

Hi,

Das Element selbst oder das Vorfahrenelement von BODY könnten noch margin oder padding haben, und ggf. irgendeins von den dreien auch noch einen Rahmen.

Das Elternelement von body ist html, das habe ich auch mal versuchsweise auf padding:0 und margin:0 gesetzt ohne das es was gebracht hat. Auch alle borders habe ich mal auf 0 gesetzt, ohne sichtbaren Effekt.

#leiste {  
background-image:url("grafik/leiste.png");  
background-repeat:repeat-x;  
height:117px;  
left:0;  
padding-left:20px;  
position:absolute;  
top:0;  
width:99%;  
}

D'oh!

MfG ChrisB

[René Maroufi]

#leiste {

padding-left:20px;
}

  
Achso, das padding-left! OK, ohne das geht es, aber müßte es nicht eigentlich auch mit padding gehen, da padding doch ein Innenabstand ist und daher im Gegensatz zum margin das Element eigentlich nicht vergrößert, oder?

[apsel]

Om nah hoo pez nyeetz, René Maroufi!

Achso, das padding-left! OK, ohne das geht es, aber müßte es nicht eigentlich auch mit padding gehen, da padding doch ein Innenabstand ist und daher im Gegensatz zum margin das Element eigentlich nicht vergrößert, oder?

Auch dazu gibt es im Wiki oder bei Selfhtml aussagekräftige Beiträge.

Matthias