[CSS]*question float

[joelapieuvre]

Bonjour à tous j'essaye de me mettre au HTML/CSS pour l'instant je comprends pas trop mal mais j'ai un probleme : je fais un site pour m'entrainer en CSS/HTML Dans ce site j'ai besoin d'avoir des colonnes avec des hauteurs variables :

Ma question est assez simple : je donne aux colonnes une "hauteur : auto"pour que le contenu definisse la hauteur de ma colonne. je leur donne une propriété "float:left". pour quelles se suivent les unes apres les autres dans le flux. Mais par contre j'ai beau faire un clear float sur la premiere colonnes de ma 2eme ligne je ne comprends pas comment faire remonter les colonnes qui suivent selon la hauteur de la colonne du dessus...
quelqu'un peut m'éclairer ?

Merci
Joe

 

[westindies972]

Bonsoir

Il va falloir que tu utilise du javascript pour pouvoir organiser tes colonnes.
Il existe un plugin jQuery pour faire ça : jQuery Masonry

Tu peux également enlever "height:auto" sur tes bloc, par défaut leur hauteur correspond à leur contenu, ainsi que ton clear float sur le premier bloc de ta seconde ligne.

Bon courage et meilleurs voeux pour 2013

 

[joelapieuvre]

Bonsoir

Il va falloir que tu utilise du javascript pour pouvoir organiser tes colonnes.
Il existe un plugin jQuery pour faire ça : jQuery Masonry

Tu peux également enlever "height:auto" sur tes bloc, par défaut leur hauteur correspond à leur contenu, ainsi que ton clear float sur le premier bloc de ta seconde ligne.

Bon courage et meilleurs voeux pour 2013

Ok merci. Impossible de le faire en CSS donc ?

 

[westindies972]

Pour le faire uniquement en CSS, il faudrait que tu créé 4 colonnes de largeur égale (en float left) de manière à occuper toute la largeur de ton container, et d'ensuite ajouter tes blocs dans chacune des colonnes.

Ainsi donc dans la colonne 1 tu aurais les blocs 1 et 5, dans la colonne 2 les blocs 2 et 6, etc...

Il existe des framework CSS permettant de faire des mise en pages par colonnes, par exemple blueprint, qui permettent de mettre en place facilement les contenus en forme par colonne.

En revanche il faudra placer tes éléments à la main dans la bonne colonne, ce qui risque d'être plus difficile si tu utilises un moteur de gestion des contenus en PHP, alors qu'avec la mise en page javascript de Masonry le placement des blocs s'effectue automatiquement.

Bon courage

 

[joelapieuvre]

Pour le faire uniquement en CSS, il faudrait que tu créé 4 colonnes de largeur égale (en float left) de manière à occuper toute la largeur de ton container, et d'ensuite ajouter tes blocs dans chacune des colonnes.

Ainsi donc dans la colonne 1 tu aurais les blocs 1 et 5, dans la colonne 2 les blocs 2 et 6, etc...

Il existe des framework CSS permettant de faire des mise en pages par colonnes, par exemple blueprint, qui permettent de mettre en place facilement les contenus en forme par colonne.

En revanche il faudra placer tes éléments à la main dans la bonne colonne, ce qui risque d'être plus difficile si tu utilises un moteur de gestion des contenus en PHP, alors qu'avec la mise en page javascript de Masonry le placement des blocs s'effectue automatiquement.

Bon courage

Merci, j'ai utilisé masonry et ca fonctionne très bien, j'avais pensé au truc des 4 colonnes mais c'est igérable quand tu veux rajouter du contenu... En tout cas merci beaucoup pour ton aide et a+