Discussion :

[Him]

Bonjour,

j'essaye en vain de positionner un texte sur une image grâce aux CSS.
Cependant, je n'arrive pas à un résultat probant sous IE.

Firefox, pas de soucis, voici ce que cela donne :



Pour IE :



Voici le code utilisé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div width="100%">
						<div>
							<div style="float:right; text-align:center;">
								<br />&nbsp;<br /><a href="http://feeds.feedburner.com/e-commerce-inside" title="" rel="nofolow"><img src="rssbuzzinessman.jpg" alt="rss buzzinessman" /></a>
							</div>
							<div>
								<div style="position:relative;width:350px;overflow:hidden;background-color:Transparent">
									<br /><b>R&eacute;f&eacute;rencement de sites web e-commerce</b> avec le blog du Buzzinessman. 
									Tout savoir sur la <b>vente en ligne</b>, lancer un <b>commerce &eacute;lectronique</b>, trouver des clients potentiels<br />
									et cibl&eacute;s pour <b>vendre sur internet</b> d&egrave;s aujourd'hui.<br />
									<br />&nbsp; <big><b>&raquo;</b></big>&nbsp; <b>Des m&eacute;thodes simples...<br />
									&nbsp; <big><b>&raquo;</b></big>&nbsp; <b>Des outils concrets...<br />
									&nbsp; <big><b>&raquo;</b></big>&nbsp; pour vendre plus & mieux !</b><br />&nbsp;
								</div>
							</div>
						</div>
					</div>

Si l'un d'entre vous avait une petite idée pour m'aider à résoudre ce problème.
Je vous en remercie d'avance.

[Erwan31]

Le plus simple serait de placer ton image via un background CSS au niveau du div conteneur, de toute façon celle-ci est plus illustrative qu'autre chose.

[Bisûnûrs]

Apparemment ça serait une différence de gestion du position:relative. Si tu mets ton div en absolu à la place, ça passe.

@Erwan31 : C'aurait été une bonne solution, oui, mais malheureusement il a un lien sur l'image.

[Erwan31]

Oups en effet, je suis allé un peu vite en besogne.

@Him: Dans ce cas le plus simple est de passer par un positionnement absolue de l'image en prenant garde à ce que l'image passe sous le texte lorsqu'il est agrandi. Ajouter un fond au texte correspondant au fond bleu pour
éviter les problème de contraste du texte superposé à l'image.
Tu n'as pas besoin d'imbriquer ton image dans un div.
Quand tu balises, penses sémantique : quel sens a le contenu et quel est le balisage le plus pertinent qui en découle.
Choisir l'élément strong plutôt que b.

Donc essayes avec ça

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<a style="position:absolute; right:0" href="http://feeds.feedburner.com/e-commerce-inside" rel="nofolow"><img src="rssbuzzinessman.jpg" alt="rss buzzinessman - Action du lien" /></a>
 
<div style="position:relative;width:350px; z-index:2">
<p><span style="background: blue">R&eacute;f&eacute;rencement de sites web e-commerce</b> avec le blog du Buzzinessman. Tout savoir sur la <b>vente en ligne</b>, lancer un <b>commerce &eacute;lectronique</b>, trouver des clients potentiels<br />
et cibl&eacute;s pour <b>vendre sur internet</b> d&egrave;s aujourd'hui.</span></p>
<ul>
    <li>Des m&eacute;thodes simples...</li>
    <li>Des outils concrets...</li>
    <li>pour vendre plus & mieux !</li>
</ul>
</div>