Toon posts:

Layout verschuift door scrollbalk.

Pagina: 1
Acties:

  • Richard!
  • Registratie: April 2009
  • Laatst online: 27-09-2021
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.

richardbrunsveld.nl - Facebook - Flickr


  • Wiethoofd
  • Registratie: Juli 2007
  • Laatst online: 22-05 18:43
Altijd een (inactieve) scrollbalk laten zien?
Cascading Stylesheet:
1
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.

Wiethoofds meuk en 'overige'


  • erwin85
  • Registratie: Juli 2002
  • Laatst online: 05-06 20:34
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:
1
2
3
4
5
html, *
{
   margin: 0;
   padding: 0;
}

  • RobIII
  • Registratie: December 2001
  • Laatst online: 02:07

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

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:
1
2
3
4
5
html, *
{
   margin: 0;
   padding: 0;
}
Aaah, de shotgun approach :D :X
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]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • Wiethoofd
  • Registratie: Juli 2007
  • Laatst online: 22-05 18:43
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

Wiethoofds meuk en 'overige'


  • RobIII
  • Registratie: December 2001
  • Laatst online: 02:07

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

-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 :P )

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 13-01 10:59

Bosmonster

*zucht*

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.
Pagina: 1


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee