mise en page

**badr** · 04/09/2007, 19h37

Bonjour tout le monde,
je suis un debutant dans le CSS, je viens de tester un style et je le trouve pas mal mais le probleme je ne sais pas comment fixer la hauteur de la page (height) quand la partie est un peu vide la partie "pied_de_page" se decale en haute ce qui donne un melange entre les trois parties "menu, corps et pied_de_page" si vous pouvez m'aider a corriger au plutot a ameliorer ce style je vous serez vraiment redevable.
merci d'avance.
voici mon 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
 
body
{
 
   width: 90%;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;   
 
}
 
/* L'en-tête */
 
#en_tete
{
   width: 100%;
   height: 100px;
   background-color: #CCCCCC;
   margin-bottom: 10px;
   border: 2px solid black;
}
 
 
/* Le menu */
 
#menu
{
   float: left;
   width: 130px;
}
 
.element_menu
{
   background-color: #CCCCCC;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
 
   margin-bottom: 20px;
}
 
 
/* Quelques effets sur les menus */
 
 
.element_menu h3
{   
   color: #000000;
   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: #000000;
}
 
.element_menu a:hover
{
   background-color: #CCCCCC;
   color: black;
}
 
 
/* Le corps de la page */
 
#corps
{
 
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
 
   color: #000000;
   background-color: #CCCCCC;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
}
 
#corps h1
{
 
   color: #000000;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
 
#corps h2
{
   height: 30px;
 
   background-image: url("images/titre.png");
   background-repeat: no-repeat;
 
   padding-left: 30px;
   color: #000000;
   text-align: left;
}
 
 
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
 
#pied_de_page
{
   padding: 5px;
 
   text-align: center;
 
   color: #000000;
   background-color: #CCCCCC;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
}

et le code d'une page de teste

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
 
<!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 site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="styles.css">
   </head>
 
   <body>
 
       <!-- L'en-tête -->
 
       <div id="en_tete">
 
       </div>
 
       <!-- Les menus -->
 
       <div id="menu">       
           <div class="element_menu">
 
               <ul>
                   <p>&nbsp;</p>
 
                   <li><a href="index.html">Acceuil</a></li>
                   <li><a href="Cours.html">Cours</a></li>
                   <li><a href="Faq.html">Faq</a></li>
				   <li><a href="Mon CV.html">Mon CV</a></li>
				   <li><a href="Totoriaux.html">Totoriaux</a></li>
                    <li><a href="Contact.html">Contact</a></li>
 
                   <p>&nbsp;</p>
               </ul>
           </div>
 
           <div class="element_menu">
               <h3>&nbsp;</h3>
               <p>&nbsp;</p>
           </div> 
		   <div class="element_menu">
               <h3>&nbsp;</h3>
 
               <p>&nbsp;</p>
		   </div>      
       </div>
 
 
       <!-- Le corps -->
 
       <div id="corps">
 
         <p>&nbsp;</p>
         <p>&nbsp;         </p>
         <p>Cette section est pour vous chers visiteurs, j'attends  vos commentaires, vos suggestions, vos id&eacute;es pour am&eacute;liorer ce site qui est le  votre.</p>
 
           <p>&nbsp;</p>
           <p>&nbsp;</p>
           <p>Cliquer <a href="mailto:''@''.com">ici</a> pour me contacter</p>
           <p>&nbsp;</p>
           <p>&nbsp;</p>
           <p>&nbsp;</p>
           <p>&nbsp;</p>
 
           <p>&nbsp;</p>
           <p>&nbsp; </p>
           <p>&nbsp;</p>
       </div>
 
       <!-- Le pied de page -->
 
       <div id="pied_de_page">
           <p>Copyright &copy;2007 badrgb, tous droits réservés</p>
 
   </div>
 
   </body>
</html>

comme vous le constatez j'ai mets des paragraphe vide pour mon prob n'apparesse pas ds cette page.

SVP aidez moi.

**sidahmed** · 04/09/2007, 20h37

Bonsoir,

ajoute à ton pied de page (fichier CSS) la propriété suivante :

Code :

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

clear: left;

Si ton menu est à gauche, sinon :

Code :

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

clear: right;

Si tu as deux menus, à gauche et à droite:

Code :

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

clear: both;

J'espère avoir t'aider, si j'ai répondu à ta question, n'oublie pas de mettre le sujet comme résolu (en bas de page).
Bon courage.

**badr** · 05/09/2007, 01h39

merci pour ta reponse un partie de mon probleme est resolu mais, il reste cette question : comment fixer la hauteur de la page?

**Momodedf** · 05/09/2007, 09h53

Tu créé une div qui va contenir tout ton site et tu lui donne une taille fixe.

**badr** · 05/09/2007, 12h37

desole j'ai mal exprimer ma question

quand je disais la hauteur sois fixe j'ai voulus dire "Un design de taille extensible" qui se fixe selon la résolution du visiteur.
si quelqu'un peu m'aider SVP.

**MasterOfChakhaL** · 05/09/2007, 12h53

Salut,

Tu peux donner une taille en pourcentage. Elle dépendra alors de la taille de la fenêtre (et donc de la résolution si le navigateur est affiché en plein écran)

mise en page

CSS

Vue hybride

Discussions similaires

Partager

Partager