[Réglé] Pas d'alignement vertical

Bonjour,

J'ai un problème d'alignement vertical sur le site que je suis en train de refaire (http://f1results.info/v3) : dans la barre où il est écrit "PROCHAIN GP..." et dans le pied de page, vertical-align est en "bottom", mais tout est en haut ! Ca se voit bien sur le drapeau du Canada et dans le pied de page.

Voici les codes de ces parties :

- HTML barre du haut :

<div class="barre">
   <img src="pucemenu2.gif" width="5" height="3" border="0" /> PROCHAIN GP : <img src="<?php echo $file_drapeaux ?>/canada.gif" width="18" height="12" border="0" /> CANADA :  bla.
   <img src="pucemenu2.gif" width="5" height="3" border="0" />
   <form method="get" action="<?php echo $add_site ?>/recherche.php" id="rechercher" style="display:inline;">
      <input class="champ_recherche" id="recherche" name="recherche" value="Rechercher">
      <input class="bouton_recherche" type="submit" value="GO">
  </form>
</div>

- CSS classe "barre" :

.barre {
width:785px;
height:22px;
font-family:Verdana;
font-size:11px;
color:#222222;
font-weight:bold;
background-image:url(./image/menuhaut.gif);
vertical-align:bottom;
float:right;
text-align:right;
display:block;}

- HTML pied de page :

<div class="pied">
Les photos et textes publi&eacute;s sur ce site reste la propri&eacute;t&eacute; de leurs auteurs / Site cr&eacute;e par :
<a href="http://gof1.free.fr" title="Site de GoF1 : Formule 1">Otagun GoF1</a> &copy;
</div>

- CSS classe "pied" :

.pied {
height:22px;
background-image:url('images/menuhaut.gif');
background-color:#E0DFCD;
text-align:right;
font-family:Verdana;
font-size:10px;
vertical-align:bottom;}

Je ne vois pas d'où peut venir le problème... Et vous ?

Merci beaucoup de votre aide !!

@++
Modifié par Alomon (16 Jun 2006 - 12:16)

Bonsoir,
la propriété vertical-align ne s'applque qu'aux cellules de tableau et aux éléments de type en-lign (span, strong, a...)
Tu dois donc utiliser la propriété line-height (pour les espaces d'interlignage)
auquel tu dois appliquer la valeur de la hauteur de ton div pour que son contenu en-ligne soit verticalement centré:

.barre {
width:785px;
line-height:22px;
font-family:Verdana;
font-size:11px;
color:#222;
font-weight:bold;
background-image:url(./image/menuhaut.gif);
text-align:right;
}

Je ne suis pas sure que float:right serve a quelquechose et ton
display:block est inutile puisqu'un div est déja un élément de type bloc.
Modifié par Hermann (15 Jun 2006 - 23:54)

Bonsoir,

Avec ces modiications, j'obtiens quelque chose de pire : non seulement ce n'est toujours pas centré, mais en plus, il y a une nouvelle ligne de 22px qui s'est ajoutée en dessous de l'ancienne ; cette nouvelle ligne est vide et transparente, mais elle est présente... Cele se produit aussi bien au niveau de la barre du haut que du pied de page...

Une autre idée ?

Merci encore de votre aide !

@++

P.S. : je ne pourrais pas répondre ce soir, mais demain matin un peu avant 8h.

Ta ligne supplémentaire est due à un <br /> au dessous de ton div.barre dont l'effet était annulé par le float:right que j'ai supprimé.
Chez moi c'est aligné. Ceci dit ton image du Canada n'est pas tt à fait alignée. Tu dois ajouter :

.barre img {vertical-align: text-bottom}

Tu peux appliquer le vertical-align a tous les élément en-ligne de ton div.
En revanche la présence d'éléments en-ligne remplacés (img et input)
a pour effet d'annuler l'impact du line-height du bloc conteneur sur IE
et je ne sais pas si il y a un moyen de remédier à cela.
Modifié par Hermann (16 Jun 2006 - 15:57)

Pour ma part, chez moi cela semble aligné en bas, à part pour la drapeau, mais cela est peut être dût au fait que l'image en elle-même pose une marge de 2px en bas, non ?!

Ca y'est c'est impec ! Effectivement, il n'y avait que l'image qui n'était pas centrée en fait. De même, en dessous du pied de page, ce n'est pas une autre ligne de 22px, mais un saut de ligne avant la fin de la page, classique quoi... et normal donc .

Donc voilà, c'est réglé ! Merci beaucoup !!!

@++

a écrit :
mais cela est peut être dût au fait que l'image en elle-même pose une marge de 2px en bas, non ?!

Oui très juste