[CSS] Centrer un contenu de balise verticalement ?...

[cedric_g]

Bonjour

Je rencontre un petit soucis dans le cadre de la transformation de mon "vilain" site orienté "tableaux" en CSS.

J'ai bossé sur le script de mes galeries photo et j'ai pour cela utilisé des balises UL et LI (listes).

Mon code CSS :

Code: Tout sélectionner

/* Conteneur galeries photo
********************************************/

div#galerie-container {
   width: 670px;
   text-align:center;
   margin: 0px auto
}


/* Galerie photo avec commentaires
********************************************/

ul#galerie-comm    {
   float:left
}

ul#galerie-comm, ul#galerie-comm li {
   list-style:none;
   margin:0;
   padding:0
}

ul#galerie-comm li {
   float:left;
   display:inline;
   margin: 0 0 15px 20px;
   width:145px;
   text-align:center
}

ul#galerie-comm img {
   display:block;
   width:120px;
   height:92px;
   border:0px solid;
   margin:0 auto 5px
}

ul#galerie-comm a {
   display:block;
   padding: 5px 0;
   height:145px;
   background: #ffffff;
   color: #666666;
   border:1px dotted #ffffff;
   text-decoration: none
}

ul#galerie-comm a:hover {
   border-color:#999999
}


et voici le code HTML généré par mon script (j'ai raccourci !) :

Code: Tout sélectionner

<div id="galerie-container">
<ul id="galerie-comm">

<li><a href="photo-1973-219-1.php">
<img src="photos/v_1973.jpg" alt="Lynx d'Europe <c>" >Lynx d'Europe &lt;c&gt;</a></li>

<li><a href="photo-1978-219-1.php">
<img src="photos/v_1978.jpg" alt="Contre-jour <c>" >Contre-jour &lt;c&gt;</a></li>

</ul>
</div>


Mon soucis : certains descriptifs (le texte sous chaque photo) peuvent faire 2 voire 3 lignes, du coup j'ai du fixer une hauteur de "cellule" dans le CSS de la balise <A> assez grande pour éviter que chaque élément de liste ne parte en c.. (sinon les cellules de ma galerie étaient comme éparses avec des trous au milieu !)

Inconvénient : lorsqu'il n'y a qu'une ligne de descriptif, la marge du bas est grande et c'est "moche"


Bon dans l'absolu ça me dérange pas plus que ça, mais j'aime bien les choses propres.


Exemple ici : -http://www.aube-nature.com/voyage_lynx_bayerischer_wald_2005.php


(edit : supprimé le second problème, car je suis un gros boulet avec de la m... dans les yeux ; le premier reste d'actualité !)



Si qqu'un peut éclairer ma lanterne sur ce point ?...

[linkadress]

Salut, tu peux peut etre forcer les tailles min et max d'un div :

Code: Tout sélectionner

width: 300px;
min-height: 200px;
max-height: 200px;
height: 200px;

[netsys]

http://www.google.fr/search?hl=fr&lr=&q ... rtical+css

[SIBELIUS]

http://www.google.fr/search?hl=fr&lr=&q=+site:forum.alsacreations.com+alignement+vertical+css

Hi hi
Plus simplement, la FAQ :
http://forum.alsacreations.com/faq/#item3

[yazerty]

Il y a aussi ça, je ne sais pas si ça intéressera :

http://www.jakpsatweb.cz/css/css-vertic ... ution.html

[cedric_g]

Merci

J'ai la contrainte d'utiliser des listes (et "normalement" on ne doit pas mettre des balises de conteneurs dans des balises en lignes... Je n'utilise pas de "DIV" dans mon code)

Bon pour le moment c'est pas gravissime.

[SIBELIUS]

J'ai la contrainte d'utiliser des listes (et "normalement" on ne doit pas mettre des balises de conteneurs dans des balises en lignes... Je n'utilise pas de "DIV" dans mon code)

Liste ou <div>, le comportement reste le même (il s'agit d'éléments de type "bloc"), seule la fonction est différente