28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous.

Voici mon problème : j'utilise les colonnes en CSS3 pour afficher les li d'une liste html. J'arrive à ce que je désire niveau visuel, seulement, mes li s'affiche par colonnes. Normal me direz-vous, mais je souhaiterais les afficher par lignes. C'est-à-dire qu'actuellement, par exemple, mes 10 premiers li sont dans la colonne 1, puis les 10 autres sur la colonne 2, etc.

Ce que je voudrais, ce serait que mes plutôt que mes 4 premiers li soient sur la première ligne, mes 4 suivants sur la seconde ligne, etc..

Y a-t-il moyen de faire ceci ?

Merci d'avance de votre aide Smiley smile
Bien sûr, ne pas utiliser les colonnes mais un bon vieux float: left, avec un conteneur de largeur fixe.

Et ça marche sur IE7 Smiley lol

Je pense que tu n'es pas familier avec l'univers de la mise en page : ce que tu souhaites enlever est justement l'intérêt principal des colonnes.

Bonne continuation !
Et bien tu as donné ta réponse : en effet ce que tu souhaites faire relève de l'impossible en css, masonry - et isotope, sa version complète - ont été créés pour ça !

Et à l'évidence, si une solution css compatible et légère existait, personne ne se serait embêté à créer un plugin Jquery..

Je suppose qu'en plus tes blocs seront dynamiques ? Dans le cas contraire, un bon vieux tableau ferait l'affaire, malheureusement.
Bon trop longtemps que je me traînais ce problème. Je me suis codé mon propre plug-in jQuery qui me permet d'afficher mes listes sous formes de colonnes, de gérer le resize window, et d'ajouter très (et je dis bien TRES) simplement des items à ma liste (et donc à mes colonnes). Mon fichier JS utilisant masonry auparavant est passé de plus de 400 lignes de codes à seulement 200 et quelques.. Finis les reload de masonry et autres lourderies à chaque fois qu'on ajoute du contenu à notre liste.

Encore une fois, rien de tel qu'un bon script maison.

Pour info, je n'ai utilisé aucune propriété css3 et mon plug-in jQuery ne fait même pas 200 lignes. Et par dessus tout, C'EST LEGER !! Je suis heureux d'avoir enfin trouvé une solution légère à mon problème, et assez largement compatible (puisque que je n'ai pas utilisé de css3).

Donc pour ceux qui auraient besoin de la même chose, c'est possible Smiley cligne

Merci pour votre aide et à bientôt Smiley smile
Modifié par yeste64 (13 Nov 2012 - 09:41)