Discussion :

[Alexandrebox]

Bonsoirs chers designers,

Voici mon problème (néophyte de design)
J'ai fait une table :
1 ligne
2 colonne
Dans la première colonne j'ai une photo que j'aimerais centrer verticalement, parce que en dessous se trouve une image de fond comme un cadre.

voici ce que j'ai fait qui marche avec (Safari et Opera)
Mais chez IE8 et Firefox, la photo n'est pas centrer verticalement
J'ai même ajouter des span autour pour faire en plus un css vertical-align mais rien à faire Aidez-moi SVP

Voici mon code

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<table width="540" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="100" class="bgPhoto" valign="middle"><a href="lien"><span class="alnignerVertical">lien_photo</span></a></td>
<td width="17" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td width="423" valign="top" class="gauche"><h3>titre</h3>textecouper
<span class="texteformaterDroit">
<a href="lien" class="menuDroit"><br />Texte complet, cliquez ici&nbsp;</a><br />
</span></td>
</tr>
</table>

Voici le css

Code :

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

1
2
3
.alnignerVertical {
vertical-align:middle;
	}

D'avance je vous remercie beaucoup

[Bisûnûrs]

Mettre un vertical-align sur un élément qui est tout seul, ça ne sert à rien. Il faut que tu le mette dans ce cas-là sur ton td.

[Alexandrebox]

Bonjour,

Merci pour ta réponse. J'ai fait ce que tu m'as dit voici les codes. Mais le résultat est le même dans IE et Fireox

Css

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.bgPhoto 
{
   background-image: url(../img/fond_photo.gif);
   background-repeat: no-repeat;
   width: 100px;
   height: 100px;
   text-align: center;
   vertical-align:middle; 
}

Dans la page

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<table width="540" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="100" class="bgPhoto" valign="middle"><a href="lien">$lien_photo</a></td>
<td width="17" valign="top"></td>
<td width="423" valign="top" class="gauche"><h3>titre</h3>textecouper
<span class="texteformaterDroit">
<a href="lien" class="menuDroit"><br />Texte complet, cliquez ici&nbsp;</a><br />
</span></td>
</tr>
</table>

Merci d'avance de ton aide. J'espère que tu me donneras un exemple avec mon code, car je ne sais pas ce qui cloche.

[Bisûnûrs]

Ben écoute, avec le code que tu nous montres, je n'ai aucun problème sur Firefox :

[Alexandrebox]

Y a t-il SVP à votre avis un moyen pour éviter ce problème? parce que moi aussi bien sur IE8 et Firefox3.08 j'ai ce problème d'affichage comme vous pouvez le voir sur cette image.

[Bisûnûrs]

Affiche les bordures de ton tableau, ta colonne de droite descend certainement plus bas que tu ne le penses.