Liquid layout met gecentreerde DIV en float:left elements

[chieldeno]

Het lijkt zo simpel, maar toch kom ik er niet uit...

Ik heb een website met dynamische verhoudingen. Op mijn pagina met fotoportfolio krijg ik op mijn scherm 6 thumbnails naast elkaar. Bij een kleiner scherm worden dit er 5, of 4, of 3 etc.
Zie de volgende afbeelding: http://www.denooyer.nl/layout-site.jpg
De grijze menubalk bovenaan heeft 100% width.

De rode 'container' heeft 90% width. Ik wil mijn thumbnails graag recht onder elkaar, dus heb ze een float left gegeven. Op die manier staan er nooit 5 thumbnails onder een rij met 6 thumbnails, wat er niet uit ziet bij gecentreerde inhoud.

Maar nu staat het geheel aan thumbnails weer niet gecentreerd op de pagina... Althans, totdat er weer net genoeg ruimte is voor een nieuwe thumbnail rechts van rij 1.

Er zou zeg maar een DIV om de blauwe elements heen moeten staan die altijd een variabele width heeft, dus meegroeit met de elements, zodat ik die DIV kan centreren. Op die manier zou de groene afstand A altijd gelijk moeten zijn aan elkaar.

Het is wat moeilijk uit te leggen maar ik hoop dat iemand het snapt...
Hoe krijg ik dit voor elkaar?

Mijn css ziet er nu zo uit:

Cascading Stylesheet:

.ngg-galleryoverview {
    width:90%;
    display:block !important;
    margin-left:auto;
    margin-right:auto;
    border-style:dashed;
    border-width:2px;
    border-color:red;
}

.ngg-gallery-thumbnail-box {
    float:left;
    width:210 px;
    height:226 px;
    margin:0px 20px 0px 20px;
    border-style:solid;
    border-width:2px;
    border-color:blue;
    padding:1px 0px 1px 0px;    
}

[ Voor 2% gewijzigd door NMe op 06-01-2012 14:29 ]

[Spinal]

Als je een div om alle blauwe elementen heen zet met

code:

margin: 0 auto;

is het dan niet opgelost? (evt. overflow:hidden?)
Niet getest, maar dat laat ik aan jou over

[chieldeno]

Weet niet of ik het goed doe, maar ik krijg dan gewoon dit: http://www.denooyer.nl/layout-site2.jpg
Een div (zwart kader) die precies in de andere div valt (rood kader).

Dit is m'n CSS:

Cascading Stylesheet:

.ngg-galleryoverview {
    width:90%;
    display:block !important;
    margin-left:auto;
    margin-right:auto;
    border-style:dashed;
    border-width:2px;
    border-color:red;
}

.ngg-container {
    margin: 0 auto;
    border-style:dashed;
    border-width:2px;
    border-color:black;
}

.ngg-gallery-thumbnail-box {
    float:left;
    width:210 px;
    height:226 px;
    margin:0px 20px 0px 20px;
    border-style:solid;
    border-width:2px;
    border-color:blue;
    padding:1px 0px 1px 0px;    
}

Dit is de PHP:

PHP:

<div class="ngg-galleryoverview">
    <div class="ngg-container">
        <div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box"<?php echo $image->style ?>>
            <div class="ngg-gallery-thumbnail" >
            </div>
        </div>
    </div>
</div>

[ Voor 75% gewijzigd door NMe op 06-01-2012 14:30 ]

[DeEindbaas]

ZanderZ schreef op donderdag 05 januari 2012 @ 21:45:
Als je een div om alle blauwe elementen heen zet met

code:

margin: 0 auto;

is het dan niet opgelost? (evt. overflow:hidden?)
Niet getest, maar dat laat ik aan jou over

Als je een

code:

margin 0 auto;

gebruikt moet je altijd een width meegeven...

[chieldeno]

Is de conslusie dan eigenlijk; wat ik wil is niet mogelijk?

Ik snap dat float:left nogal tegenstrijdig is met gecentreerde content. Maar ik dacht, een DIV eromheen die altijd horizontaal gecentreerd op de pagina staat.. klaar. Maar als die DIV dus per se een breedtemaat moet hebben, hetzij in pixels of procenten, lukt het nooit?

[DeEindbaas]

chieldeno schreef op vrijdag 06 januari 2012 @ 12:55:
Is de conslusie dan eigenlijk; wat ik wil is niet mogelijk?

Ik snap dat float:left nogal tegenstrijdig is met gecentreerde content. Maar ik dacht, een DIV eromheen die altijd horizontaal gecentreerd op de pagina staat.. klaar. Maar als die DIV dus per se een breedtemaat moet hebben, hetzij in pixels of procenten, lukt het nooit?

Je zou het met jQuery kunnen doen. Je laat elke berekenen hoe breed de div is die om de boxen heen staat en die voegt de width toe aan de div.

[RM-rf]

