Discussion :

[blinkseb]

Bonjour à tous,

Alors voilà mon problème, j'ai une liste d'image à afficher avec une légende, et j'aimerais qu'une fois le bord droit atteint, la liste reprenne toute seule en dessous.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div class="serendipity_imageComment_left" style="width: 230px;">
<div class="serendipity_imageComment_img"><a href="/blog/uploads/live5.JPG"><img width="220" height="165" style="border: 0px none ; padding: 0px 5px 5px; float: left;" src="/blog/uploads/live5.miniature.JPG" alt="" /></a></div><div class="serendipity_imageComment_txt">Nous tous !</div>
</div>

et le style css associé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right {
    border: 1px solid #DDDDDD;
    background-color: #EFEFEF;
    margin: 3px;
    padding: 3px;
}
 
.serendipity_imageComment_center {
    margin: auto;
}
 
.serendipity_imageComment_left {
    float: left;
}
 
.serendipity_imageComment_right {
    float: right;
}
 
.serendipity_imageComment_img,
.serendipity_imageComment_img img {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
 
.serendipity_imageComment_txt {
    border-top: 1px solid #DDDDDD;
    margin: 0px;
    padding: 3px;
    clear: both;
    font-size: 8pt;
    text-align: justify;
    text-indent: 0px;
}

Alors ça marche très bien jusqu'à la première ligne. Ensuite, comme les images n'ont pas toutes la même hauteurs, lors du passage à la ligne les images se mette n'importe où ! J'ai mis une pièce jointe pour voir la situation.

Donc sauriez comment faire pour que les images se remette toute seul où il faut ? pour le moment je met un <p style="clear: both;"></p> entre chaque ligne mais je ne l'ai connait pas à l'avance, et c'est pas pratique comme système...

Merci d'avance!
Seb

[francis m]

Pourquoi ne pas forcer toutes les images à la même hauteur ?

Autre solution : tu fais une boucle pour connaître la taille de l'image la plus haute (en php par exemple) et tu assignes cette hauteur comme height à ton bloc serendipity

[blinkseb]

En fait les deux solutions ne sont pas réalisable. En fait j'upload les images sur le serveur et il créé tout seul les miniatures, la taille il se débrouille.
Sinon j'ajoute une image à mon billet via un editeur WYSIWYG (fckeditor) donc il ajoute l'utilisateur ajoute image par image, ce qu'il fait qu'il est impossible de prévoir la taille de la plus grande image à l'avance.

Mais je me doutais bien que les images devaient avoir la même hauteur pour que ça marche, tant pis je vais garder ma solution actuelle !

Merci bien

[francis m]

oui mais même si les miniatures sont créées toutes seules et que tu ne connais pas la taille, tu peux quand-même forcer la taille de l'image en html, exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="image.gif" width="88" height="60" alt="hauteur60pixels" />

[blinkseb]

Pas bête j'y ai même pas pensé Juste uen dernière question j'ai pas envie de regarder (flême lol) si j'indique juste "height" est ce que les proportions sont conservées pour "width" ?

En tout cas merci !

[francis m]

oui si tu indiques juste height les proportions sont maintenues