Floats: twee elementen naast elkaar met een tussenruimte

[Verwijderd]

Ik vraag me al een tijdje af of het volgende op een eenvoudige manier in CSS mogelijk is.

Stel, ik heb een kolom met een bepaalde breedte (een sidebar bijvoorbeeld). Binnen deze kolom plaats ik een in principe willekeurig aantal elementen van een vaste breedte, waarvan er steeds twee naast elkaar dienen te verschijnen. De som van de breedtes van deze elementen is kleiner dan de breedte van mijn kolom en ik wil dan ook dat het eerste element helemaal links staat, het tweede helemaal rechts, het derde helemaal links, enzovoort.

Ik wil dus het volgende bereiken:



Welnu, de voor de hand liggende oplossing om een serie elementen naast elkaar te krijgen is het toepassen van een eenvoudige float: left. Dit levert uiteraard het volgende op:



Wat ik me dus afvraag is hoe ik het voor elkaar krijg dat de oneven elementen helemaal links in de kolom staan, terwijl de even elementen helemaal rechts staan. Ik kan niet zomaar een margin-right of margin-left op alle elementen zetten, want dan blijft er ongewenste tussenruimte over aan de linker- danwel rechterkant. Wat ik vaak gedaan heb is een class "odd" toevoegen aan alle oneven elementen en deze apart voorzien van een margin-right, maar dat is niet altijd mogelijk. Ik ben dus eigenlijk op zoek naar een universele oplossing waarbij ik geen aparte classes hoef toe te kennen aan de even of oneven elementen.

Kan dit?

[Afvalzak]

Kan je daar geen padding-right:**px; neerzetten? (In de odd div)

Ow laat maar, ik had de laatste zin niet goed gelezen.

Als je echt niet wilt dat je div left (en div right) hebt dan weet ik het niet,.

[ Voor 68% gewijzigd door Afvalzak op 26-07-2010 16:31 . Reden: Foutje! ]

[Verwijderd]

Dat kan wel, maar dan moet ik dus alsnog een extra class "odd" toevoegen. Dat is juist hetgene wat ik wil vermijden.

[Amras]

Margin lijkt me een betere optie, toch?

[PeterSelie]

Een margin-left is wat dat betreft mooier, aangezien je niet de inhoud, maar de div zelf van spacing wil voorzien. Eventueel zou je dit mooi met Javascript kunnen doen, en enkel op een oneven element een margin toe kunnen voegen.

Mocht je reeds gebruik maken van het jQuery framework in je site, kan je hiervoor de :odd selector gebruiken.

[ Voor 56% gewijzigd door PeterSelie op 26-07-2010 16:33 ]

[Stimpy001]

Kort samengevat: je wilt aan de ene kant geen verschil maken in de blokjes (aparte class o.i.d.) en aan de andere kant wil je wel in sommige gevallen een afwijkende lay-out. Lijkt mij een beetje te botsen dit idee....

In mijn ogen eigenlijk een oplossing proberen te zoeken voor een probleem wat er eigenlijk niet is. Of was het puur een vraag uit interesse of om mensen bezig te houden

[ Voor 27% gewijzigd door Stimpy001 op 26-07-2010 16:39 ]

[marrk]

Stimpy001 schreef op maandag 26 juli 2010 @ 16:34:
Kort samengevat: je wilt aan de ene kant geen verschil maken in de blokjes (aparte class o.i.d.) en aan de andere kant wil je wel in sommige gevallen een afwijkende lay-out. Lijkt mij een beetje te botsen dit idee....

In mijn ogen eigenlijk een oplossing proberen te zoeken voor een probleem wat er eigenlijk niet is. Of was het puur een vraag uit interesse of om mensen bezig te houden

In CSS3 gaat het kunnen met :alternate of :nth-child pseudo classes. Volgens mij is het in CSS2 niet mogelijk.

[Amras]

marrk schreef op maandag 26 juli 2010 @ 16:48:
[...]

