Layout verschuift door scrollbalk.

[Richard!]

Hallo,

ik ben bezig met de laatste afrondingen van mij website, echter heb ik nu een probleem wat ik nogal irritant vind.

Op diverse pagina's heb ik dat ik naar beneden moet scrollen, niet te vermijden natuurlijk, maar daardoor verspringt de layout (Header, navigatiebalk e.d) wat ik nogal slordig vind.

Zie hier het probleem.
http://imageshack.us/m/687/362/homerf.jpg

http://imageshack.us/m/26/277/contactpg.jpg

Op die eerste pagina (home) zit een scrollbalk terwijl die daar totaal overbodig is wat ook nogal storend is.

is er een manier op die layout toch overal gecentreerd te krijgen of zou je dan simpelweg op elke pagina een scrollbalk moeten plaatsen?

Alvast bedankt.

[Wiethoofd]

Altijd een (inactieve) scrollbalk laten zien?

Cascading Stylesheet:

html { overflow-y: scroll; }

En anders een wrapper div met fixed width en een margin: auto. De huidige opzet met tabel is niet echt prettig daarvoor lijkt me.

[erwin85]

Waarschijnlijk is er een element die wat hoger is dan je denkt. Probeer is bij alle elementen de margin op 0 te zetten, of nog beter dit:

code:

html, *
{
   margin: 0;
   padding: 0;
}

[RobIII]

erwin85 schreef op zaterdag 21 mei 2011 @ 16:16:
Waarschijnlijk is er een element die wat hoger is dan je denkt. Probeer is bij alle elementen de margin op 0 te zetten, of nog beter dit:

code:

html, *
{
   margin: 0;
   padding: 0;
}

Aaah, de shotgun approach
Je kunt natuurlijk ook even met de webdeveloper tools de outlines van alle elementen aanzetten en gewoon zien waar het probleem in zit.

Wiethoofd schreef op zaterdag 21 mei 2011 @ 14:14:
Altijd een (inactieve) scrollbalk laten zien?

overflow: scroll

[ Voor 15% gewijzigd door RobIII op 21-05-2011 16:38 ]

[Wiethoofd]

RobIII schreef op zaterdag 21 mei 2011 @ 16:36:
overflow: scroll

Op html5boilerplate.com staat dat overflow-y ook gewoon werkt. IE toont default al een scrollbalk, de -y is voor de andere (lees: betere) browsers

[RobIII]

-y was anders (net als -x), AFAIK, ooit een IE-only CSS property. En voor dit probleem volstaat de versie zonder -y ook (Ik zou 'm op body ipv html gezet hebben, but who cares )

[Bosmonster]

Wiethoofd schreef op zaterdag 21 mei 2011 @ 17:27:
[...]

Op html5boilerplate.com staat dat overflow-y ook gewoon werkt. IE toont default al een scrollbalk, de -y is voor de andere (lees: betere) browsers

Alleen oudere IE-versies doen dat. De standaard is geen scrollbalk tegenwoordig in moderne browsers. Dit heeft inderdaad tot gevolg dat gecentreerde sites verspringen bij langere pagina's. Dit proberen te voorkomen lijkt me gekkenwerk eerlijk gezegd, maar een scrollbar forceren op de body is een oplossing.