Titre: CSS : Liste d'images, rangées selon taille
Posté par: fefe11 le le 03-11-2011 a 16:48:21
Bonjour,
Je suis en train de bloquer sur un truc tout con je pense :
???
En fait je dois faire une liste horizontale dont le contenu est généré dynamiquement.
Ce contenu sera composé d'images en majorité mais aussi un peu de texte.
Certaines images prendront toute la hauteur de la liste (disons 100px)
mais d'autres non.
J'aimerais que si deux images font par exemple 50px chacune, elles se mettent l'une en dessous de l'autre, pour pas me retrouver avec des espaces vides.
Une liste horizontale avec certains éléments verticaux...
j'ai fait plusieurs tests avec du float left, block etc, sans y arriver.
Si quelqu'un peut m'indiquer une piste pour arriver a ce résultat... si possible full CSS, ça m’embêterait de caler du js juste pour ça.
Merci de m'avoir lu et éventuellement de m'aider :)
Bonné journée :) |
Titre: Re:CSS : Liste d'images, rangées selon taille
Posté par: MarvinLeRouge le le 04-11-2011 a 09:01:12
Salut,
Ton explication semble indiquer une structure de liste imbriquée : tu n'as pas une liste d'images, mais une liste de tailles avec chacune n images. Et avec une liste imbriquée, ça devrait passer tout seul en css : le premier niveau avec les items côte à côte, le second avec les items un sous l'autre. |
Titre: Re:CSS : Liste d'images, rangées selon taille
Posté par: fefe11 le le 04-11-2011 a 12:13:28
Salut,
merci pour ta piste, ça aurait pu être intéressant mais trop compliqué a gérer pour un truc automatique.
Je pense que j'ai trouvé un bon moyen :
Une seule liste, verticale, avec une hauteur fixe et largeur 100%,
qui part en colonne dès que ça dépasse du bord, donc les objets qui rentrent se mettent forcement l'un en dessous et ceux qui prennent tout passent a coté et ainsi de suite...
J'aurais dû y penser plus tôt !
Merci quand même ;) |
Titre: Re:CSS : Liste d'images, rangées selon taille
Posté par: fefe11 le le 04-11-2011 a 13:51:16
Argh !
En fait c'est pas aussi facile que prévu !
Je met un ptit schéma au cas ou quelqu'un a la solution miracle !
J'aimerais arriver a ce résultat : (double lettre = hauteur max, un seul élément)
A B D E G
A C D F G
Mais après tout les tests possibles et imaginables j'arrive seulement à ce résultat :
A B C D E
F G H I .....
FUUUUUUUUUU |
Titre: Re:CSS : Liste d'images, rangées selon taille
Posté par: fefe11 le le 04-11-2011 a 14:06:21
8) 8)
;D
Bon, je poste la solution au cas ou quelqu'un se pose la question un jour :
Code:
<html>
<head>
<style>
ul.liste{
width:200px;
height:100px;
background:#ccc;
-moz-column-count: 5;
-moz-column-gap: 5px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
ul.liste li {
width : 33px;
height : 34px;
}
ul.liste li.a{
height : 68px;
}
.liste li {
background:#000;
border: 1px solid #000;
float:left;
display:block;
text-align:center;
}
.liste a {color:red;}
</style>
</head>
<body>
<ul class="liste">
<li class="a"><a height="100" href="#">A</a></li>
<li><a href="#" class="a">B</a></li>
<li><a href="#">C</a></li>
<li class="a"><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
</ul></body>
</html> |
|
|
Titre: Re:CSS : Liste d'images, rangées selon taille
Posté par: MarvinLeRouge le le 05-11-2011 a 11:07:12
Ça fait bien du multi-colonnage, mais je ne vois pas en quoi ça répartit les images de même largeur dans les mêmes colonnes.
N.B. : Grouper les images par largeur n'a rien de difficile en php : une boucle, un getimagesize, et c'est réglé. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|