In CSS3 gaat het kunnen met :alternate of :nth-child pseudo classes. Volgens mij is het in CSS2 niet mogelijk.

Met jQuery zou je dit voor elkaar kunnen krijgen, al krijgen ze dan pas de margin als het document volledige is geladen (dus kans dat je dingen ziet verspringen).

[Verwijderd]

Stimpy001 schreef op maandag 26 juli 2010 @ 16:34:
In mijn ogen eigenlijk een oplossing proberen te zoeken voor een probleem wat er eigenlijk niet is. Of was het puur een vraag uit interesse of om mensen bezig te houden

Het probleem is er wel, want ik heb er op dit moment mee te maken. Als ik aparte classes toe wil kennen zou ik in moeten grijpen in de core van een ander systeem (in dit geval Wordpress), wat natuurlijk geen aantrekkelijke optie is.

In CSS3 gaat het kunnen met :alternate of :nth-child pseudo classes. Volgens mij is het in CSS2 niet mogelijk.

Jammer, daar was ik al bang voor. Laat ik eens even gaan kijken naar de huidige status van de ondersteuning voor die pseudoclasses.

Met jQuery zou je dit voor elkaar kunnen krijgen, al krijgen ze dan pas de margin als het document volledige is geladen (dus kans dat je dingen ziet verspringen).

Over het algemeen ben ik niet zo'n fan van het op deze manier toepassen van Javascript, maar als het de enige mogelijkheid blijkt te zijn is het misschien wel een aardig idee.

[pieturp]

Volgens mij (maar ik las een beetje vluchtig) heb je dit nodig.

[marrk]

Verwijderd schreef op maandag 26 juli 2010 @ 16:54:
[...]
Over het algemeen ben ik niet zo'n fan van het op deze manier toepassen van Javascript, maar als het de enige mogelijkheid blijkt te zijn is het misschien wel een aardig idee.

Niet om het een of ander, maar je geeft niet heel veel informatie over wat voor pagina het betreft. Maar is niet misschien makkelijker om dit buiten javascript te houden? Je verplicht de bezoekers van die site dan wel om een 100k jquery library te downloaden, voor iets wat eigenlijk geen moeite kost om in de html source mee te nemen.

[pieturp]

Even offtopic:

marrk schreef op maandag 26 juli 2010 @ 17:05:
[...]
Je verplicht de bezoekers van die site dan wel om een 100k jquery library te downloaden[...]

Als je gebruik maakt van een CDN, heb je dat probleem in geval van jQuery iig niet; zoveel sites die dezelfde source gebruiken, dikke kans dat jouw client 'm al in z'n cache heeft staan

Bovendien is jQuery 1.4.2 minified maar 24.1KB en niet 100KB. Scheelt behoorlijk en jij hoeft die XBrowser XMLHttpRequest code niet in je eigen code op te nemen

[Verwijderd]

pieturp schreef op maandag 26 juli 2010 @ 17:04:
Volgens mij (maar ik las een beetje vluchtig) heb je dit nodig.

Ziet er goed uit, ga ik naar kijken!

Ik denk dat ik er inmiddels wel uit ga komen. Iedereen bedankt voor de input

[marrk]

pieturp schreef op maandag 26 juli 2010 @ 17:16:
Even offtopic:


[...]


Als je gebruik maakt van een CDN, heb je dat probleem in geval van jQuery iig niet; zoveel sites die dezelfde source gebruiken, dikke kans dat jouw client 'm al in z'n cache heeft staan

Bovendien is jQuery 1.4.2 minified maar 24.1KB en niet 100KB. Scheelt behoorlijk en jij hoeft die XBrowser XMLHttpRequest code niet in je eigen code op te nemen

Ah true, dat valt wel mee. Maar toch maar toch, het gaat wel een beetje ten koste van de elegantie van een website en het toevoegen van jQuery lijkt me nu toch een beetje een overkill.

[pieturp]

marrk schreef op maandag 26 juli 2010 @ 17:50:
[...]

