[CSS] footer en padding

[anoniem]

Ik heb een lay-out probleempje met de footer van mijn css. Ik wil deze 100% width hebben en de tekst 10px naar rechts van links gezien. Wat er alleen gebeurt is dat de hele footer 10px naar rechts verschuift waardoor er een schuifbalk ontstaat. Ik wil echter alleen de tekst naar rechts hebben. Dit is mijn css: body, html{ margin: 0; padding: 0; height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { margin: 0; width: 100%; font-size: 13px; } #header { width: 100%; height: 50px; margin: 0px 0px 3px 0px; background-color: #39C; color: #FFF; text-align: right; font-family: Tahoma, Geneva, sans-serif; font-size: xx-large; letter-spacing: 3px; } #navigation { color: #333; padding: 10px; margin: 0px 0px 0px 0px; background: #FF3; width=100% text-align: center; } #content_container{ min-height:-100%; background-color: #999; margin-right: 0; margin-bottom: 0; } #footer { color: #FFF; background: #39C; font-family: Tahoma, Geneva, sans-serif; padding: 10px; position:absolute; bottom:0; clear: both; width: 100%; } .clear { clear: both; background: none; } Hiermee krijg ik dit: [img:9aa5e89f37]http://members.upc.nl/a.winkel4/forum/site_1.jpg[/img:9aa5e89f37] Wanneer ik de tekst in de footer met "padding: 10px;" 10 pixels naar rechts wil verschuiven krijg ik dit te zien: [img:9aa5e89f37]http://members.upc.nl/a.winkel4/forum/site_2.jpg[/img:9aa5e89f37] Na een dag van alles proberen weet ik even niet hoe ik dit moet oplossen. Vooral omdat het bij de navigatiebalk wel goed gaat! Weet iemand hoe ik dit kan oplossen? :o

[anoniem]

Wat me opvalt is dat "width: 100%" + "padding: 10px" meer is dan 100%. Die horizontale scrollbalk begrijp ik dus wel. Verder vraag ik me af of je de footer wel perse (absoluut) moet positioneren.

[anoniem]

Ik wil de footer in alle gevallen onderaan het scherm hebben. Vandaar dat ik dit op deze manier heb opgelost. Wat betreft de padding; ik snap het wel en ik snap het niet. :) Padding is zover ik weet de ruimte tussen de inhoud en de border, oftewel...volgens mij dus de ruimte tussen de tekst en de border, toch? Als ik de width op zeg 800px zet en dan de padding gebruik, dan schuift wel mooi alleen de tekst op.

[anoniem]

Je veronderstelling over de padding klopt helemaal. Maar hoe de breedte reageert op de padding, border en margin hangt er van af of je een juiste doctype gebruikt. Gebruik je niet de juiste doctype dan gaat de browser in quirks mode en dan krijg je te maken met de Internet Explorer Boxmodel bug. Geheel volgens traditie houdt Microsoft er een heel eigen mening over het box model op na en trekt zich niet veel aan van de W3C standaard. (met IE8 is dat anders) Nou ja, in het kort. Zonder juiste doctype neemt Internet Explorer de breedte die je opgeeft als maximum, en past daar dan de margin, border en padding tussen. Andere browsers nemen de W3C standaard en zeggen: totale breedte = margin + border + padding + breedte. Als je dan een breedte van 100% opgeeft en je geeft ook nog een margin, border of padding op, dan komt het volgens W3C dus altijd op meer dan 100% uit. Het lijkt er dus op dat je een juiste doctype gebruikt of geen IE ;-) http://www.w3.org/TR/CSS2/box.html http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

[anoniem]

Dat van de browser heb je goed geconcludeerd. ;) Ik gebruik Opera 9.62 om de site te testen. Werkt het daar goed in, dan ga ik daarna alle bugs van IE proberen om te lossen. :) Als ik het samenvat betekent het dus dat ik het beste geen width=100% moet gebruiken, maar bijvoorbeeld width=80%, zodat ik wat ruimte over hou om padding te kunnen gebruiken. Moet ik wel er voor zorgen dat alle boxen exact dezelfde lengte hebben...

[anoniem]

Ik moet tot mijn schaamte bekennen dat ik eigenlijk geen idee heb hoe je een goeie flexibele layout maakt. Ik besef me nu eigenlijk pas dat ik al mijn maaksels op een vaste breedte maak. Dat heeft vast te maken met het feit dat ik het liefst tot op de pixel nauwkeurig wil bepalen hoe mijn layout er uit ziet :lol:

[anoniem]

En ik wil juist de site zoveel mogelijk aanpassen aan de schermresolutie. :) Dit is vooral omdat ik verslagen op de site moet plaatsen met soms 3 foto's naast elkaar. Ik wil de gebruiker zo min mogelijk laten scrollen, maar er moet nog wel gezien kunnen worden waarom de foto gemaakt is. ;)

[anoniem]

Inmiddels ben ik erachter hoe ik een padding toe kan passen zonder dat de complete div verschuift. Je moet eerst de div maken en aan de tekst in de div koppel je de class waarin je de padding zet. Dan loop ik vervolgens wel tegen een ander probleem...ehhh...uitdaging aan, maar dat kan je [url=http://forum.computertotaal.nl/phpBB2/viewtopic.php?t=195512]hier lezen[/url]. :)