DIV en css - Positionnement incorrect

**qi9859** · 19/05/2007, 10h52

Bonjour à tous,

J'ai pris un modèle sur la manière de concevoir un site.

Voilà mon prb :
Le css m'a grandement servi mais, eh oui ! y a un mais, j'ai rajouté 2 div (pour la pageinfos (vous êtes ici >...) et pour un autre menu) et ce dernier qui me pose prb.

Je mets les codes et la capture, ce sera mieux pour que vous y voyiez plus clair.
Dans cette capture, la suite de lettre sera le menu pour les liens internes.
Vous constaterez que je n'arrive pas à prendre la largeur de l'écran sous le header (dans le css : width: 95%; ou même width: auto; c'est pareil, no good !)
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
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
<!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>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="" href="css/main.css" /> 
<!--
<style type="text/css">
</style>
-->
</head>
 
<body>
 
<!-- debut pageinfos -->
<div id="pageinfos">
<?php include("css/pageinfos/pageinfos.html"); ?>
<!-- fin pageinfos -->
</div>
 
<!-- debut header -->
<div id="header">
<?php include("header.html"); ?>
<!-- debut header -->
</div>
 
<!-- debut menu -->
<div id="menu">
<?php include("menu.html"); ?>
<!-- debut menu -->
</div>
 
 
<!-- debut menu -->
<div id="menug">
<?php include("menug.html"); ?>
<!-- fin menu -->
 </div>
 
<!-- debut contenu principal -->
<div id="conteneur">
			<?php
			    if (isset($_GET["page"])) $page = $_GET["page"];
			    else $page = 0; // par défaut intro.php
 
			    switch ($page) {
			        case 0  : include("./accueil.html"); break;
			        case 1  : include("./page1.html"); break; 
			        case 2  : include("./page2.html"); break;
			        case 3  : include("./page3.html"); break; 
			        case 4  : include("./page4.html"); break;
			        case 5  : include("./page5.html"); break; 
			    }
			?>    
<!-- fin contenu principal -->
 </div>
 
<!-- debut footer -->
<div id="footer">
<?php include("footer.html"); ?>
<!-- fin footer -->
</div>
 
 
</body>
</html>

Code 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
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
@charset "iso-8859-1";
/************************************/
* { 
  font-family: Verdana, Garamont, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #000000;
}  
/************************************/
body{
   width: 95%;
   margin: auto;
   margin-top: 0px;
   margin-bottom: 0px;   
   background-image: url("../images/fond5.png");
}
/************************************/
#pageinfos{
   background-color: #ffffff;
   color: #000000;
   margin-bottom: 0px;   
   padding-left: 10px;
   height: 15px;
}   
/************************************/
#header{
   width: auto;
   height: 100px;
   background-image: url("../images/banniere.jpg");
   background-repeat: no-repeat;
   margin-top: 0px;
   margin-bottom: 0px;
}
/********* C'est ici que ça va pas ***************************/
#menu{
   float: left;
   width: 95%;
   height: auto;
   position: relative;
   margin-top: 0px;
   background-color: cyan;
}
/************************************/
#menug{
   float: left;
   width: 140px;
   background-color: transparent;
   margin-top: 5em;
   margin-left: 0em;
}
.element_menu{
   background-color: #FFFFFF;
   background-image: url("../images/motif.png");
   background-repeat: repeat-x;
   border: 1px solid black;
   margin-bottom: 20px;
}
/* Quelques effets sur les menus */
.element_menu h3{   
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
.element_menu ul{
   list-style-image: url("../images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}
.element_menu a{
   color: #B3B3B3;
}
.element_menu a:hover{
   background-color: #B3B3B3;
   color: black;
}
/************************************/
#conteneur{
   margin-left: 120px;
   margin-bottom: 0px;
   margin-top: 5em;
   padding: 5px;
   color: #000000;
   background-color: #ffffff;
   border: 1px solid black;
}
#conteneur h1{
   color: #000000;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: 160%;
}
#conteneur h2{
   height: 30px;
   padding-left: 30px;
   color: #000000;
   font-size: 120%;
   text-align: left;
}
/************************************/
#footer{
   padding: 5px;
   margin-top: 15em;
   text-align: center;
   color: #ffffff;
   background-color: #FFFFFF;
   background-repeat: repeat-x;
   border: 2px solid black;
}
/************************************/

