pb de positionnement image/texte avec FF, Safari et Chrome
Le
Spot
Bonjour,
Je place des images et des textes les unes à cotés des autres. Le texte
est à droite de l'image. Pour les images 1, 2,4 c'est nickel mais pour
la 3 le texte se place dessous. je sèche Si quelqu'un peut me dire ce
qui cloche. Merci d'avance.
Olivier
Le code :
<span style="left: 0px; top: 0px; position: absolute;"><img
src="images/press_cle_actua.png" alt="press_cle_actua.png, 28kB"
title="Press cle actua" border="0" height="126" width="100"
style="float:left; margin-right:5px;">
<span class="txtrougebold">Les Clés de <br>
l’Actualité </span> <br>
<span class="txtblancbold">Milan Presse </span> <br>
<span class="txtblancbold">Lire </span> <br>
</span>
<span style="left: 210px; top: 0px; position: absolute;"><img
src="images/press_wakou.png" alt="press_wakou.png, 33kB" title="Press
wakou" border="0" height="126" width="100" style="float: left;
margin-right:5px;">
<span class="txtrougebold">Wakou</span> <br>
<span class="txtblancbold">Milan Presse</span><br>
<span class="txtblancbold">Lire </span>
</span>
<span style="left: 400px; top: 0px; position: absolute;"><img
src="images/press_julie.png" alt="press_julie.png, 33kB" title="Press
julie" border="0" width="100" style="float: left; margin-right:5px;">
<span class="txtrougebold">Julie</span> <br>
<span class="txtblancbold">Milan Presse</span><br>
<span class="txtblancbold">Lire </span>
</span>
<span style="left: 600px; top: 0px; position: absolute;"><img
src="images/press_tout2loose.png" alt="press_tout2loose.png, 33kB"
title="Press tout2loose" border="0" height="126" width="138"
style="float: left; margin-right:5px;">
<span class="txtrougebold">Tout Toulouse</span> <br>
<span class="txtblancbold">Midi Libre/ </span> <br>
<span class="txtblancbold">Le Monde </span> <br>
<span class="txtblancbold">Lire </span>
</span>
Je place des images et des textes les unes à cotés des autres. Le texte
est à droite de l'image. Pour les images 1, 2,4 c'est nickel mais pour
la 3 le texte se place dessous. je sèche Si quelqu'un peut me dire ce
qui cloche. Merci d'avance.
Olivier
Le code :
<span style="left: 0px; top: 0px; position: absolute;"><img
src="images/press_cle_actua.png" alt="press_cle_actua.png, 28kB"
title="Press cle actua" border="0" height="126" width="100"
style="float:left; margin-right:5px;">
<span class="txtrougebold">Les Clés de <br>
l’Actualité </span> <br>
<span class="txtblancbold">Milan Presse </span> <br>
<span class="txtblancbold">Lire </span> <br>
</span>
<span style="left: 210px; top: 0px; position: absolute;"><img
src="images/press_wakou.png" alt="press_wakou.png, 33kB" title="Press
wakou" border="0" height="126" width="100" style="float: left;
margin-right:5px;">
<span class="txtrougebold">Wakou</span> <br>
<span class="txtblancbold">Milan Presse</span><br>
<span class="txtblancbold">Lire </span>
</span>
<span style="left: 400px; top: 0px; position: absolute;"><img
src="images/press_julie.png" alt="press_julie.png, 33kB" title="Press
julie" border="0" width="100" style="float: left; margin-right:5px;">
<span class="txtrougebold">Julie</span> <br>
<span class="txtblancbold">Milan Presse</span><br>
<span class="txtblancbold">Lire </span>
</span>
<span style="left: 600px; top: 0px; position: absolute;"><img
src="images/press_tout2loose.png" alt="press_tout2loose.png, 33kB"
title="Press tout2loose" border="0" height="126" width="138"
style="float: left; margin-right:5px;">
<span class="txtrougebold">Tout Toulouse</span> <br>
<span class="txtblancbold">Midi Libre/ </span> <br>
<span class="txtblancbold">Le Monde </span> <br>
<span class="txtblancbold">Lire </span>
</span>
Poser une question
Dans l'image 3, la height="126" n'est pas mentionnée contrairement aux 3
autres images. Peut-être est-ce la raison ?
--
A+
Romer
Non, je viens de corriger et cela ne change rien.. ??
t'as pas une url plutot?
avec une url on aurait pu voir ce phénomène curieux
Le alt des images ne sert pas à y remettre le nom du fichier d'image
mais à proposer un *texte de remplacement*
en adéquation avec ce que *représente l'image*
pour les mal-voyants ou navigateurs sans image.
Et si on ne veut pas de bulle-info sur l'image on rajoute un title vide.
J'ussions utilisé :
<dl class="spot">
<dd>Les clés de<br>Milan Press<br>Lire...
</dl>
Avec :
.spot { float: left; width: 22%; margin: 0 1%; position: relative }
.spot img { border: none; width: 50%}
.spot dd, .spot dt { margin: 0; padding: 0; top: 0;}
.spot dd { position: absolute; right: 0; width: 45%; font-size: 10px}
Savoir ce que fait 'txtrougebold' ?
et s'il y a assez de place en largeur pour ce 3ième span en question
--
sm
Merci, j'étais absent. Je regarde cela ce soir et reviens vous tenir au
courant.
Bonne journée,
Olivier