Media queries

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Lord Gaga

Lord Gaga

13/07/2015 15:19:07
Quote Anchor link
Hallo,

Op dit moment heb ik een div van 100% breed. Wat ik nu wil is dat wanneer de browser 1000px of breder wordt, de div 1000px wordt. Dit doe ik met het volgende stukje CSS:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
@media (min-width: 1000px)
{
    div.global-container
    {
        margin: 0px auto;
        width: 1000px;
    }
}


Het probleem is, wanneer er een verticale scrollbar aanwezig is op de pagina, dan past de div van 1000px natuurlijk niet op een pagina van 1000px en dus vormt zich een horizontale scrollbar.

Ik heb voor mijn gevoel het hele internet afgezocht maar kan geen enkele (goede) oplossing vinden voor dit probleem. Hebben jullie misschien een idee hoe ik dit fatsoenlijk kan oplossen?

Alvast bedankt!
Gewijzigd op 13/07/2015 15:20:37 door Lord Gaga
 
PHP hulp

PHP hulp

27/01/2020 03:19:30
 
Fabian webstars

Fabian webstars

13/07/2015 16:20:18
Quote Anchor link
je wil de horizontale scrollbar weg hebben?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
@media (min-width: 1000px)
{
    div.global-container
    {
        overflow-x:none;
        margin: 0px auto;
        width: 1000px;
    }
}
Gewijzigd op 13/07/2015 16:32:27 door Fabian webstars
 
Lord Gaga

Lord Gaga

13/07/2015 16:34:40
Quote Anchor link
Nee, het probleem is dat wanneer je je browser resized tot een breedte van 1000 pixels, een div van 1000 pixels een horizontale scrollbar veroorzaakt wanneer er een verticale scrollbar aanwezig is. Ik ben op zoek naar een oplossing waarbij dit niet gebeurd. Het verbergen van de horizontale scrollbar heeft niet veel zin, omdat de div van 1000 pixels dan alsnog aan de rechterkant wordt afgekapt door de verticale scrollbar.
 
Victor -

Victor -

13/07/2015 17:23:44
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
max-width: 1000px;

Hiermee wordt de div maximaal 1000px breed.
 
Marthijn Buijs

Marthijn Buijs

13/07/2015 17:24:21
Quote Anchor link
Al geprobeerd om de width met procenten te doen?
Of zet anders even een screenshot van het probleem hier in dit topic, dan snappen we hopelijk beter wat je bedoeld.
 
Lord Gaga

Lord Gaga

13/07/2015 17:46:34
Quote Anchor link
Het doel is het maken van een responsive layout.

De div global-container is 100% breed. Wanneer de body een breedte bereikt van minimaal 1000 pixels, wordt global-container ook 1000 pixels, en wordt deze gecentreerd. (Dit d.m.v. die media query)

Het probleem is echter de verticale scrollbar die zich soms voordoet in de body.

De media query zal zeggen dat de body nog steeds 1000 pixels is, wat er in resulteert dat global-container ook 1000 pixels is. Maar die scrollbar neemt ook ruimte in beslag.

Er is dus een body van 1000 pixels breed, met daarin global-container van 1000 pixels breed en een scrollbar van +/- 20 pixels breed.

Dat past niet, want de body is 1000 pixels breed en de inhoud 1020 pixels. Dus ontstaat er een horizontale scrollbar.
Gewijzigd op 13/07/2015 17:53:33 door Lord Gaga
 
Daan Slagter

Daan Slagter

13/07/2015 18:17:39
Quote Anchor link
Ik zou de media querie dan op 1020px zetten, zodat hij dan pas overspringt.
 
Lord Gaga

Lord Gaga

13/07/2015 18:26:23
Quote Anchor link
Dat kan, mocht het niet zo zijn dat de breedte van de scrollbar afhankelijk is van de browser die je gebruikt.
 
Daan Slagter

Daan Slagter

13/07/2015 18:38:50
Quote Anchor link
Dan doe je toch 10px extra
 
Lord Gaga

Lord Gaga

13/07/2015 18:58:11
Quote Anchor link
Zou kunnen, maar in mijn geval springen de 2 "layouts" niet mooi in elkaar over op die manier.
 
Thomas van den Heuvel

Thomas van den Heuvel

13/07/2015 19:22:17
Quote Anchor link
Lord Gaga op 13/07/2015 18:58:11:
Zou kunnen, maar in mijn geval springen de 2 "layouts" niet mooi in elkaar over op die manier.

Das een kwestie van ontwerp :).

Kies een andere breakpoint, zorg dat je overflow verbergt (beide reeds voorgesteld) of vermijd dat je hier in eerste instantie tegenaan loopt door je design wat flexibeler te maken (zorg dat je wat "lucht" overhoudt buiten die 1000px ofzo). Veel andere smaken zijn er niet?
 
Eddy E

Eddy E

13/07/2015 19:55:28
Quote Anchor link
Daarom komt width: 960px; zo vaak voor ;)
Die stappen pas over als je onder de 1024 of 1000 pixels komt. Houd altijd wat reserve.

Wat je ook kan doen, zonder media-queries:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
   div.global-container
    {
        width: 100%;
max-width: 1000px;
    }


Doet ook wat je wilt, zonder gedoe ;)
 
Lord Gaga

Lord Gaga

13/07/2015 20:11:06
Quote Anchor link
Hmm, max-width was ik nog niet opgekomen, dat ga ik proberen, bedankt!
 
Thomas van den Heuvel

Thomas van den Heuvel

13/07/2015 20:21:24
Quote Anchor link
-_-

Dat stelde Victor hierboven ook al voor :D.

Misschien moeten we dezelfde oplossingen gewoon wat vaker aandragen :).
Gewijzigd op 13/07/2015 20:21:40 door Thomas van den Heuvel
 
Lord Gaga

Lord Gaga

13/07/2015 21:23:49
Quote Anchor link
Ik dacht dat hij de vraag verkeerd begreep.
 
Victor -

Victor -

13/07/2015 21:31:25
Quote Anchor link
Nee dus:)
 
Lord Gaga

Lord Gaga

13/07/2015 21:34:52
Quote Anchor link
Haha, sorry.

Het enige wat ik nog voor elkaar moet zien te krijgen is hoe ik 2 divs die naast elkaar staan in de "desktop" versie, onder elkaar komen te staan in de "mobile" versie. En anders toch maar wat ruimere media queries gebruiken. :/
Gewijzigd op 13/07/2015 21:35:31 door Lord Gaga
 
Marthijn Buijs

Marthijn Buijs

13/07/2015 21:44:32
Quote Anchor link
Met bootstraps grid system gaat dit heel makkelijk, of als je zelf beetje CSS kan is dit ook zelf te creeren.
 
Fabian webstars

Fabian webstars

13/07/2015 23:44:47
Quote Anchor link
Gewoon allebei floaten en daar een media query bij plakken om het nettjes te laten verlopen (denk ik)
 
Marthijn Buijs

Marthijn Buijs

13/07/2015 23:55:58
Quote Anchor link
Jaa en dan de float te verwijderen bij de media query en dan komt als het goed is onder elkaar of je moet nog clear: both; toevoegen bij de media query
 
Eddy E

Eddy E

14/07/2015 09:51:37
Quote Anchor link
Je wilt 2 divs naast elkaar, die beide 100% breed zijn met een max-width van 1000px?
Dat gaat niet werken, want dat is 200% breedte...
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.