28172 sujets

CSS et mise en forme, CSS3

Yop les gens ! Smiley smile

Mon frère m'a posé une colle.

http://01.dev-iis3.computerland.be/FIH/Actualite/Documents-Communiques.aspx

Voilà ce sur quoi il est en train de travailler et, comme vous le verrez, il y a une série d'<articles> qui sont floatés côte à côte et la hauteur d'un élément floaté à gauche influence le positionnement de certains blocs et crée des blancs.

J'ai cherché pas mal de solutions et suis arrivé à des trucs sympas, mais pas tout à fait à ce que chaque bloc suive directement, sans espacement supplémentaire, celui qui est au-dessus de lui.

J'ai tenté des clear après les float, ça fonctionne mais pas parfaitement, il reste que la hauteur du bloc de gauche ou de droite définit le départ du bloc suivant ...

L'inline-block ne fonctionne pas mieux Smiley smile

Une idée de génie ? Smiley smile
Modifié par Ohmygoodweb (17 Feb 2014 - 13:41)
En séparant ça en 2 colonnes y aura plus de problème mais ça semble un peu pas trop cohérent par rapport au flux d'info où il y a une alternance gauche-droite des news Smiley smile
Yes ça on est bien d'accords Smiley smile juste un prob qu'il va falloir faire 2 queries pour ça mais bon c'est pas la mort, je voulais juste savoir si on pouvait s'en sortir en pur css Smiley smile ou presque ^^
En pur CSS en alternant les float left et right sur les articles ( et en magouillant au pixel xD )
( Tu peux voir le comportement que cela fait les gauche droite si tu met 310 par exemple au lieu de 304 )

http://jsfiddle.net/WUVc4/

edit : apres c'est peut etre du bol aussi ^^
edit 2 : non en fait c'est du gros bol en déplaçant un peu ça bug facilement en fait ..
Modifié par mathieu1004 (17 Feb 2014 - 14:52)
Ahah : )

Même avec les colonnes c'est pas top : imaginons qu'on passe en responsive et que tout revienne l'un sous l'autre ... là c'est le drame, mes queries qui filtrent 1 sur 2, elles l'ont dans l'pet (huguette) ^^