repetition d'un morceau d'une div lors de l'utilisation d'un padding

**liily34** · 17/01/2010, 12h58

Bonjour,

J'ai un problème avec mon design lorsque je souhaite appliquer une marge interieure pour que mon texte ne soit pas collé aux bords, un morceau de ma div "milieu" se répète sur la droite. Si quelqu'un pourrait m'aider a résoudre se probleme s'il vous plait j'ai essayer de mettre la propriété background-image : no-repeat; mais ca ne fonctionne pas.

Voici le code xhtml de ma page :

Code xhtml :

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
<?xml version="1.0" encoding="UTF-8"?>
<!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="en" lang="en">
<head>
    <title> / /  Elem-web.fr, le site officiel  \ \ </title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Normal" />
</head>
<body>
<div id="contenu">
 
	<div id="haut"> </div>
 
	<div id="milieu">
		<p>Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, 
		convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Vivamus leo. 
		Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.
		Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue.</p>
		<p>Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, 
		convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Vivamus leo. 
		Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.
		Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue.</p>
		<p>Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, 
		convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Vivamus leo. 
		Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.
		Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue.</p>
		<p>Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, 
		convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Vivamus leo. 
		Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.
		Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue.</p>
		<p>Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, 
		convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Vivamus leo. 
		Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.
		Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue.</p>
		<p>Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, 
		convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Vivamus leo. 
		Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.
		Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue.</p>
	</div>
 
	<div id="bas"> </div>
 
</div>
 
 
 
</body>
</html>

Et le code css :

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
26
27
28
29
30
31
32
 
body {	
background-image: url(images/background.jpg);
}
 
#contenu{
width:650px;
}
 
#haut{
background-image: url(images/design-milieu-haut.jpg);
width:650px;
height:35px;
margin-left:100px;
float:left;
}
 
#milieu{
background-image: url(images/design-milieu-milieu.jpg);
width:650px;
margin-left:100px;
float:left;
padding:20px;
}
 
#bas{
background-image: url(images/design-milieu-bas.jpg);
width:650px;
height:35px;
margin-left:100px;
float:left;
}