Aide HTML et CSS

**kaselander** · 10/02/2009, 09h35

Bonjour,
voilà j'ai un petit soucis avec ma page web en construction,lorsque j'insère du texte dans le tag <body></body> et que je lance mon browser pour voir le résultat,je retrouve mon texte en plein centre et au milieu de la page et de plus le corps de ma page est collé au menu et je me dis que le problème vient peut-être de là. Je vous faire une petite capture qui peut aider.

CODE 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
<!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>Menu horizontal avec onglets</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
 
<body background="http://fonds.toutimages.com/fo_beige/beige064.jpg">
<center><div id="en_tete"><IMG src="banniere2.gif"></div></center>
<div id="menu">
	<div class="menu" id="activ"><a href="page1.html">Menu 1</a></div>
	<div class="menu"><a href="page2.html">Menu 2</a></div>
	<div class="menu"><a href="page3.html">Menu 3</a></div>
	<div class="menu"><a href="page4.html">Menu 4</a></div>
	<div class="menu"><a href="page5.html">Menu 5</a></div>
	<div class="menu"><a href="page6.html">Menu 6</a></div>
	<div class="menu"><a href="page7.html">Menu 7</a></div>
	<div class="menu"><a href="page8.html">Menu 8</a></div>
 
</div>
 
<div id="corps">
<p>Je suis un passionné de l'informatique et prêt à aller aussi loin que possible et pour cela j'ai grand besoin de votre aide à tous<br>
et comme vous pouvez le voir,je m'essaie à la conception de site web</p>
 
</div>
 
<div id="pied_de_page">
Mon texte
</div>
 
 
</body>
</html>

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
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
body
	{
	 width: 900px;
	 margin: auto; 
     margin-top: 25px; 
     margin-bottom: 25px; 
	 background:url;
	}
 
*{
	margin:10;
	padding:0;
}
 
#en_tete{
	  width:800px;
      height:90px;
      background-image: <"banniere2.gif">;
      background-repeat: no-repeat;
      margin-bottom: 10px;
 
	}
 
#menu{
	width:800px;
	background:#e7474e;
	margin:0 auto;
	height:50px;
	color:#000;
}
.menu{
	float:left;
	width:100px;
	height:45px;
	text-align:center;
	margin-bottom: 10px;
}
.menu a{
	display:block;
	height:30px;
	padding-top:15px;
}
.menu a:link, .menu a:visited{
	text-decoration:none;
	color:#000;
	font-family:verdana, sans-serif;
	font-size:12px;
	background:#abc url(fond.jpg) 0 -45px;
}
.menu#activ a:link, .menu#activ a:visited{
	background:#abc url(fond.jpg);
	color:#000;
}
.menu a:hover, .menu a:active, .menu a:focus{
	background:#abc url(fond.jpg) 0 -90px;
	color:#393;
}
.menu#activ a:hover, .menu #activ a:active, .menu#activ a:focus{
	background:#abc url(fond.jpg);
	color:#393;
}
 
#corps
    {
     margin-bottom: 49px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
     padding: 350px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
 
     color: #B3B3B3;
     background-color: white; /* Une couleur de fond pour le corps */
     border: 2px solid blue; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
	}
 
 
#pied_de_page
        {
     padding: 1px;
     text-align: center;
	 border: 2px solid blue;
    }

Merci à vous!!!

**romain_ci** · 10/02/2009, 09h44

Bonjour !

Peut tu mettre ton code dans les balises prevus à cette effet ?
Merci

De plus pour ton problème, dans le CSS où l'id corp est déclarer il y a un padding de 350px; retire le ou diminu le.

Voila

**kaselander** · 10/02/2009, 10h16

Envoyé par romain_ci

Bonjour !

Peut tu mettre ton code dans les balises prevus à cette effet ?
Merci

De plus pour ton problème, dans le CSS où l'id corp est déclarer il y a un padding de 350px; retire le ou diminu le.

Voila

ok je le ferai et merci pour ton aide,j'ai retiré le padding de 350px; et j'ai obtenu le résultat que je voulais mais comment faire pour le ménu qui cole au corps?