display: inline-block; gebruiken en text-align: center;

je wilt namelijk helemaal niet 'floaten', maar deze elementen juist in de text-flow zich als een blocklevel element laten gedragen.

[ Voor 49% gewijzigd door RM-rf op 06-01-2012 13:13 ]

[DeEindbaas]

RM-rf schreef op vrijdag 06 januari 2012 @ 13:12:
display: inline-block; gebruiken en text-align: center;

je wilt namelijk helemaal niet 'floaten', maar deze elementen juist in de text-flow zich als een blocklevel element laten gedragen.

Nee dat werkt voor de TS ook niet.

Je 6 items komen dan wel netjes gecenterd op de pagina maar de 5 eronder lijnen links dan niet uit met de eerste van de rij van 6.

[chieldeno]

Dreamwire schreef op vrijdag 06 januari 2012 @ 13:15:
[...]


Nee dat werkt voor de TS ook niet.

Je 6 items komen dan wel netjes gecenterd op de pagina maar de 5 eronder lijnen links dan niet uit met de eerste van de rij van 6.

Precies, dan krijg ik dit: http://www.denooyer.nl/layout-site3.jpg

Lelijk!

Ik weet dat meer mensen tegen dit probleem aanlopen, heb heel Google afgezocht... nergens een oplossing gevonden.

[ Voor 13% gewijzigd door chieldeno op 06-01-2012 13:19 ]

[RM-rf]

Dreamwire schreef op vrijdag 06 januari 2012 @ 13:15:
[...]


Nee dat werkt voor de TS ook niet.

Je 6 items komen dan wel netjes gecenterd op de pagina maar de 5 eronder lijnen links dan niet uit met de eerste van de rij van 6.

in dat geval kan het een optie zijn om van de ":nth-last-child(even)" pseudoclass gebruik te maken, welke dan een laatste 'leeg' item enkel als hij bv een even getal is een display:hidden geeft en dus een extra element 'simuleert'...


hooguit weet ik niet of IE9 dit ondersteund (ie8 niet).. angezien het verder enkel een visueel iets is zou ik me daarover verder niet al te druk maken of opteren om daarvoor bv een js-oplossing te gebruiken

[chieldeno]

in dat geval kan het een optie zijn om van de ":nth-last-child(even)" pseudoclass gebruik te maken, welke dan een laatste 'leeg' item enkel als hij bv een even getal is een display:hidden geeft en dus een extra element 'simuleert'...


hooguit weet ik niet of IE9 dit ondersteund (ie8 niet).. angezien het verder enkel een visueel iets is zou ik me daarover verder niet al te druk maken of opteren om daarvoor bv een js-oplossing te gebruiken

nth-last-child(even) wordt niet ondersteund in IE. Geen optie dus helaas. Het mag dan 'enkel een visueel iets' zijn, wat mij betreft maakt of breekt het de pagina.

Misschien is er geen mooie oplossing voor en moet ik een gecentreerde website met liquid layout gewoon niet willen? Ik heb alleen zo'n hekel aan content die tegen de linker rand van je scherm zit geplakt, zoals de NS website...

[Gideonnn]

Dreamwire schreef op vrijdag 06 januari 2012 @ 13:15:
[...]


Nee dat werkt voor de TS ook niet.

Je 6 items komen dan wel netjes gecenterd op de pagina maar de 5 eronder lijnen links dan niet uit met de eerste van de rij van 6.

Als je de text-align:center; en float:left; weg haalt en gewoon display:inline-block gebruikt zoals RM-rf zegt. Dan krijg je niet dat hij ze centert en wel netjes onder elkaar. Je kan binnen de rode div nog een div maken die je margin: 0 auto; meegeeft, heb je ze nog netjes in het midden.

[OkkE]

Hier komt in CSS3 een oplossing voor in de vorm van flexbox. Met de huidige CSS mogelijkheden is het niet mogelijk en zal je dus, wanneer het echt een probleem is, met Javascript aan de slag moeten.

Een andere oplossing kan zijn, elk blok een width in percentages te geven (met een duidelijk visueel blok) en aan de hand van Media Queries te zorgen dat op bepaalde breaking points die waarde(s) wijzigen, zodat er niet (te veel) witruimte ontstaat. Helaas is ook dat niet echt IE-proof.

Eigenlijk komt het er in het kort op neer: wat je wil is (zonder JS) niet cross-browser te bouwen.

[RM-rf]

chieldeno schreef op vrijdag 06 januari 2012 @ 13:52:
[...]


nth-last-child(even) wordt niet ondersteund in IE. Geen optie dus helaas. Het mag dan 'enkel een visueel iets' zijn, wat mij betreft maakt of breekt het de pagina.