Si vous pouviez me dire le pourquoi du comment, ce serait bien, parce que là, j'ai du mal à voir ce problème.

Comme c'est là, voilà ce que ça donne:

Si vous voulez voir le site complet c'est ici.

Ne me laissez pas en rade SVP !

Merci d'avance.

Cordialement, QI9859

**Dan_A** · 19/05/2007, 11h46

Pour commencer il faut revoir les marges :
#conteneur{
margin-left: 120px;/*laisse 120px gauche*/

**qi9859** · 19/05/2007, 12h29

Envoyé par Dan_A

Pour commencer il faut revoir les marges :
#conteneur{
margin-left: 120px;/*laisse 120px gauche*/

Merci pour ta réponse mais c'est toujours pareil.

**Dan_A** · 19/05/2007, 14h52

Je ne sais pas si nous parlons de la même chose. Il fallait mettre margin-left:0; .
Ceci dit, avant toute tentative de débogage, il ne faut qu'un doctype par page, changer de Doctype (XHTML 1.0 ou HTML 4.01) et valider l'HTML.
Il faut ensuite contrôler les "margin" et "padding" soit à l'aide d'un reset global ( http://www.search-this.com/2007/03/1...rgin-for-error / http://kurafire.net/log/archive/2005...-css-revisited) soit pour chaque élément.
En cas de problème il sera plus facile de donner une réponse.

**qi9859** · 19/05/2007, 16h17

Envoyé par Dan_A

Je ne sais pas si nous parlons de la même chose. Il fallait mettre margin-left:0; .
Ceci dit, avant toute tentative de débogage, il ne faut qu'un doctype par page, changer de Doctype (XHTML 1.0 ou HTML 4.01) et valider l'HTML.
Il faut ensuite contrôler les "margin" et "padding" soit à l'aide d'un reset global ( http://www.search-this.com/2007/03/1...rgin-for-error / http://kurafire.net/log/archive/2005...-css-revisited) soit pour chaque élément.
En cas de problème il sera plus facile de donner une réponse.

J'ai fait un teste sur la page d'accueil (accueil.html), qui ne contient aucun code php, je n'ai pas eu d'erreurs.
Par contre, avec le fichier "index.php", là j'en ai eu plein. Tu l'as vu par toi-même en faisant la validation.
Validateur avec "accueil.html" http://www.test.jlb59.fr/images/valid_html.jpg
Validateur avec "index.php" http://www.test.jlb59.fr/images/valid_php.jpg

Alors comment veux-tu que je m'y retrouve surtout que les en-têtes sont identiques.

Maintenant, avec le php, qui ne contient que des "include", il est possible que le validateur prenne en compte les fichiers appelés, va savoir !...
Grrrr !

Je n'ai pas trouvé de sites qui référençait les bonnes syntaxtes ou bien c'est en anglais.
J'ai vu des Doctypes et encore, y en avait tellement que je ne savais pas quel choisir.

Pour plus d'infos, cela servira peut-être, c'est l'adresse du valideur en FR http://yansanmo.no-ip.org/ysm-validator/check.php
ceux que tu as eu la gentillesse de me donner sont en anglais, et moi ce n'est pas mon fort.

Avec ce lien, il sera plus juste de le mettre parmi ceux que tu m'as donnés, au cas où il y aurait des gens qui ne sont pas à l'aide avec l'anglais, comme moi...

Quoiqu'il en soit, j'ai refait le css en mettant le menu imbriqué avec le header.

C'est un peu mieux mais pas exactement ça. J'en viendrais à bout à force, hein !

Merci.

QI9859

**Dan_A** · 19/05/2007, 18h29

l'adresse du valideur en FR

C'est une adresse que je note. Je n'ai que des références en anglais et je ne lis jamais d'article dans une autre langue.

Je n'ai pas trouvé de sites qui référençait les bonnes syntaxes ou bien c'est en anglais.

Les Doctype qui marchent avec tous les navigateurs modernes :

Code html :

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

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Code html :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Il faut que le doctype soit la première ligne et il faut donc retirer le prologue xml de la page.

Maintenant, avec le php, qui ne contient que des "include", il est possible que le validateur prenne en compte les fichiers appelés,

Le validateur prend en compte ce qui est envoyé par le serveur et ce que reçoit le navigateur.

J'en viendrais à bout à force, hein !

C'est sûr !

DIV en css - Positionnement incorrect

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager