[CSS] Image décalé par rapport au texte
Résolu
Bonjour,
J'ai un problème en CSS, j'ai un texte, en face duquel est affiché une image, qui a pour propriété float: right;
Sous Firefox, aucun soucis, l'image s'affiche en face du texte : http://screensnapr.com/u/k42xnz.png
Mais sous IE, l'image s'affiche bien en face du texte, mais une ligne en dessous : http://screensnapr.com/u/u4og43.png
Mon CSS :
Et le HTML :
Merci d'avance pour votre aide :)
--
It's Hard to concentrate, but if it can Make you feel better ...(?)
J'ai un problème en CSS, j'ai un texte, en face duquel est affiché une image, qui a pour propriété float: right;
Sous Firefox, aucun soucis, l'image s'affiche en face du texte : http://screensnapr.com/u/k42xnz.png
Mais sous IE, l'image s'affiche bien en face du texte, mais une ligne en dessous : http://screensnapr.com/u/u4og43.png
Mon CSS :
#topcol{
width: 100%;
height: auto;
background: #FFFFFF;
text-align: left;
}
#topcol img{
float: right;
}
Et le HTML :
<div id="topcol"> Texte <a href="#"> <img src="design/img/mailbox.png" alt="MP" title="Messagerie privée"> </a> </div>
Merci d'avance pour votre aide :)
--
It's Hard to concentrate, but if it can Make you feel better ...(?)
Configuration: Microsoft Windows XP Pro / Ubuntu 9.10 Pentium Dual Core 2.50GHz RAM 3GO Dual Screen
7 réponses
-
Ton TEXTE doit être dans une balise <p></p>
Ton CSS :#topcol { width: 100%; height: auto; background: #FFFFFF; clear: both; } #topcol p { text-align: left; float: left; } -
Merci de ta réponse LelLex, mais pour le coup, avec ce CSS, je n'ai plus rien du tout, ni sur Firefox, ni sur IE ...
-
Tu as bien mit ton TEXTE entre les balises <p></p> comme ça :
<p>TEXTE</p>
-
tu met un id au texte et ensuite tu met la meme position top et left
au texte et à l'image -
@LelLex oui, j'ai bien mis mon texte à l'intérieur du bloc <p> ...
@math 2000 je ne vois pas trop ce que tu veux dire, si je leur met la même position, ils se trouveront au même endroit ... -
L'élément flottant doit être placé en premier dans le flux. Il faut donc mettre le texte après l'image.
<div id="topcol"> <p><a href="#"> <img src="design/img/mailbox.png" alt="MP" title="Messagerie privée"> </a></p> <p>Texte</p> </div>
-
Merci notobe, effectivement ça fonctionne bien comme ça :)
