Problème d'alignement de vignettes et légendes

Bonjour à tous,

Je souhaite organiser l'affichage des vignettes en tableau dans cette page : (toto.css dispo' si on enregistre la page)
http://www.s161221050.onlinehome.fr/page_de_test.html

- le but : afficher seulement 3 vignettes par ligne, en les alignant correctement,
- et ce, dans toutes les résolutions d'écran.

...mais problème : je n'ai pas de retour à la ligne pour certaines vignettes (Fig 13 et 17 notamment) dû à la longueur 'variable' de mes légendes (de 1 à 4 lignes, au maximum = 255 caractères) qui provoque un 'décalage'.

Pouvez-vous m'aider ou m'orienter (mais sémantiquement, les vignettes sont une liste et pas un tableau !) afin de trouver une solution adaptée pour aligner correctement mes vignettes ?

D'avance merci.

A bientôt !
Modifié par Cap_Finisterre (07 Oct 2008 - 19:47)

bonsoir ,

Une solution a base de display:inline-block;(+ vertical-align et en déplacant la règle float ) est peut-être envisageable si les filtres css ne vous rebutent pas trop pour cibler en particulier dans cette exemple : IE6/7 , lteff2 , ff3 .

Je n'avais pas réagit avant car les versions de Firefox avant la 3 poser un probleme , je ne connaissais pas l'existence d'un filtre css permettant de coutourner ou de proposer une alternative a une incompatibilité .

Et voici que je découvre qu'un moyen de filtrer en css les différentes versions importantes de Firefox existent.

Du coup , voici une page test , qui reprend celle de Cap_finisterre (+ un peu de blabla et css modifié) : http://gcyrillus.free.fr/essai/page_de_test-vignette.html , voir en bas de page , avant j'y raconte un peu ma vie (heu non , j'essaie d'expliquer) ...
et quelques commentaires dans le css de la page (dans head) .

Bien entendu , sans , inline-block dans FF2 et inf , impossible d'aligner tout le monde , mais ailleurs , cela semble fonctionné :
tester dans IE6/7 , safari & chrome , opera , ff3
ne change rien au probleme dans ff2 .

Ou j'ai trouvé les filtres pour FirefoxS : http://cssmaster.wordpress.com/category/css-hack/

Au dela du probleme de Cap_Finisterre , je suis aussi assez curieux de ce que les 'rompus' au règles CSS en pensent ... de ces filtre css pour Firefox

++

<edit>
pour les listes: par exemples :

<ul>
<li>
<div>
<h2><img /><h2>
<p>légende</p>
</div>
</li>
...
</ul> 

Modifié par gcyrillus (09 Oct 2008 - 00:56)

Bonjour,

Un grand merci pour cette réponse de Gcyrillus cependant pouvez-vous m'expliquer cette ligne :

ul > /**/li.image {
display:inline-block;/* pas pour IE7 , syntaxe : html >/**/ body {regles} */
}

... elle rend apparemment dingue la console JavaScript de FireFox !

Merci

A bientôt.

Bonjour/Bonsoir ,

ul >li.image {display:inline-block;} /* IE7 comprend cette syntaxe */
ul > /**/li.image {} /* en inserant un commentaire vide aprés le selecteur , IE 7 n'interprete plus cette regle */

Cette façon de faire , n'est effectivement pas propre .

Il est preferable de faire usage des commentaires conditionnels pour IE et de placer dans une feuilles a part les correctifs ou alternative pour ce navigateur .

Idem pour firefox , Il serait aussi preferable de placer ces filtres dans un autre fichier , ce cas de figure semble assez rare et merite aussi d'etre traité clairement a part.

reprenons en partie l'exemple test en rangeant les differents correctifs dans des fichiers distincts.
dans l'entete de la page ...

<link rel="stylesheet" href="page_de_test_fichiers/toto.css" type="text/css" />
<link rel="stylesheet" href="page_de_test_fichiers/totoFF.css" type="text/css" />
 <!--[ if IE]>
<link rel="stylesheet" href="page_de_test_fichiers/totoIE.css" type="text/css" />
<![ endif]--> 

indiquer :

/* FEUILLE CSS PRINCIPALE  toto.css

Correctifs ou Filtres associés :
IE : totoIE.css 
FF<3 et FF>3 : totoFF.css
*/

li.image {
display:inline-block;
...
}

Pour IE

/* 
CSS INTERNET EXPLORER
Correctifs ou Filtres : totoIE.css 

feuille css principale :  toto.css
*/

li.image {
display:inline;
zoom:1;
}

Pour Les versions de firefox :

/* 
CSS FIREFOX
Correctifs ou Filtres : totoFF.css 

feuille css principale :  toto.css
*/

li.image, x:-moz-any-link {display:inline;} /* interpreté par FIREFOX */
table.image, x:-moz-any-link {width:30%;} 

li.image, x:-moz-any-link, x:default {display:inline-block;} /* interpreté par FIREFOX 3*/
table.image, x:-moz-any-link, x:default {width:100%;} 

Bon , maintenant , si il n'y avait pas besoin de gérer ce probleme de valeur en pourcentage , les filtres pour Firefox n'ont plus de raison d'être , seul les commentaires pour IE sont a garder.
et le css principal deviendrait , (par souci de comptabilité même si ce n'est pas le top) :

li.image {
display:inline; /* alternative ff2 et inf*/
display:inline-block;/* FF3 et les autres , sauf  lte IE7 */
}

J'espere t'avoir eclairé .

A ceux qui lisent ce topic et qui ont des petits soucis de difference entre FF2 et FF3 , ne vous jetez pas sur ce filtre avant de vous être assuré que vous ne pouvez réellement pas faire autrement , des fois on se complique la vie malgré soi : un exemple qui peut arriver a tout le monde :
http://forum.alsacreations.com/topic-4-37570-1-Resolu-Input-text-difference-entre-Firefox2-et-Firefox3.html

GC