Positionner un texte sur une image

**Ryoko** · 19/06/2008, 09h48

Bonjour,

je débute en CSS et je suis face à un problème

J'essaie de mettre le texte de mon corps sur un fond, comme vous pouvez voir à ce lien : http://omegaclan.free.fr/test.html

Le problème est que le texte passe sur la bordure de gauche, et je n'arrive pas à le recadrer en posant une marge.
Je ne sais pas si je dois progresser comme ça, ou placer le texte et l'image dans 2 "block" différents. Bref je suis perdu

Je met le code de toute la page au cas où le menu pose problème:

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>WakfuMonde</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="test.css" />
</head>   
 
 
<body>
 
<div id="en_tete">
 
</div>
 
 
   <div id="menu">
      <div id="tete_menu"></div>
 
       <ul id="listeh">
    <li><a id="lien1" href="#">Menu</a></li>
    <li><a id="lien2" href="#">Menu</a></li>
          <li><a class="btn3" href="#">Menu</a></li>
		  <li><a class="btn3" href="#">Menu</a></li>
		  <li><a class="btn3" href="#">Menu</a></li>
		  <li><a class="btn3" href="#">Menu</a></li>
		  <li><a class="btn3" href="#">Menu</a></li>
		  <li><a class="btn3" href="#">Menu</a></li>
		  <li><a class="btn3" href="#">Menu</a></li>
          </ul>
	 <div id="pied_menu"></div>
   </div>
 
 
<div id="corps">
  <h2>Mon super site</h2>
 
   <p>
       Bienvenue sur mon super site !<br />
       Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
   </p>
 
   <h2>A qui s'adresse ce site ?</h2>    
   <p>
       A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
       Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
   </p>
 
</div>
 
 
<div id="pied_de_page">
 
</div>
</body>
</html>

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
   #menu ul {
      margin: 0;
      padding : 0;
      list-style : none;
      }
 
	#tete_menu {
	 background-image: url(menu/tete.png);
	 width : 239px;
     height : 131px;
	 }
 
	#pied_menu {
	 background-image: url(menu/pied.png);
	 width : 239px;
     height : 95px;
	 }
 
	 #menu ul {
  margin: 0;
  padding : 0;
  list-style : none;
  margin-left : 27px;
  /*            27 = (239 - 185) / 2     */
  }
 
 
 
/* les liens dans les deux listes, ce qu'ils ont en commun */
#listeh li a, #listeb li a {
  display : block;
  width : 185px;
  height : 22px;
  text-decoration : none;
  font : 0.7em Verdana, Helvetica, sans-serif;
  color : #492b11;
  text-align : center;
  line-height : 22px;
  }
 
/* les liens de la liste du haut */
#listeh li #lien1 {
  background : url(menu/both_tete.png) left top no-repeat;
  }
#listeh li #lien2 {
  background : url(menu/both_tete.png) 0 -22px no-repeat;
  }
#listeh li #lien1:hover {
  background-position : 0 -44px;
  }
#listeh li #lien2:hover {
  background-position : 0 -66px;
  }
 
 
  	#menu li a.btn3 {
      display : block;
      width : 185px;
      height : 22px;  /* la moitié de la hauteur totale de l'image */
      }
 
	#menu li a.btn3 {
      display : block;
      width : 185px;
      height : 22px;  /* la moitié de la hauteur totale de l'image */
      background : url(menu/both_bouton.png) left top no-repeat;
      text-decoration : none;
      }
 
	#menu li a.btn3 {
      display : block;
      width : 185px;
      height : 22px;  /* la moitié de la hauteur totale de l'image */
      background : url(menu/both_bouton.png) left top no-repeat;
      text-decoration : none;
      font : 0.7em Verdana, Helvetica, sans-serif;
      color : #492b11;
      text-align : center;
      line-height : 22px;
      }
 
	#menu li a.btn3:hover {
      background-position : 0 -22px;
      color : #492b11;
      }
 
 
	  body
{
   width: 860px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
 
}
 
 
    #en_tete
{
   width: 812px;
   height: 174px;
   background-image: url("menu/banniere.png");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
 
	#menu
{
   float: left; /* Le menu flottera à gauche */   
}
 
 
 
    #corps
{
   width: 430px;
   height: 555px; 
   margin-top: 50px;
   margin-left: 300px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 20px; /* pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 8px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   font : 0.7em Verdana, Helvetica, sans-serif;
   text-align : center;
   line-height : 22px;
   color: #492b11;
   background-color: #f2efee; /* Une couleur de fond pour le corps */
   background-image: url("menu/menutest.png");
   background-repeat: no-repeat;
 
   /*border: 2px solid black; /* Une bordure pour bien marquer les limites du corps*/
}

Je vous remercie

**monstor** · 19/06/2008, 09h57

Bonjour!
Eh bien tu réduis un peu la largeur de ton "corps" et tu augmentes un peu sa marge à gauche...

NON ?

**Ryoko** · 19/06/2008, 10h05

Si je décale à gauche, la partie droite de l'image s'efface

Et si je rajoute en padding, c'est du côté droit que ça déborde

**Bisûnûrs** · 19/06/2008, 10h13

Remplace ton

Code :

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

padding:8px;

de ton div corps par

Code :

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

padding:8px 8px 8px 16px;

Au passage, ton design est très bien, mais fais un Ctrl+molette et tu verras qu'il ne tient pas la route.

**monstor** · 19/06/2008, 10h15

Pour ne pas que le fond de ton div corp efface ton image tu met le background à none!

Et non, ne décales pas à gauche, tu es déja trop à gauche! Augmente ta marge à gauche et réduit aussi la largeur de ton corps, il à l'air d'être trop grand par rapport à ton image!

**Ryoko** · 19/06/2008, 10h22

Merci pour vos réponse.
Je regarde ça de suite

Positionner un texte sur une image

Positionnement en CSS

Discussions similaires

Partager

Partager