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.

[Invité]

Bonjour, regarde dans ton code :
Texte complet, cliquez ici&nbsp;</a><br />
Enlève ces 2 "bricoles" ...
(ce dernier <br /> n'est pas interprété de la meme manière sur les differents navigateur : sur l'un il fera un passage a la ligne, et pas sur un autre ...)

Nb: le centrage vertical de ta photo dépend du contenu de l'autre cellule.
Pour peu que tu aies plus de textes que prévu, la cellule va automatiquement s'allonger (en hauteur), malgré le width="100" de ta table.

Il serait donc préférable de mettre ta classe bgphoto dans un div :

Code :

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

1
2
3
4
5
6
7
8
9
10
<table style="width:540px; height:100px; padding:0; spacing:0;">
<tr>
<td style="width:100px; vertical-align:top;"><div class="bgPhoto"><a href="lien">$lien_photo</a></div></td>
<td style="width:17px; vertical-align:top;"></td>
<td style="width:423px; vertical-align:top;" class="gauche"><h3>titre</h3>textecouper
<span class="texteformaterDroit">
<a href="lien" class="menuDroit"><br />Texte complet, cliquez ici</a>
</span></td>
</tr>
</table>

avec une petite modif du CSS
(j'ai supposé que les images sont toutes : carré 80 x 80px)

Code :

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

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

A tester ...

[Alexandrebox]

Merci beaucoup.
Pour corriger le problème j'ai créé une petite fonction qui contrôle la longueur du texte à côté et qui le coupe si c'est trop long. Comme ça j'arrive à garder une bonne mise en page, vue que la cellule à droit décale la cellule à gauche.

Avec ce moyen, tout marche bien.

Mais il y a t-il un moyen de mettre une image à gauche et du texte à droite sans que l'image à gauche se décalle selon le texte?

Doit-on dans ce cas utiliser des <div>
Cette possibilité peut être vachement interessante. Garder l'image fixe même si le texte est long.

Pourriez-vous m'aider chers designers avec un exemple ?

Merci bcp

[Bisûnûrs]

Tu peux garder ton vertical-align sur ta cellule de gauche, mais il faut en plus de ça aligner verticalement ton fond, en rajoutant dans ton CSS :

Code :

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

background-position : center center;

[Alexandrebox]

Merci beaucoup à vous 2.
Je teste les deux possibilités et vous tiens au courant. Promis

[Alexandrebox]

Comme promis, j'ai essayé les 2 méthodes proposées.
- La méthode de Jreaux62 marche parfaitement sur tous les navigateurs.
voici le code modifié après suggestion de Jreaux62

Code :

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

1
2
3
4
5
6
7
8
9
<table width="540" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="100" valign="middle"><div class="bgPhoto"><a href="'.$lien.'">'.$lien_photo.'</a></div></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</a>
</span></td>
</tr>
</table>

La deuxième methode suggérée par Biensûre n'a malheureusement pas été très concluante pour IE8 Firefox 3.08 et Safari.

Je vous remercie tous les deux pour votre aide. Je vais mettre "résolu" à cette discussion