Ga naar inhoud
  • 0

[CSS] footer en padding


anoniem

Vraag

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
Link naar reactie

7 antwoorden op deze vraag

Aanbevolen berichten

  • 0
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.
Link naar reactie
  • 0
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
Link naar reactie
  • 0
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...
Link naar reactie
  • 0
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:
Link naar reactie
  • 0
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]. :)
Link naar reactie

Doe mee aan dit gesprek

Je kunt dit nu plaatsen en later registreren. Indien je reeds een account hebt, log dan nu in om het bericht te plaatsen met je account.

Gast
Antwoord op deze vraag...

×   Geplakt als verrijkte tekst.   Plak in plaats daarvan als platte tekst

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
×
  • Nieuwe aanmaken...