probléme de positionnement

Version imprimable

bonjour j'ai un souci j'ai plusieurs div avec un menu et un contenu de page mais j'ai l'impression que il les mets les uns aux dessus des autres

http://img233.imageshack.us/img233/7278/index5fq.th.jpg
voici mon css :

Code:

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
 
<!--
description des styles de mise en page
-->
 
 
<style type="text/css">
 
 
 
#entete {
        width: 100%;
        border-bottom: 1px solid blue;
        }
 
#nav{
        font-family: arial;
        font-size: 14px;
        color: black;
        left: 10px;
        top: 220px;
        margin-top: 5px;
        width: 220px;
        }
 
#nav a:hover:before 
        { 
        content:" » ";
        }
 
#contenu
        {
        margin-left: 210px;
        margin-right: 170px;
        margin-top: 10px;
        }
 
#pp
        {
        margin-top : 600px;
        width: 100%; clear: both;
        text-align: center;
        border-top: 1px solid blue;
        border-bottom: 1px solid blue;
        }
 
h1      {
        font-family: Verdana;
        font-size: 18px;
        color: black;
        }
 
p       {
        text-align:center;
        font-family: verdana;
        font-size: 12px;
        color: black;
        }
        
a.bouton2:link{
        width:150px;
        height:20px;
        text-decoration:none;
        color:white;
        text-align:center;
        font-weight:bold;
        background-color:#000080;
        padding:5px;
        border-style:inset;
        border-width:2px;
        border-color:silver
        }
 
a.bouton2:visited{
        width:150px;
        height:20px;
        text-decoration:none;
        color:white;
        text-align:center;
        font-weight:bold;
        background-color:#0066FF;
        padding:5px;
        border-style:outset;
        border-width:2px;
        border-color:silver
        }
 
a.bouton2:hover{
        width:150px;
        height:20px;
        text-decoration:none;
        color:white;
        text-align:center;
        font-weight:bold;
        background-color:#0000FF;
        padding:5px;
        border-style:outset;
        border-width:2px;
        border-color:silver
        }
 
.bouton2{text-align:center;padding:5px;}
 
.astuce {
        color:red;
        font-weight:bold;
        background-color:transparent;
                }
.astuce:before {content:url(style/lightmov.gif)}
.astuce:after {content:" ! "}
 
 
 
 
</style>

24/03/2006, 14h13
Bishop
Salut,

Pour tes div de contenu utilise ça dans ton css
Code:

1 2 3 4 position: absolute; top: XXXpx; left: XXXpx;

ça me donne toujours la même chose. je sais pas d'où cela peut venir.

voici mon index

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
<link rel="shortcut icon" href="script/images/favicon.ico" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="keywords" content="FIPROCESS, fabricant, Machine spéciale">
<meta name="description" content="INTRANET FI-PROCESS">
<meta name="authors" content="CROZET Mathieu"/>
<title>FIPROCESS - INTRANET</title>
<link rel="stylesheet" type="text/css" href= "style/fiproc-intra.css"> 
</head>
 
<body>
<div id="entete">
	<img align="center" src="script/images/entete_h.jpg" alt="entete FIPROCESS"/>
	<img align="center" src="script/images/entete_b.jpg" alt="entete bas FIPROCESS"/>
</div>
 
<div id="nav">
<?php
require_once ('script/inc/calendrier.inc');
calendrier();
?>
</div>
 
<div id="nav">
<?php
                $date= date("d-m-Y");
                $heure=date("h-i");
                echo"<p>aujourd'hui nous sommes le <BR> $date  -  $heure</p>";
                //echo"<BR>";
                //echo"<BR>";
?>
</div>
 
<div id="nav">
<?php
echo "<br>";
        // appel de la fenétre de login
  include('script/login.htm');
        // appel du menu
  include('script/menu.htm');
?>
</div>
 
<div id="contenu">
 
<p class="astuce">bientot le site fonctionnera donc soyez patient</p>
 
<?php
        // On définit le tableau contenant les pages autorisées
        // ----------------------------------------------------
  $pageOK = array('accueil'=>'script/accueil.php',
                                        'timer' => 'script/timer.php', 
                                        'admin'=>'script/admin.php');
  // On teste que le paramètre d'url existe et qu'il est bien autorisé
  // -----------------------------------------------------------------
  //echo"hello";
  if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
  } else {
        include('script/accueil.php');   // Page par défaut quant elle n'existe pas dans le tableau
  }
?>
</div>
 
<div id="pp">
<?php
include ('script\pp.htm');
?>
</div>
</body>
</html>

27/03/2006, 11h02
Bishop

Pourrais-tu nous donner l'adresse de ta page que l'on voit directement ce que ça donne ?
27/03/2006, 21h14
marsupix

déjà, tu as mis 2 id="nav" dans ton html.
un id doit etre unique. si tu veut en faire pusieurs, met une classe donc. > class="nav"

bref celà ne change pas grand chose.
en fait, les div sont des "blocks" et par défaut elles provoquent un retour à la ligne (comme tous les types blocks).
Donc si tu veut mettre ton contenu à coté, tu doit utiliser les float.
float:left assigné à ta div menu fera se comporter la div comme un caractère texte, aligné à gauche.
Donc ton menu sera bien aligné à gauche et le contenu à sa droite.

Pour annuler un float, utilise clear:both