Bonjour,
j'essaye d'encadrer une page en css grâce aux balises div et tout se passait bien jusqu'à ce que, (ô malheur), je tombe sur une impasse...
Ma page est composée de trois blocs principaux (haut, centre et base), et j'aimerais que le bloc centre s'adapte à son contenu (height: auto;) mais que sa taille ne soit jamais inférieure à 70% de l'écran (min-height: 70%). Malheureusement, le bloc base, qui devrait être située sous le bloc centre, reste "coincé" plus haut. J'ai relu et relu mon code sans succès, alors je me permet de vous demander de l'aide, bien conscient que l'erreur vient sûrement d'une maladresse ou d'une inattention de ma part, auquel cas je m'en excuse.
Voici mon code:
Merci de votre aide !
j'essaye d'encadrer une page en css grâce aux balises div et tout se passait bien jusqu'à ce que, (ô malheur), je tombe sur une impasse...
Ma page est composée de trois blocs principaux (haut, centre et base), et j'aimerais que le bloc centre s'adapte à son contenu (height: auto;) mais que sa taille ne soit jamais inférieure à 70% de l'écran (min-height: 70%). Malheureusement, le bloc base, qui devrait être située sous le bloc centre, reste "coincé" plus haut. J'ai relu et relu mon code sans succès, alors je me permet de vous demander de l'aide, bien conscient que l'erreur vient sûrement d'une maladresse ou d'une inattention de ma part, auquel cas je m'en excuse.
Voici mon code:
<html>
<head>
<STYLE type="text/css">
.haut
{
background-color: #FFFFCC;
width: 100%;
height: 5em;
}
.centre
{
margin-top: 0;
width: 100%;
height: auto;
min-height: 70%;
}
.colg
{
float: left;
width: 15%;
height: 100%;
background-color: #FFFFCC;
}
.colc
{
height: 100%;
float: left;
width: 70%;
background-color: #FFF;
}
.menu
{
margin-top: 3%;
margin-bottom: 3%;
height: 100%;
width: 11%;
float: left;
margin-right: 3%;
}
.centrale
{
margin-top: 3%;
margin-bottom: 3%;
margin-left: 3%;
margin-right: 2%;
float: left;
height: 100%;
width: 81%;
}
.cold
{
height: 100%;
width: 15%;
float: left;
background-color: #FFFFCC;
}
.base
{
background-color: #FFFFCC;
height: 3em;
width: 100%;
}
</STYLE>
</HEAD>
<body>
<div class="haut"> <?php include("titre.php3"); ?> </div>
<div class="centre">
<div class="colg"></div>
<div class="colc">
<div class="centrale"> <?php include("billets.php3"); ?> </div>
<div class="menu"> <?php include("menu.php3"); ?> </div>
</div>
<div class="cold"></div>
</div>
<div class="base"> <?php include("base.php3"); ?> </div>
</body>
</html>
Merci de votre aide !