Hoi Elsnorry,
Kijk, zo'n online testpagina doet wonderen!
Er zitten geen html-errors in, en de css-validator moppert wel wat over IE-foefjes, maar raakt geen essentiële dingen.
Nu kunnen we ter zake komen, want de probleem-verschijnselen doen zich jammer genoeg nog steeds voor...
M'n stille hoop dat het met valid html en css opgelost zou kunnen zijn is weggesmolten als een ijspegel op een blakerende barbecue.
- Tip 1 voor diagnose: Haal voor Firefox de Webdeveloper Toolbar add-on (gratis) binnen, deze maakt het leven aanzienlijk makkelijker.
- Tip 2 voor diagnose: Haal voor Firefox verder de Firebug add-on (gratis) binnen: ook deze spaart uren zoekwerk.
- Tip 3 voor diagnose: Isoleer het probleem! (door de rest buiten werking te zetten)
- Tip 4 voor bouw & diagnose: Een rijtje verdere tips in de "Golden Rules Of CSS".
=======
De topstrook (1)
De koe bij de horens gevat: eerst kijken wat er met de bovenstrook <div id="tlc"> aan de hand is.
Dwz. deze isoleren door de #container en de #footer in de html tijdelijk een
style="display:none" te geven.
Dan even kijken of een of ander javascript soms dwars zit: nee, javascript uitschakelen helpt niet; dus verder.
Als je nu het browser-window gaat verkleinen tot smaller dan de pagina-breedte van 980px, dan valt op dat er helemaal geen link-rechts scrollbar tevoorschijn komt: de tekst "Welcome, visitor ..." wordt domweg afgekapt. Dat moet niet mogen!
=======
De topstrook (2)
Veel css zit er nog niet voor de <div id="tlc">: alleen de html- en de body-styles; en de dader is gauw gevonden.
Het is de
html {overflow-x: hidden} die de L/R scrollbar vernietigt.
Teruggehaald met
html {overflow-x: auto}
- Dat geeft deze testpagina: elsnorry-nw2.htm
- NB: bij deze en de andere testpagina's staan alle css-aanpassingen in de <head>.
Scrollbar onderaan terug, maar het probleem ook! Bij smal venster en naar rechts scrollen zit er geen background achter het rechterdeel van de topstrook.
=======
De topstrook (3)
En die onbrekende achtergrond rechts klopt eigenlijk wel: het background-image zit in de <div id="tlc"> die geen opgegeven breedte heeft. Dan wordt de #tlc dus 100% breed > dwz. 100% van de schermbreedte van dat moment.
Maar als de schermbreedte te krap is voor de inhoud (die in de #tlc-wrapper zit), dan komt er bij naar rechts scrollen na de 100% niets bij in de #tlc.
Dat is op te lossen door ook de #tlc-wrapper hetzelfde background-image te geven, en ook dezelfde hoogte, en ook dezelfde box-shadow; want alles moet doorlopen.
Hierbij moet de box-shadow links en rechts er uit, om bij een breed window geen schaduwrandje te krijgen op de linker- en rechtergrens van de tlc-wrapper (de inhoud-breedte).
Tegelijk maken we nog even van de gelegenheid gebruik om links en rechts in de #tlc-wrapper een kleine padding van 5px te zetten, dan zit de tekst bij smalle schermen niet pal tegen de schermrand aan; gevolg: de breedte van 980px moet teruggebracht worden tot 970px, want de uiteindelijke breedte van een element is de opgegeven width +de padding-L + de padding-R.
Hiermee is de topstrook zoals ie zijn moet.
=======
De footer (1)
Tijd om de
display:none uit de footer te halen, en te kijken wat er dan gebeurt.
Hm, nu komt er opeens een extra scrollbar L/R onderin de footer, terwijl bij smalle schermen onderaan het browserscherm als zo'n mooie scrollbar zit! En zelfs bij 1024*768px is die footer-scrollbar er...
=======
De footer (2)
Wat is hier aan de hand? De #footer had een
{overflow: auto}, dwz. een automatische scrollbar als de 100% schermbreedte van de #footer kleiner is dan z'n inhoud. Maar in dat geval komt er al een normale scrollbar onderaan: dubbelop. En als de footer bij brede schermen breder is dan z'n inhoud, moet footer (resp. footer-background) links en rechts ervan gewoon zichtbaar zijn. Ergo:
#footer {overflow: visible}
Extra scrollbar onderaan footer weg, maar het probleem nog steeds aanwezig! Bij smal venster en naar rechts scrollen zit er geen background achter het rechterdeel van de footer.
Tegelijk zien we nog een ander probleem: bij een smal scherm zit de linkerkant van de eerste kolom niet helemaal links, maar een stuk opgeschoven naar rechts; en de rest van de kolommen staan ook teveel naar rechts.
=======
De footer (3)
Eerst de linkerkant aanpakken. De linker zijkant van de footer valt bij een smal scherm altijd samen met de linker-browserrand. De #info met de kolommen zit binnen de #footer en begint aan de linkerkant gelijk met de linkerkant van de #footer: als de #info geen margin-left heeft, en ... als de #footer geen padding-left heeft. Maar de #footer heeft een padding-left van 40px!
Hetzelfde gebeurt met de padding-right van de #footer: die zit ook om de #info heen gedrapeerd. - Dat zie je met Firebug prachtig tevoorschijn komen:
Dus de paddings L/R van de footer moeten op nul gezet worden.
Maar hiermee is het probleem van de ontbrekende rechter-background nog niet verholpen:
=======
De footer (4)
Bij het gapende gat rechts speelt iets dergelijks als bij de topstrook. Als de #footer moet ophouden wegens het bereiken van 100% schermbreedte, en de #info moet bij smalle schermen wegens zijn 980px breedte nog doorlopen, dan gaat het mis. Dus ook hier moet transplantatie plaatsvinden: ook de #info moet het background-image krijgen.
Plus: ook de border-top, de border-bottom en de box-shadow van de #footer.
Maar: de #info-background aan de rechterkant moet over de volle hoogte van de #footer lopen, en dat gaat niet als de footer een padding-top en padding-bottom heeft. Die paddings moeten dus uit de #footer verdwijnen, en overgeheveld worden naar de #info.
Verder zit een border van een ingesloten element altijd binnen de border van het omvattende element. Daarmee komen de border-top en border-bottom lijntjes van de #info te laag te staan (net onder de borders van de #footer). Die kunnen omhoog getrokken worden met een negatieve margin-top en margin-bottom van de #info.
En tenslotte zetten we ook hier de linkerkant van de kolommen niet pal tegen de venster-zijkant aan (bij smalle schermen), maar iets er van af. Wederom 5px links en rechts padding erbij voor de #info, met bijbehorend terugschroeven van de breedte van 980px naar 970px.
Footer-problemen opgelost.
=======
Het totaal
Voordat de fanfare kan losbarsten, willen we nog wel even de complete pagina zien: misschien gebeuren er alsnog vreemde dingen.
De
display:none van de #container afgehaald.
Oeps! Nu komt er bij 1024*768px een horizontale scrollbar die er niet hoort te zijn, en bij 1024*768px en smaller komt er bij de topstrook en de footer toch weer een stukje blanco achtergrond tevoorschijn.
Iets in de inhoud van de #container is te breed.
=======
Door het lint (1)
De boosdoener valt gauw door de mand: het is het ribbon, waarvan de uitsteeksels links en rechts buiten de 980px zijn gekomen.
Gelukkig heeft het menu nog voldoende speling om het lint met de uiteinden en het menu iets smaller te maken.
Eerst L en R 30px van het menu afsnoepen met
#menu {margin: 0 30px 10px 30px}.
Nu hangen de flapjes nog buiten boord.
=======
Door het lint (2)
De zijkantjes zijn buiten de 980px getrokken met een
.ribbon:before {left: -23px} en een
.ribbon:after{right: -23px}.
Die moeten dus ook 30px opschuiven en gaan van negatief naar positief: 30px-23px=7px.
Nu alleen de schaduw-driehoekjes nog verplaatsen.
=======
Door het lint (3)
De schaduw-driehoekjes kunnen ook 30px verderop door: .ribbon .ribbon-content:before {left: 0} en .ribbon .ribbon-content:after{right: 0} beiden op 30px te zetten.
Door het lint van de eindstreep!
Met vriendelijke groet,
CSShunter
