Div center en op zelfde plek, zowel met als zonder scrollbar - Softwareontwikkeling

woensdag 20 augustus 2014 19:36

Acties:

Topicstarter

Hoe kan ik ervoor zorgen dat m'n site niet naar links opschuift als een pagina een verticale scrollbar heeft? Sommige pagina's hebben namelijk weinig content en daardoor geen verticale scrollbar. Aangezien de browser minder breed is als de scrollbar zichtbaar is, schuiven de divs een aantal pixels naar links.

Ik wil eigenlijk dat de pagina centreert alsof er toch een scrollbar is, ook als die er niet is, zodat de divs op m'n pagina op exact dezelfde plaats staan, of er nu een scrollbar is of niet. Ik heb al het één en ander gegoogled, maar kan niks nuttigs vinden. Wie weet raad

overflow: hidden is geen optie want dan kun je niet meer scrollen.

HTML:

<html>
    <head>
        <title></title>
        <style>
            * {margin: 0;}
            html, body {height: 100%;}
            .wrapper {min-height: 100%; position: relative; width: 1280px; height: auto !important; height: 100%; margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */}
            .footer, .push {height: 100px; /* .push must be the same height as .footer */}
            .header {height: 100px;}
            .footer {position: relative; width: 1280px; margin: 0 auto;}
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">Header</div>
            Content         
            <div class="push"></div>
        </div>
        <div class="footer">Footer</div>
    </body>
</html>

woensdag 20 augustus 2014 19:50

Acties:

André

Analytics dude

Dat zou alleen kunnen als je weet hoe breed de scrollbar is op het device van je bezoeker. Die info mis je al.

woensdag 20 augustus 2014 19:55

Acties:

Joep

Topicstarter

Zoiets zou je toch moeten kunnen detecteren? Ik weet alleen niet hoe. Desnoods zou ik uit willen gaan van een vooraf bepaalde breedte voor de scrollbar, rekening houdend met de browsers die ik zou willen ondersteunen.

woensdag 20 augustus 2014 19:58

Acties:

BLACKfm

O_o

Als de hele site naar links opschuift dan is dat toch niet zo erg? Als iemand de browser resized heb je het zelfde effect...

Als het probleem is dat sommige schermen een resolutie van 1280 breed hebben is het gewoon een kwestie van je website smaller maken met 80 pixels voor een mooie maat, dat moet naar mijn idee voldoende zijn voor de meeste verticale scrolbalken.

Je kunt eventueel toch een overflow:hidden toepassen op de body en een scrollbar toekennen aan divs die groter zijn (http://www.brunildo.org/test/Overflowxy2.html). Ik weet alleen niet of dit zo lekker werkt op een mobiel, mocht dat een doelgroep zijn. Daarbij is een hoogte resolutie dan wel belangrijk, iemand met een te klein browserscherm kan misschien niet de onderkant van het tekstvak zien en dus de rest van de tekst niet lezen.

[ Voor 74% gewijzigd door BLACKfm op 20-08-2014 20:12 ]

woensdag 20 augustus 2014 20:17

Acties:

Joep

Topicstarter

Is niet heel erg, maar als iemand op een link van m'n header klikt en naar een andere pagina gaat, dan krijgt hij dezelfde header voorgeschotelt, maar dan een aantal pixels naar links verschoven. Aangezien de pagina laden vrij snel gaat, is dit best irritant.

woensdag 20 augustus 2014 20:21

Acties:

orf

je kunt altijd een scrollbar forceren:

Cascading Stylesheet:

1
2
3

html {
    overflow-y: scroll;
}

Of dat heel mooi is, is een tweede

woensdag 20 augustus 2014 20:39

Acties:

Ramon

Afgezien van altijd een scrollbar tonen (of nooit..) kan je hier niet zoveel aan doen omdat je niet weet hoe breed een scrollbar is, of dat een platform een scrollbar heeft die geen ruimte inneemt, zoals mobieltjes en tablets.

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

woensdag 20 augustus 2014 22:03

Acties:

Joep

Topicstarter

Hmm, dan moet ik er maar voor zorgen dat de pagina's allemaal lang genoeg zijn om de scrollbar te tonen.

woensdag 20 augustus 2014 22:05

Acties:

TERW_DAN

Met een hamer past alles.

En dat is iets dat je nooit kunt doen, omdat je niet weet met welke resolutie mensen draaien.
Als je uitgaat van 1080p hoogte dan zou ik dus een probleem hebben, omdat mijn monitor 1680 pixels hoog is.

Daarbij is het imho ranzig om je design afhankelijk te laten zijn van je content en andersom.

woensdag 20 augustus 2014 22:28

Acties:

Joep

Topicstarter

TERW_DAN schreef op woensdag 20 augustus 2014 @ 22:05:
Daarbij is het imho ranzig om je design afhankelijk te laten zijn van je content en andersom.

Klopt! Ik ben dit topic toch niet voor niets begonnen? Ik heb het liefste dat m'n site er in elke browser exact uitziet zoals ik dat wil.

Er is echter geen oplossing voor het probleem dat ik aan de kaak stel. Nu is dat voor een website zoals bijvoorbeeld tweakers geen probleem, want die vult altijd de volledige hoogte van de browser, zelfs als je je 4K-monitor in portrait-mode hebt staan, dus is er altijd een scrollbar te zien. Hoewel, deze pagina niet misschien: http://tweakers.net/info/over_tweakers/

Ik durf te wedden dat deze pagina hierboven, in het geval dat de verticale resolutie van je browser hoog genoeg is om 'm helemaal op je scherm te laten passen zodat de verticale scrollbar verdwijnt, horizontaal een aantal pixels verschuift.

Ik weet bijna zeker dat er geen enkele website is die niet een aantal pixels horizontaal verschuift, mocht er een pagina zijn die opeens wel verticaal volledig in de browser passen waardoor de scrollbar verdwijnt. Je merkt het alleen bijna nooit omdat bijna alle pagina's op hedendaagse websites hoog genoeg zijn om een scrollbar te veroorzaken. Waar zie je dit dan vaak terug? Op de contact- of about-pagina.

Edit: De enige "oplossing" is dus ervoor zorgen dat je genoeg content hebt om de scrollbar noodzakelijk te maken.

Of is er soms een JS/jQuery-guru in de zaal?

Edit 2: Hier een pagina van tweakers die geen verticale scrollbar nodig heeft op een 1080p-scherm: http://tweakers.net/info/over_tweakers/onafhankelijkheid

En wat zien we? Toch een verticale scrollbar (die niet functioneert btw)

T.net kiest er dus voor om de site liever precies gecentreerd te houden op alle pagina's. Ik denk dat ik dat ook maar zal doen.

Edit 3: overflow-y: scroll; dus. Of dit in elke browser werkt is de vraag.
Wat orf zegt dus

[ Voor 16% gewijzigd door Joep op 20-08-2014 23:00 ]

donderdag 21 augustus 2014 08:38

Acties:

André

Analytics dude

Dan begrijp ik het nog niet, pas als je naar een andere pagina gaat en die dus helemaal opnieuw geladen wordt zal er een scrollbar verschijnen/verdwijnen. Het is niet dat je dan opeens denkt "goh, die website staat verder naar links/rechts"...?

donderdag 21 augustus 2014 08:41

Acties:

TERW_DAN

Met een hamer past alles.

Ik denk dat het inderdaad een beetje een probleem is dat tussen je oren zit, 99% van de gebruikers zal niet eens snappen waar je het over hebt.

overflow-y scroll laat altijd een scrollbar zijn, ook al kun je niet scroller. Dat kun je doen, maar persoonlijk vind ik dat nou ook weer niet zo'n mooie oplossing.

donderdag 21 augustus 2014 08:58

Acties:

frickY

Vind dat persoonlijk juist de beste oplossing.

@André
Als je vlot door een site navigeert kan het vrij frusterend zijn als hij af en toe naar links en rechts springt.
Zeker als je bijv. door een fotoalbum bladert wil je je muis gewoon op het 'Volgende' knopje houden en blind drukken.

[ Voor 72% gewijzigd door frickY op 21-08-2014 08:59 ]

donderdag 21 augustus 2014 09:10

Acties:

Belindo

▶ ─🔘─────── 15:02

orf schreef op woensdag 20 augustus 2014 @ 20:21:
je kunt altijd een scrollbar forceren:
Cascading Stylesheet:
1
2
3
html {
    overflow-y: scroll;
}
Of dat heel mooi is, is een tweede

Dit. Liever een niet functionerende scrollbalk dan dat je elementen verspringen omdat een pagina ineens wél een scrollbalk nodig heeft.

Coding in the cold; <brrrrr />

donderdag 21 augustus 2014 09:29

Acties:

André

Analytics dude

frickY schreef op donderdag 21 augustus 2014 @ 08:58:
@André
Als je vlot door een site navigeert kan het vrij frusterend zijn als hij af en toe naar links en rechts springt.
Zeker als je bijv. door een fotoalbum bladert wil je je muis gewoon op het 'Volgende' knopje houden en blind drukken.

Hmm, daar heb je wel een punt inderdaad.

donderdag 21 augustus 2014 09:33

Acties:

PsychoMantis_NL

PSN: PsychoMantis_NL

Daar ben ik het dus dan net niet mee eens...

Een scrollbar forceren omdat je anders je muis 1 cm. op moet schuiven is wat mij betreft niet echt een valide antwoord. Centreren is centreren, en als er een scrollbar aanwezig is heb je gewoon minder bruikbare ruimte over.

Dan zou je de boel "fixed" moeten positioneren, maar dan is je site niet gecentreerd wanneer je geen scrollbar hebt.

Ik kan me in ieder geval geen situatie bedenken waarin die paar pixels van een scrollbar zo storend zijn dat je er zo veel werk van wilt maken, maar goed, dat kan aan mij liggen.

Mocht je toch overal een identieke opmaak willen, dan denk ik niet dat er wat anders opzit als het forceren van een scrollbar middels de genoemde overflow-y, maar mijn voorkeur zou het niet hebben. Laat het scherm van de bezoeker lekker regelen of er een moet komen of niet...

PsychoMantis_NL @ Battlefield || Red Dead Redemption || GTA V

donderdag 21 augustus 2014 09:51

Acties:

Bosmonster

*zucht*

Zo werken browsers. Als je je hier druk over gaat maken kun je beter een ander vak kiezen.

donderdag 21 augustus 2014 09:53

Acties:

MoietyMe

zij/haar

Bosmonster schreef op donderdag 21 augustus 2014 @ 09:51:
Zo werken browsers. Als je je hier druk over gaat maken kun je beter een ander vak kiezen.

+1

Het verbaasd mij de laatste tijd hoe druk sommige designers zich om dit soort dingen kunnen maken

Snap dat ze de gebruikers ervaring willen verbeteren, maar sommige dingen moet je gewoon los laten, je kan niet alles in de hand houden.

vrijdag 22 augustus 2014 11:26

Acties:

Joep

Topicstarter

Bosmonster schreef op donderdag 21 augustus 2014 @ 09:51:
Zo werken browsers. Als je je hier druk over gaat maken kun je beter een ander vak kiezen.

Ik zal dan ook van front-end-development niet mijn beroep maken, tenzij ik alles pixel perfect in zowat elke belangrijke browser kan laten weergeven. Niet dus

vrijdag 22 augustus 2014 13:43

Acties:

HansvDr

Bosmonster schreef op donderdag 21 augustus 2014 @ 09:51:
Zo werken browsers. Als je je hier druk over gaat maken kun je beter een ander vak kiezen.

Gelukkig snappen Browsers ook: overflow-y: scroll;

Als dat niet de bedoeling was hadden ze het niet moeten ondersteunen.

vrijdag 22 augustus 2014 14:21

Acties:

Blue-eagle

Altijd scrollen is beter. Men heeft een hekel aan content die ineens opschuift omdat de pagina langzaam meer aan het laden is, en besluit een scrollbar nodig te hebben. Het opeens verschuiven van content moet je proberen te voorkomen omdat mensen hiermee per ongeluk op verkeerde dingen kunnen klikken, en het haalt ze uit de flow waar ze in zitten. Je klikt op een link, je scant de resulterende pagina, je leest al kopteksten, en opeens blinkt alles naar links...

Ik heb toevallig dit fenomeen getest bij een werkgever waar we wereldwijd enkele tientallen miljoenen bezoekers hadden per dag. In een A/B-test is gebleken dat het statistisch meetbaar was dat een niet-verspringende website meer blije mensen opleverde.

Nu werk ik er al lang niet meer, dus die informatie is oud en een anekdote, want ik kan niks bewijzen. Neem het met een korrel zout

vrijdag 22 augustus 2014 14:56

Acties:

TheNephilim

Wtfuzzle

orf schreef op woensdag 20 augustus 2014 @ 20:21:
je kunt altijd een scrollbar forceren:
Cascading Stylesheet:
1
2
3
html {
    overflow-y: scroll;
}
Of dat heel mooi is, is een tweede

Dit is de netste oplossing, zonder gekke fratsen uit te halen.

maandag 25 augustus 2014 09:38

Acties:

Bosmonster

*zucht*

HansvDr schreef op vrijdag 22 augustus 2014 @ 13:43:
[...]

Gelukkig snappen Browsers ook: overflow-y: scroll;

Als dat niet de bedoeling was hadden ze het niet moeten ondersteunen.

Het standaardgedrag is overflow: auto. Tuurlijk kun je dit, net als op elk ander element, overschrijven met waardes die je zelf wilt.

Of je dat moet doen is een tweede.

Men heeft een hekel aan content die ineens opschuift omdat de pagina langzaam meer aan het laden is, en besluit een scrollbar nodig te hebben.

Ik denk dat een betere conclusie was geweest dat mensen een hekel hebben aan een langzaam ladende pagina