disposer une image à gauche d'un text

**renard9** · 21/03/2010, 19h03

Bonjour,

J'essaye désespérément de mettre une image à gauche de mon texte et cela ne marche toujours pas (alors que cela semble très simple....)

En CSS :

Code css :

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

1
2
3
4
5
6
7
8
9
10
 
span {
	font-size:11px;	
	font-weight: normal; 
	color:#666666;
}
span.iconAddress {
	float: left;
	background-image: url('http://www.votrecoop.org/images/mailto.gif'); 
}

en html :

Code html :

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

1
2
3
4
 
<span id='iconAddress'>
    Mon adresse mail
</span>

Avez vous une idée pour que cela fonctionne en CSS (j'ai toujours le moyen de le faire en html) ?

Merci pour votre aide
http://www.votrecoop.org/

**12monkeys** · 21/03/2010, 21h21

Bonsoir

Le point représente une classe et non un id, pour celui ci c'est le caractère dièse #

Donc c'est plutôt

Code :

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

span#iconAddress {

Ensuite tu mets l'image en arrière plan donc le float n'aura aucun effet sur elle. Dans ton cas il faut imbriquer 2 éléments pour pouvoir mettre un padding gauche sur le second :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr-FR">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
span {
	font-size:11px;
	font-weight: normal; 
	color:#666666;
}
div#iconAddress {
	background: url('sendover.jpg') no-repeat; 
} 
div#iconAddress span {
	margin-left:80px;
}
 
</style>
</head>
 
<body>
 
<div id='iconAddress'>
  <span>
    Mon adresse mail
  </span>
</div>
 
 
</body>
</html>

**renard9** · 21/03/2010, 23h20

Merci pour cette réponse qui m'a fait avancer vers la solution (enfin je crois)

Dans la réponse, l'image s'affichait toujours à gauche. j'ai donc modifié en réalisant ceci :

CSS :

Code :

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

1
2
3
4
5
6
div#iconAddress span.test{
	background: url('http://www.votrecoop.org/images/mailto.gif') no-repeat; 
}
div#iconAddress span.txt{
	margin-left: 20px; 
}

html :

Code :

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

1
2
3
4
5
6
7
8
<div id='iconAddress'>
   <span class='test'
      zut
   </span>
   <span class='txt'>
      mon texte
   </span>
</div>

Malheureusement, il faut que je mette le zut pour que l'image s'affiche...

Voyez vous comment enlever le zut et que l'image s'affiche ?

Merci d'avance

**12monkeys** · 22/03/2010, 20h03

Bonsoir

Tu peux garder mon exemple en rajoutant juste la position de l'image d'arrière plan :

Code :

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

1
2
3
div#iconAddress {
	background: url('sendover.jpg') no-repeat right;
}

Attention cependant il faut déterminer une taille au div sinon il prendra toute la taille disponible...

**renard9** · 23/03/2010, 21h12

Et voilou

Code :

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

1
2
3
4
5
6
 
   <div id='iconAddress'>
      <span class='mail'>
           adresse mail
      </span>
   </div>

et le style

Code :

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

1
2
3
4
5
 
div#iconAddress span.mail{
   background: url('http://www.votrecoop.org/images/mailto.gif') no-repeat;
   padding-left: 20px;  
}

Merci pour ton aide (j'ai vraiment été à 2 doigts de mettre une image)

disposer une image à gauche d'un text

CSS

Vue hybride

Discussions similaires

Partager

Partager