Mettre un texte dans une image

**novice100** · 28/10/2010, 09h26

Bonjour,
Je souhaite mettre du texte dans une image de fond, mais cela ne fonctionne pas. Le texte se trouve en dessous de l'image, et non pas dedans comme je le souhaite.

Voici mes codes HTML:

Code :

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

1
2
3
4
5
6
7
8
<div id="sidemain2">
   <div class="imagedossier">
   <img src="test_rose.gif" width="250" height="200" border="0" >
   </div>
   <div class="textedossier">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula.
   </div>
   </div>

Et voici mon CSS:

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
#sidemain2 {
	float: left;
	height: 160px;
	width: 48%;
	color:#036;
	text-align:center;
	background-repeat: no-repeat;
	background-position: center;
	margin : 2px;
	padding: 2px; 
	border: 1px solid #090;
}
.imagedossier {
	position: relative;
	z-index:1;
}
.textedossier {
	display: inline;
	position:relative;
	z-index:2;
}

**polymorphisme** · 28/10/2010, 10h41

Bonjour,

tu as mis ton texte dans bloc en ligne, donc il s'affiche en ligne, c'est à dire à la suite du dernier bloc affiché. Modifie le : display: bloc; puis positionne le au même endroit que ton image.

**novice100** · 28/10/2010, 10h45

J'ai changé en bloc mais cela ne change rien.
Que dois-je changer dans le positionnement ?

**polymorphisme** · 28/10/2010, 10h50

Je te propose de chercher du cote de initiation_absolue, tu y trouvera la réponse

**Atomya Rise** · 28/10/2010, 11h46

Bonjour,

Afin de jouer avec le positionnement des div, j'aurais plus mis ta div textedossier en position absolute...

Exemple :

Code css :

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
 
#sidemain2 {
	float: left;
	height: 200px;
	width: 48%;
	color: #036;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center;
	margin : 2px;
	padding: 2px; 
	border: 1px solid #090;
} 
.imagedossier {
	position: relative;
	width: 250px;
}
.textedossier {
	position:absolute;
	top: 30px;
	left: 10px;
	width: 250px;
	color: #ffffff;
}

**novice100** · 28/10/2010, 12h26

non, cela ne focntionne pas.
Je pense qu'il faut jouer avec les z-index

**Atomya Rise** · 28/10/2010, 12h29

Ceci fonctionne, j'ai testé.

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/ 
TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="00.css">
 
</head>
 
<body>
 
<div id="sidemain2">
   <div class="imagedossier">
   <img src="http://www.insu.cnrs.fr/ib815,image-une-eruption-solaire-prise-avec-instrument-eit-installe-bord-satellite-soho-esa-nasa.jpg" width="250" height="200" border="0" >
   </div>
   <div class="textedossier">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula.
   </div>
</div>
</body>
</html>

Code css :

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
 
#sidemain2 {
	float: left;
	height: 200px;
	width: 48%;
	color: #036;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center;
	margin : 2px;
	padding: 2px; 
	border: 1px solid #090;
} 
.imagedossier {
	position: relative;
	width: 250px;
}
.textedossier {
	position:absolute;
	top: 30px;
	left: 10px;
	border: 1px solid red; 
	width: 250px;
	color: #ffffff;
}

Ah moins qu'il y es quelque chose que je n'ai pas comprise alors....

**novice100** · 28/10/2010, 12h32

non, fonctionne pas

**novice100** · 28/10/2010, 12h40

J'ai trouvé, deux possibilités :
merci à vous tous de votre aide.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.imagedossier {
	position: absolute;
	width: 250px;
	z-index: 1;
}
.textedossier {
	position:relative;
	border: 1px solid red; 
	width: 250px;
             z-index: 2;
	color: #ffffff;	
}

ou bien :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.imagedossier {
	position: absolute;
	width: 250px;
}
.textedossier {
	position:relative;
	border: 1px solid red; 
             top: 100px;
             left: 360px;
	width: 250px;
	color: #ffffff;	
}

**Macmillenium** · 28/10/2010, 12h42

.textedossier doit être positionné par rapport à .imagedossier (FAQ

):

Code html :

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

1
2
3
4
5
6
7
 
<div class="imagedossier">
   <img src="http://www.insu.cnrs.fr/ib815,image-une-eruption-solaire-prise-avec-instrument-eit-installe-bord-satellite-soho-esa-nasa.jpg" width="250" height="200" border="0" >
   <div class="textedossier">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula.
   </div>
</div>

Mettre un texte dans une image

CSS

Discussions similaires

Partager

Partager