gestion des blocs

**iOops** · 28/03/2007, 17h33

Bonjour,

Je suis actuellement en train de réaliser un site internet à l'aide de spip.
Je met en forme ma page à l'aide de css.

Voici le code css correspondant :

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
/* conteneur ec comprenant entete et coprs */
div.ec {
 position:relative;
 background-color:#d554ca;
 margin-left: auto;
 margin-right: auto;
 height:auto;
 width:800px;
 
}
 
/* conteneur 'entete' comprenant bandeau et hmenu */
div.entete {
 position:relative;
 background-color:gray;
 margin-left: auto;
 margin-right: auto;
 width:800px;
 
}
 
/* conteneur bandeau mjc */
div.bandeau {
 background-color:red;
 padding:50px;
 width:auto;
}
 
/* conteneur 'menu du haut' */
div.hmenu {
 background-color:#F4CD78;
 margin-top: 20px;
 padding:15px;
 
}
 
/* conteneur gauche centre et droite */
div.gcd {
 position:relative;
 background-color:yellow;
 top:10%;
 margin-left: auto;
 margin-right: auto;
 padding:0px;
 width:800px;
}
 
/* conteneur gauche et droite */
div.gd {
 position:relative;
 background-color:blue;
 margin-left: auto;
 margin-right: auto;
 padding:0px;
 width:800px;
 
 
}
 
/* conteneur 'gauche' */
div.gauche{
 position:absolute;
 background-color:#bbb4b4;
 left:0px;
 padding:0px;
 width:16%;
}
 
/* conteneur 'droite' */
div.droite {
 position:absolute;
 background-color:#e16868;
 top:0px;
 left:0px;
 margin-left:84%;
 padding:0px;
 width:16%;
}
 
/* conteneur 'centre où on affiche les informations ' */
div.centre{
 position: relative;
 background-color :#CD4F78;
 left:16%;
 margin-right:32.1%;
 padding:0px;
 width:67.9%;
}
 
/* conteneur 'pied' */
div.pied {
 position:relative;
 background-color:green;
 top:10px;
 margin-left: auto;
 margin-right: auto;
 width:800px;
 
}

Le résultat que donne la feuille de style ci-dessus est le suivant :

http://www.hiboox.com/image.php?img=6c9293d6.png
http://www.hiboox.com/image.php?img=de9aeae4.png

Code html :

fichier index.html :

Code html :

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
  <body>
           <!-- entete et corps -->
           <div class="ec">
                   <!-- entete -->
                   <div class="entete">
                           <INCLURE{fond=entete}>
                   </div>
                   <!-- corps du site -->
                   <div class="gcd">
                           <INCLURE{fond=corps}>
                   </div>
           </div>
           <div class="pied">ddddeee</div>
   </body>
 
fichier entete.html :
 
<!-- fichier de gestion de l'entete du site -->
<div class="bandeau">
        <a href='?page=index'>Accueil</a>
</div>
<div class="hmenu">
        <center>
                <a href=''>A</a>
                <a href='?page=activites'>B</a>
                <a href=''>C</a>
                <a href=''>D</a>
                <a href=''>E</a>
                <a href=''>F</a>
        </center>
</div>
 
fichier corps.html :
 
<!-- gestion du corps du site internet -->
<div class="gd">
        <div class="gauche">
        </div>
        <div class="centre">
        </div>
        <div class="droite">
        </div>
</div>

Comme vous pouvez le constater sur les images ci-dessus je ne parviens pas à faire en sorte que quelque soit la taille des bloc gauche, centre et droite le contenu des blocs restent dans le bloc "gcd" et ne se superposent pas au bloc "pied".

J'ai fais plusieurs tentatives de positionnement avec relative sur les blocs gauche et droite celà me donne le résultat escompté cepedant si je rajoute des élements dans les bloc le bloc du centre dessent au fur et à mesure des éléments rajouté dans le bloc.

J'avoue être clairement perdu, depuis hier je recommance tout de puis le début,

aussi si vous pouviez me filer un coup de main cela serais très appréciable,

je vous remercie d'avance.

**iOops** · 29/03/2007, 09h22

J'ai entièrement repris le code css voici le résultat que je cherchais à optenir :

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
 
/* Feuille de style essaie pour la gestion de la page 'tutoriel.html' */
div#page{
        margin-top:5%;
        margin-left:10%;
        margin-right:10%;
}
 
div#entete{
        float:left;
        width:800px;
}
 
div#bandeau{
        border:1px solid;
        padding:50px;
}
 
div#elien{
        border:1px solid;
        padding:10px;
}
 
div#corps{
        /*float:left;*/
        width:800px;
}
 
div#gauche{
        float:left;
        border:1px solid;
        width:160px;
}
 
div#centre{
        float:left;
        margin-left:10px;
        border:1px solid;
        width:454px;
 
}
 
div#droite{
        float:left;
        margin-left:10px;
        border:1px solid;
        width:160px;
}
 
div#pied{
        clear:both;
        border:1px solid;
        width:800px;
}
 
#divempty{
        clear:both;
        margin:0px;
        padding:10px;
        width:auto;
}

Pour les pages html :
1/index.html :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
 <body>
           <div id="page">
                   <!-- entete -->
                   <div id="entete">
                           <INCLURE{fond=entete}>
                   </div>
                   <div id="corps">
                           <INCLURE{fond=corps}>
                   </div>
           </div>
   </body>

2/entete.html :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- fichier de gestion de l'entete du site -->
<div id="bandeau">
        <a href='?page=index'>Accueil</a>
</div>
<div id="divempty"></div>
<div id="elien">
        <center>
                <a href=''>A</a>
                <a href=''>B</a>
                <a href=''>C</a>
                <a href=''>D</a>
                <a href=''>E</a>
                <a href=''>F</a>
        </center>
</div>

3/corps.html :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="divempty"></div>
<div id="gauche">
        gauche
</div>
<div id="centre">
        centre
</div>
<div id="droite">
        droite
</div>
<div id="divempty"></div>
<div id="pied">
         pied
</div>

gestion des blocs

CSS

Discussions similaires

Partager

Partager