IE ondersteund wel de proprietaire "expression()" CSS value -defintie die het bv mogelijk maakt om een bepaalde waarde toe te passen gebaseerd op een javascript als-conditie (dus bv een DOM controle op 'last child en het aantal childelementen in de parent)

bovendien kun je dit gewoon wel laten ondersteunen als je gebruik maakt van IE7.js, welke via een extra script die ondersteuning levert..
natuurlijk is het van belang om backwards ondersteuning te blijvene leveren, maar het is onzin daarin verder veel tijd te gaan steken en je ontwerp zelf terug te schroeven enkel omdat oudere browsers dus gebrekkig default ondersteuning bieden....
op de lange termijn beperkt je dan, en de problemen die je nu besteed aan backwards problemen wordt ook juist duurder uitgaande van en continue ontwikkeling waarin oudere browsers steeds meer invloed hebben

[chieldeno]

@ Gideonnn: nee, dat levert zeker niet op wat ik voor ogen had...

@ OkkE: die Flexbox lijkt een mooie oplossing, maar helaas nog niet beschikbaar dus. Bovendien is dan de vraag in hoeverre de browsers dat meteen ondersteunen?
Javascript.. ben er geen groot fan van om dit soort essentiële layoutkeuzes aan javascript over te laten geloof ik. Ook geen idee hoe dat zou moeten!

Ben bang dat ik deze layout maar eens uit m'n hoofd moet gaan zetten...

[OkkE]

chieldeno schreef op vrijdag 06 januari 2012 @ 14:12:
@ Gideonnn: nee, dat levert zeker niet op wat ik voor ogen had...

@ OkkE: die Flexbox lijkt een mooie oplossing, maar helaas nog niet beschikbaar dus. Bovendien is dan de vraag in hoeverre de browsers dat meteen ondersteunen?
Javascript.. ben er geen groot fan van om dit soort essentiële layoutkeuzes aan javascript over te laten geloof ik. Ook geen idee hoe dat zou moeten!

Ben bang dat ik deze layout maar eens uit m'n hoofd moet gaan zetten...

Sommige dingen zijn gewoon (helaas) nog niet mogelijk met HTML/CSS. Maar het hangt heel erg van je specifieke ontwerp af (en je smaak, ongetwijfeld ); ik vind het niet per defenitie lelijk dat het niet pixel-precies uitvult en ik vind het gebruikersgemak van een fluid layout (vaak) belangrijker dan of het wel of niet pixel-precies uitvult.

[chieldeno]

Sommige dingen zijn gewoon (helaas) nog niet mogelijk met HTML/CSS. Maar het hangt heel erg van je specifieke ontwerp af (en je smaak, ongetwijfeld ); ik vind het niet per defenitie lelijk dat het niet pixel-precies uitvult en ik vind het gebruikersgemak van een fluid layout (vaak) belangrijker dan of het wel of niet pixel-precies uitvult.

Ben ik gedeeltelijk met je eens, maar ik ben (helaas) een pixel-perfectionist. Zal wel iets met m'n werk te maken hebben...

Maar ik vind het vooral dom staan als er 1 zo'n lullig plaatje nog onder zweeft:

[NMe]

Hoe post je code? / Hoe gebruik je de code tag?

Doe je dat de volgende keer zelf?

[OkkE]

chieldeno schreef op vrijdag 06 januari 2012 @ 14:27:
Ben ik gedeeltelijk met je eens, maar ik ben (helaas) een pixel-perfectionist. Zal wel iets met m'n werk te maken hebben...

Als je pixel-perfectionist bent zal je het nog zwaar krijgen met webdesign de komende tijd.

Ik vind dit bijvoorbeeld best een aardige oplossing: http://jsfiddle.net/pJFun/4/show/ (en de code).

[chieldeno]

Ik wist niet dat we tegenwoordig verplicht zijn om de code tag te gebruiken, maar bedankt voor het aanpassen...

@ OkkE: dat is in feite exact hetzelfde als ik nu heb, thumbs left float maar het geheel is niet gecentreerd. Ik vind dat geen gezicht met een website die verder wel overal mooi gecentreerd is. Is niet erg consistent.

[Verwijderd]

Off-topic: ik vind je site nu mooier dan de ontwerpen die je hier laat zien. En erg mooie foto's maak je trouwens.

[NMe]

chieldeno schreef op vrijdag 06 januari 2012 @ 14:50:
Ik wist niet dat we tegenwoordig verplicht zijn om de code tag te gebruiken, maar bedankt voor het aanpassen...

Jij wil dat mensen je code lezen en begrijpen, dus is het ook aan jou om te zorgen dat die code leesbaar is.

[chieldeno]

@ Nyce: Het ontwerp was nog niet af, ik wilde eerst weten of het wel kon met die thumbnails... niet dus
Eigenlijk wilde ik de site wat indrukwekkender maken, vandaar de hele breedte van het browserscherm benutten. Maar bedankt voor je compliment.

@NMe: Je hebt gelijk. Ik was niet op de hoogte van die tag, volgende keer ga ik het gebruiken