Custom made divs speciale styles meegeven

[Wary87]

Ik zit met een situatie die vaak terugkomt en ik eigenlijk geen echte goede oplossing voor heb gevonden. Ik zal het proberen uit te leggen.

Als ik in een kolom via een CMS bepaalde divs genereer die allemaal hetzelfde zijn wil ik graag dat bijvoorbeeld bij drie divs op een rij in een kolom dat de 2e en 3e een border-left, margin-left of een background-image hebben. Een oplossing is natuurlijk div:first-child niet de css meegeven en de divs in het algemeen wel.

Een probleem ontstaat nu wel dat wanneer er nog meer divs aangemaakt worden de rij eronder niet meer klopt. Nu los ik het vaak op door een restrictie te geven aan de hoeveelheid divs of het onder elkaar te laten opvullen zonder float.

Toch blijft het knagen en vraag ik me af of er geen betere manier is om dit op te lossen zonder CSS3 pseudo-classes te gebruiken zoals :nt-child want die worden slecht ondersteund door oudere browsers. Is er een manier om aan posts (in Wordpress in dit geval) een telling mee te geven aan posts via een if zodat er een count op staat en de 4e, 7e div etc steeds een speciale class mee krijgt? Of een CSS/HTML only oplossing zou helemaal mooi zijn.

[Bosmonster]

Een probleem ontstaat nu wel dat wanneer er nog meer divs aangemaakt worden de rij eronder niet meer klopt.

Deze zin snap ik even niet. Hoe zie je html structuur eruit dat first-child niet afdoende is?

[Wary87]

Even een voorbeeld: Stel ik heb een kolom van 940px in de kolom wil ik floatende divs plaatsen die 200xp breed zijn en een margin-left hebben van 20px. De eerste div geef ik margin: 0 mee door div:first-child. Dit gaat goed zolang het op 1 rij in de kolom past. Wanneer de 4e verschijnt zal de eerste op de rij eronder toch de margin-left meekrijgen omdat deze niet meer wordt gezien als een first-child. Hier zoek ik een oplossing voor zonder steeds een nieuwe row>col te starten.

[alex3305]

Zo te zien wil je gewoon een class opnieuw uitwerken, want is dat in dit geval geen optie?

[Wary87]

Het via een class oplossen zou mooi zijn. Ik vraag me alleen af in welke hoek ik moet kijken (tutorial of goed artikel) als ik het via PHP voor elkaar wil krijgen want ik neem aan dat dit via een PHP code gaat die de hoeveelheid divs telt en op elke 4e div, 7e div etc een class zet.

JS en de CSS3 selector nth:child krijgen kunnen gebruikt worden maar dan vecht je weer tegen browser compatibility en een gewone CSS oplossing buiten de margin links en rechts gelijk verdelen kan ik niet bedenken.

[R4gnax]

Als je een evenredig gespreid aantal tiles in een multi-line grid wilt opzetten, kijk dans eens naar de combinatie van inline-block elementen en justified text.

[Barryvdh]

Je kan in Wordpress toch de loop aanpassen in je theme? Daar kan je met php gewoon een extra class geven lijkt me. (Zoiets? http://stackoverflow.com/...rdpress-loop-post-counter of wat andere hacks http://wp.smashingmagazin...ful-wordpress-loop-hacks/)

[ZpAz]

Is het niet een geval van nth-child? Werkt enkel niet op IE8 en lager.

Wat ik dan doe is er voor zorgen dat elke 'x-ste' item een extra class meekrijgt ofzo (serverside), zodat het in ieder geval een oplossing is die nog in IE7/8 werkt.

[ Voor 12% gewijzigd door ZpAz op 24-11-2012 17:22 ]

[Wary87]

Ik zal even kijken of de loop aanpassen goed werkt. Ik heb al wat zitten snijden en plakken in de loop speciaal voor de post pagina om er een query op te zetten en een numerieke paginering.

Display: inline-block is idd goed voor het opzetten van de divs (hetzelfde effect als floats) maar de text-justify heb ik in mijn situatie niet veel aan

nth-child is een hele goede :pseudo-class voor deze situatie maar het klopt inderdaad dat deze voor oudere versies van IE (en andere browsers buiten the big five) niet werkt. Met het oog op toegankelijkheid probeer ik JavaScript en CSS3 zo veel mogelijk te vermijden omdat er nog ontzettend veel mensen zijn; die te laks zijn om hun browser te updaten of het zelfs vertikken om een JS/Flash plugin te downloaden (denk aan doelgroepen zoals ouderen). Gelukkig beginnen steeds meer mensen over te stappen van IE naar Chrome.

Via PHP elke x-ste item een extra class meegeven zou ik wel een goede oplossing vinden.

[Barryvdh]

Er is geen javascript plugin die mensen moeten downloaden he. En als je jQuery gebruikt is het ook gewoon IE6+ compatible.
Maar php is inderdaad het makkelijkste en werkt altijd.

[Wary87]

Het is niet echt een plugin maar niet elke computer gebruikt standaard JS dan moet je toch wat bij downloaden. Ik test zelf websites vaak met de FireFox Webdevelopertools plugin waarbij is dan JS uitzet en dan kijk of de website nog goed te gebruiken is.

Een stukje van google over SEO vriendelijke websites en black hat SEO:

"Remember that many human visitors using screen readers, mobile browsers, browsers without plug-ins, and slow connections will not be able to view that content either and will benefit from the descriptive text as well. You can test your site’s accessibility by turning off JavaScript, Flash, and images in your browser, or by using a text-only browser such as Lynx."

Bron: http://support.google.com...wer.py?hl=en&answer=66353

Vandaar dat ik juist naar een oplossing zoek in de vorm van CSS(geen3)/HTML/PHP. Morgen ga ik weer verder met een sandbox website waarin ik even met de loop ga experimenteren. Anders maar op zoek naar een PHP scriptje die een telling bijhoud.

[TERW_DAN]

Wary87 schreef op zaterdag 24 november 2012 @ 18:08:
Het is niet echt een plugin maar niet elke computer gebruikt standaard JS dan moet je toch wat bij downloaden.

Nee, daar hoef je echt niets voor te downloaden. JS wordt ondersteund in iedere* browser, en hoewel je het uit kunt zetten zie je dat weinig gebeuren, tenzij dat om heel specifieke redenen is. Imho iets waar je je niet al te druk over moet maken.

* er zal vast een uitzondering te vinden zijn, maar dat zal dan zo'n klein percentage van de mensen zijn die dat ding überhaupt gebruikt dat ik me daar niet druk om zou maken.

[Wary87]

Het is me deels gelukt om een PHP counter in de wordpress template te verwerken. De code die ik gebruikt heb is:

$style_classes = array('first','second','third');
$styles_count = count($style_classes);
$style_index = 0;

Voordat de loop begint.

In de loop heb ik deze code verwerkt:
<div class="<?php $k = $style_index % $styles_count; echo "$style_classes[$k]"; $style_index++; ?>">
<?php get_template_part( 'content', get_post_format() ); ?>
</div>

Er wordt nu een div omheen gezet die netjes tot 3 telt en dan reset. Maar ik wil liever dat die div wordt aangemaakt in content.php. Ik heb nog geen oplossing gevonden om de code in de loop en in content.php en om de code los van elkaar te gebruiken; variabelen in blog.php (custom post page) en de div class generatie in de content.php zodat je niet met een div in een div werkt.

Bedankt voor het meedenken iig die tutorials hebben mij erg geholpen.