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>
Afficher la suite
25 mai 2013 à 21:35
26 mai 2013 à 11:34
26 mai 2013 à 11:42
overflow:auto; à mon corps