Problème de positionnement du content

**adenak** · 15/07/2008, 13h03

Bonjour.

Je suis en train d'essayer de créer un site, jusqu'à aujourd'hui tout marchait bien, tout était bien positionné (header, menu, content et footer). Malheureusement, je viens de changer la dimension du header car je viens de commencer à le faire, j'ai donc adapté le reste mais voilà le problème. Tout me parait correct sauf que le content reste bloqué sous le menu et je n'est pas la moindre idée d'où ça vient...

Voiçi mon code css, html et une image pour montrer ce que ça me fait:

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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Index</title>
<link type="text/css" href="style2.css" rel="stylesheet" />
 
</head>
 
<body background="images/page_bk.gif">
 
<div class="body">
 
 
<div id="header">
 
<img src="images/header.bmp"/>
 
</div>
 
<div id="menu">
 
 
<div class="info_haut"></div>
<div class="menu">
 
<p align="center"><font size="2"><b><?php 
$jour = date("d");
$mois = date("m");
$année = date("Y");
$heure = date("H");
$min = date("i");
$sec = date("d");
 
echo "Date: $jour/$mois/$année <br> $heure h $min ";
 
?></b></font></p>
 
<p>
<p>
<p></div>
 
 
 
 
 
<div class="menu_haut" ></div>
<div class="menu">
<u1>
			<ul>
			<li><a href="index.php">Accueil </a></li>
			<li><a href="page.php" target="_blank">Forums </a></li>
			<li><a href="?page=staff">Staff </a></li>
 
			<li><a href="?page=pub">Partenariat </a></li>
			<li><a href="?page=contact">Contact</a></li>
			</ul>
 
            <div class="menu_bas"></div>
</div>
 
<div id="content">
 
<div class="content_haut"></div>
 
<div class="content_milieu">
<?php
include("test.php");
?>
</div>
 
</div>
 
</div>
 
<div id="footer">
 
</div>
 
</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
/* CSS Document */
 
body 
{
background-color:#FFFFFF;
width:100%;
}
 
.body
{
width:970px;
margin:auto;
}
 
 
 
#header
{
margin-top:20px;
margin-bottom:20px;
width:970px;
height:164px;
border: 2px  black  solid;
}
 
 
#menu
{
width:200px;
float:left;
}
 
.menu
{
width:200px;
overflow:hidden;
border: 1px  black  solid;
background-color:#ccc9c9;
margin-bottom:20px;
}
 
.info_haut
{
width:200px;
height:26px;
overflow:hidden;
border: 1px  black  solid;
background:url(images/infos.bmp) no-repeat;
}
 
.menu_haut
{
width:200px;
height:26px;
overflow:hidden;
border: 1px  black  solid;
background:url(images/menu_gauche.bmp) no-repeat;
}
 
 
#content
{
width:750px;
margin-left:220px;
}
 
.content_haut
{
width:750px;
height:26px;
background:url(images/contenu.bmp) no-repeat;
border: 1px  black  solid;
}
 
.content_milieu
{
width:750px;
background-color:#ccc9c9;
border: 1px  black  solid;
}
 
 
 
a
{
text-decoration:none;
color:#C40000;
font: italic;
}
 
#include
{
width:550px;
margin:auto;
padding-right:10px;
}
 
#footer
{
background:url(images/footer.bmp);
width:970px;
height:26px;
margin:auto;
margin-top:20px;
border: 1px  black  solid;
}

Image du site

Voilà, je pense que c'est pas trop dur de comprendre mon problème avec en regardant le screen.

J'espère que vous pourrez m'aider en tout cas, je cale vraiment là... Je sens que c'est tout con en plus....

Euh dans le css ya surement des trucs inutile que j'ai oublié de virer ainsi que dans le html mais je pense pas que ça soit très important.

Ciaô

Ciaô

**romain_ci** · 15/07/2008, 13h41

Code :

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

1
2
3
4
#content {
 
float:left;
}

Jpence que ta oublier ca...

**Bovino** · 15/07/2008, 13h51

Je pense surtout que les bordures font dépasser le contenu de l'espace disponible... pas assez d'espace disponible => changement de ligne.
Tu devrais ajouter la taille totale des bordures au width du body.

**c_s_s** · 15/07/2008, 13h48

Bonjour,

Effectivement il y a des erreurs dans le html (des balises <p> ouvertes qui ne sont pas fermées, une balise <ul> en trop et inutile).

Sinon le <div id="content"> se trouve à l'intérieur du <div id="menu">, ce qui peut poser problème (en tout cas je ne vois pas ce qu'il fait dans le menu).

Pour bien faire, il faudrait ajouter un clear: both; dans #footer.

Problème de positionnement du content

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager