28221 sujets

CSS et mise en forme, CSS3

[résolu] CSS : alignement vertical dans un <div>

Bonjour à tous,

J'ai le menu suivant :
<div id="mainMenu1">
  <ul id="menuList1">
    <li><a class="actuator" href="#">Test Nav 1</a></li>
    <li><a class="actuator" href="#">Test Nav 2</a></li>
  </ul>
</div>


Au niveau du CSS :
#mainMenu1 {
  color: #000;
  margin: 0;
  padding: 0;
  z-index: 1;
  position: static;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 8pt;
 }

#menuList1 {
  margin: 0px;
  padding: 0px;
}


La calque mainMenu1 est placé à l'intérieur d'une case de tableau qui a pour hauteur 34px. Sur la case de tableau, il y a également une propriété css : vertical-align:middle

Mon problème c'est que dans Mozilla, les éléments de mon menu s'affichent bien au milieu (verticalement) de ma cellule. Par contre, dans IE, les éléments du menu s'affichent en HAUT de la cellule du tableau. Si je joue avec line-height ou encore avec les marges ou le padding, le problème est que la case de mon tableau s'étire en hauteur (je veux qu'elle garde une hauteur de 34px).

Qu'est ce que je dois faire pour corriger ces problèmes d'alignement?

merci de votre aide !

SuD
Modifié le 04 Jan 2005 - 00:13
le vertical-align ne s'appliquant que sur des éléments de type "inline", j'aurais plutôt tendance, avec tes explications, à dire que c'est Mozilla qui est dans l'erreur.
En fait, que je mette ou non le vertical-align, ça ne change rien au niveau de l'affichage dans les deux navigateurs, toujours le même problème Smiley decu
En fait si je joue avec les margin et padding de menuList1, j'arrive à positionner avec IE mais le problème c'est que ça déforme ma case du tableau où se trouve mon calque principal du menu.

J'ai ça

#menuList1 li {
  display: inline;
  list-style: none;
 }


Si je joue avec les margin et padding de cet élément, les marges/espaces verticaux ne changent pas...
Administrateur
Kevin a écrit :
Il faut préciser un line-height je crois

Pour les éléments en-ligne oui :
http://marcarea.com/weblog/index.php/2004/10/18/182-10AstucesCssCorrection
Source : http://evolt.org/article/rdf/17/60369/

Mais ici, il s'agit de centrer verticalement un <div> dans une cellule.
En théorie, vertical-align s'applique tout à fait, le problème doit donc venir d'ailleurs.

Sinon il reste une solution plus lourde : positionner la cellule en relatif et centrer le div à l'aide de position absolue + marges négatives.
Merci pour vos liens, j'ai essayé mais ça ne résoud pas mon problème. Si je met un line-height de 34px à ma cellule qui fait 34px de hauteur, la cellule devient alors quasiement deux fois plus haute... je ne comprend pas trop donc...

Une autre idée peut être?
Merci Raphael, je vais essayer avec position absolue + marges négatives. Je vous tiens au courant Smiley cligne c'est l'heure du miam Smiley langue
Administrateur
SuD_976 a écrit :
Merci à vous tous, j'ai réussi Smiley smile :):):) avec la position absolue

Parfait, dans ce cas, comme cela est indique dans les Règles, pourrais-tu éditer le titre de ton sujet et y rajouter un [Résolu] ? Cela aiderait toutes les futures recherches sur le forum.
Merci Smiley cligne
Sujet clos
Aller à