Ah true, dat valt wel mee. Maar toch maar toch, het gaat wel een beetje ten koste van de elegantie van een website en het toevoegen van jQuery lijkt me nu toch een beetje een overkill.

Is ook zo. Ik reageerde echter meer op de 100KB

[Verwijderd]

Ben ik het ook mee eens. Nu is het in dit specifieke geval zo dat jQuery toch al geladen wordt, maar voor dit soort lay-out dingetjes is het niet bepaald de mooiste oplossing.

Ik heb het probleem inmiddels naar tevredenheid opgelost met de "adaptive float fixing" techniek

[Verwijderd]

Kan je niet zo oplossen:

HTML:

<style type="text/css">
div.column {
  width:150px;
}

div.left {
  float:left;
  clear:left;
}

div.right {
  float:right;
}
</style>

<div class="column">
  <div class="left"></div>
  <div class="right"></div>

  <div class="left"></div>
  <div class="right"></div>

  <div class="left"></div>
  <div class="right"></div>
</div>

Also, als je echt niet wilt dat de boel gaat verspringen tijdens het laden (mocht je kiezen voor de JS oplossing m.b.v. jQuery) kan je altijd nog de volgende code toevoegen:

HTML:

<body style="display:none" onload="this.style.display = 'block';">
<!-- Site content -->
</body>

Dit zorgt ervoor dat de site verborgen blijft totdat alles is geladen.

[ Voor 0% gewijzigd door Verwijderd op 27-07-2010 14:10 . Reden: Foutje bedankt. ]

[samo]

Kan je niet met inline-block en margins werken? Volgens mij ben je dan redelijk snel compleet?

[Croga]

.

[ Voor 99% gewijzigd door Croga op 27-07-2010 08:09 . Reden: onzin post, het gaat helemaal niet over kolommen ;) ]

[wackmaniac]

Verwijderd schreef op maandag 26 juli 2010 @ 21:00:

....

Also, als je echt niet wilt dat de boel gaat verspringen tijdens het laden (mocht je kiezen voor de JS oplossing m.b.v. jQuery) kan je altijd nog de volgende code toevoegen:

HTML:

<body style="display:none" onload="this.style.display = 'none';">
<!-- Site content -->
</body>

Dit zorgt ervoor dat de site verborgen blijft totdat alles is geladen.

En als ik nou zonder JS surf ... dan zie ik niets; zullen je klanten blij mee zijn, die van mij iig niet.

[ Voor 24% gewijzigd door wackmaniac op 27-07-2010 10:13 ]

[Verwijderd]

wackmaniac schreef op dinsdag 27 juli 2010 @ 10:12:
[...]


En als ik nou zonder JS surf ... dan zie ik niets; zullen je klanten blij mee zijn, die van mij iig niet.

Precies. Vandaar dat ik ook altijd structuur, (HTML), opmaak (CSS) en scripting (JS) gescheiden houd, zoals het hoort

[Arjen Tempel]

Maak je kolom iets breder (2x (breedte element + tussenruimte)) zodat je alle elementen gewoon dezelfde margin-right kunt geven, en knip die extra ruimte vervolgens weg met CSS clip:

Cascading Stylesheet:

#outer {
  width: 260px;
  position: absolute;
  clip: rect(0px, 250px, 2000px, 0px);  
}
.floater {
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 10px;
  margin-bottom: 10px;
}

Vooorbeeld: http://www.csbtempel.nl/got/float-left-right.htm

Enige nadeel: je outer div (waar je de clip op toepast) moet absoluut gepositioneerd zijn, waardoor die geen ruimte opeist binnen je layout, maar dat is (vooral bij een sidebar) meestal wel op te lossen.

De onderzijde van de clip kun je net zo hoog kiezen als je wil, zonder dat hierdoor de div meegroeit.

[Verwijderd]

Dat is ook een interessante oplossing, alleen is het inderdaad jammer van de position: absolute;. Ik onthou hem, maar voor nu blijf ik bij de "adaptive float fixing".