Hauteur page et menu css

Résolu/Fermé
Messages postés
250
Date d'inscription
jeudi 21 mars 2013
Statut
Membre
Dernière intervention
1 septembre 2013
-
Messages postés
250
Date d'inscription
jeudi 21 mars 2013
Statut
Membre
Dernière intervention
1 septembre 2013
-
Bonjour,

Je réaliser un site web est j'ai un problème avec le CSS: Je n'est pas déclarer de hauteur de page pour quelque s'adapte toute seule avec le contenu. Sa c'est bon. Le problème c'est mon menu: il ne fait pas toute la hauteur de ma page, il s'arr^te dès qu'il ne contient plus, ce qui fait que mon texte ce mais aussi en-dessous de mon menu et sa je voudrai pas. Comment faire:

Voici ma feuille de style:

body, p, td, th{
padding:0px;
margin: 0px;
}

body{
background-color: #D0D0D0; /* couleur du fond : gris foncé*/
font-family: arial,sans-serif;
color: #006400;
}

/*************************************************/
/* bloc GLOBAL (celui qui contient tous les blocs*/
/*************************************************/
#global{
padding : 20px; /* marge interne */
margin: auto; /* pour center */
width: 1300px;; /* largeur du contenu */
background-color: #F0F0F0; /* couleur du fond : gris clair*/
}

/*****************************************/
/* ENTETE : image + nom de l'entreprise */
/****************************************/
#bandeau{
width: 100%;
background-color: #006400; /* vert */
color:white;
}

#imgbandeau{
width: 280px;
height: 150px;
float:left;
}

img{
width:100%;
height:100%;
}

#titre{
height: 150px;
}

h1{
text-align:center; /* on centre le titre horizontalement */
color: black;
}

h2{
text-align:center; /* on centre le titre horizontalement */
}

/* Cadre contenant menu */
/**********************/
/* MENU DE NAVIGATION */
/**********************/

#menu ul{
list-style: none;
padding: 0;
margin: 0;
text-align: center; /* centrer le texte */
}

#menu li{
margin:auto;
padding:0;
background-color:#32CD32; /* vert */
}

#menu li a{
width:200px;
color:black;
text-decoration:none;
line-height: 35px;
}

#menu li a:hover{
text-decoration:underline;
color:white;
}

.clear{
clear: both;
}

/***********/
/* CONTENU */
/***********/
p{
text-align:justify;
}

#principal{
width:1400px;
height: 100%;
}

#menu{
float:left;
width:240px;
height: 100%;

padding-top: 30px;
margin-right: 60px;
padding-right: 20px;
padding-left: 20px;
background-color:#006400; /* vert foncé*/
}

#corps{
padding-top: 30px;
height: 100%;
padding-right: 20px;
padding-left: 10px;
background-color:#CEF6CE;
}

#pied{
padding-top: 20px;
background-color:#006400; /* vert */
width: 100%;
height: 30px;
color:black;
text-align:center;
}

label:hover{
cursor: pointer;
}

#corpsForm .text{
margin: auto;
width: 70%;
border: #CCC 1px solid;
color: black;
height: 100%;
}

label{
color: black;
}

#bandeau h1{
color: white;
line-height: 150px; /* on centre le titre verticalement interligne = hauteur du */
}

#form{
margin: auto;
}

#bouton
{
text-align: center;
background-position: center;
}

legend
{
text-align: center;
font-weight: bold;
font-size: large;
margin: auto;
}

Voici un exemple de page:
<body>
<div id="corps">
<h1>Présentation du laboratoire GSB</h1>
<p>
TEST
</p>
</div>

<?php
// pied de page
include("includes/piedPage.php");
?>
</body>

1 réponse


Salut,

Tu peux mettre un height:100% à ton menu par exemple.
Messages postés
250
Date d'inscription
jeudi 21 mars 2013
Statut
Membre
Dernière intervention
1 septembre 2013

J'ai mi une hauteur à 100%, mais sa change rien: mon texte va en-dessou du menu
Profil bloqué
Envoie un lien vers ta page
Messages postés
250
Date d'inscription
jeudi 21 mars 2013
Statut
Membre
Dernière intervention
1 septembre 2013

finalement j'ai trouvé
overflow:auto; à mon corps