Posez votre question Signaler

[CSS] Image décalé par rapport au texte [Résolu]

sonik21 1054Messages postés 17 novembre 2007Date d'inscription 11 décembre 2011Dernière intervention - Dernière réponse le 21 févr. 2010 à 10:28

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 :

#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 :)

[CSS] Image décalé par rapport au texte »

Suggestions

[CSS] Image décalé par rapport au texte
[CSS] superposer texte par apport a une image (Résolu) » Forum
Aligné une image a côté d'un texte (Résolu) » Forum
Image décalé par rapport au son » Forum
Son decalé par rapport à l'image sur mon ordi » Forum
Word - Redimensionner ou déplacer une image » Articles

Plus

Réponse

LelLex 1469Messages postés 18 février 2009Date d'inscription 11 février 2012Dernière intervention 21 févr. 2010 à 00:09

Ton TEXTE doit être dans une balise 

Ton CSS :

#topcol
{
	width: 100%;
	height: auto;
	background: #FFFFFF;
	clear: both;
}

#topcol p
{
	text-align: left;
	float: left;
}

Ajouter un commentaire

Réponse

sonik21 1054Messages postés 17 novembre 2007Date d'inscription 11 décembre 2011Dernière intervention 21 févr. 2010 à 00:23

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 ...

Ajouter un commentaire - Site web

Réponse

LelLex 1469Messages postés 18 février 2009Date d'inscription 11 février 2012Dernière intervention 21 févr. 2010 à 00:32

Tu as bien mit ton TEXTE entre les balises comme ça :

<p>TEXTE</p>

Ajouter un commentaire

Réponse

math 2000 2031Messages postés 9 septembre 2007Date d'inscription 10 mai 2012Dernière intervention 21 févr. 2010 à 00:53

tu met un id au texte et ensuite tu met la meme position top et left
au texte et à l'image

Ajouter un commentaire - Site web

Réponse

sonik21 1054Messages postés 17 novembre 2007Date d'inscription 11 décembre 2011Dernière intervention 21 févr. 2010 à 01:24

@LelLex oui, j'ai bien mis mon texte à l'intérieur du bloc ...
@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 ...

Ajouter un commentaire - Site web

Réponse

notobe 1454Messages postés 11 novembre 2009Date d'inscription 8 juillet 2011Dernière intervention 21 févr. 2010 à 09:54

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>

Ajouter un commentaire

Réponse

sonik21 1054Messages postés 17 novembre 2007Date d'inscription 11 décembre 2011Dernière intervention 21 févr. 2010 à 10:28

Merci notobe, effectivement ça fonctionne bien comme ça :)

Ajouter un commentaire - Site web

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

[CSS] Image décalé par rapport au texte [Résolu]

[CSS] Image décalé par rapport au texte »

Passage au tout numérique : quel coût pour les particuliers ?