Bonsoir !
J'ai un petit soucis avec la mise en forme de mon site.
J'ai un div "conteneur" qui lui même contient les div "menus" et "contenu", le soucis c'est que conteneur ne s'adapte pas à la taille des div enfant.
Lien pour voir ça en live : http://undersub.alwaysdata.net/
CSS :
HTML :
Quelqu'un pourrait m'éclairer ? ^^
Merci d'avance !
'Sub
J'ai un petit soucis avec la mise en forme de mon site.
J'ai un div "conteneur" qui lui même contient les div "menus" et "contenu", le soucis c'est que conteneur ne s'adapte pas à la taille des div enfant.
Lien pour voir ça en live : http://undersub.alwaysdata.net/
CSS :
html, body {
height: 100%;
}
body {
font-family: "Helvetica",sans-serif;
font-size: 62.5%;
margin: 0;
padding: 0;
background-color: #483A3A;
}
a {
text-decoration: none;
color: #DE564B;
}
#conteneur {
height: auto !important;
min-height: 80%;
background-color: #F5EEDB;
color: #9D6368;
}
#entete {
background-color: #5BC5BF;
color: white;
height: 10%;
background:-moz-linear-gradient( 95%, #483A3A, #aaaaaa 100%);
background:-webkit-gradient( linear, 0 95%,0 100%, from(#483A3A), to(#aaaaaa));
}
#logo {
position: relative;
float: left;
width: 400px;
height: 50px;
text-align: justify;
}
#vdm {
position: relative;
float: right;
width: 400px;
height: 50px;
text-align: justify;
margin: 10px;
}
.post {
}
#contenu {
position: relative;
float: left;
font-size: 1em;
width: 90%;
}
#contenu hr {
margin-left: auto;
margin-right: auto;
width: 700px;
}
#menus {
position: relative;
float: right;
width: 10%;
}
.menu {
text-align: center;
width: 100px;
font-size: 1.1em;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.menu input {
width: 80px;
margin-left: auto;
margin-right: auto;
}
.menu h1 {
font-size: 1.2em;
}
#menus hr {
width: 80px;
margin-left: auto;
margin-right: auto;
}
#pied {
clear: both;
background-color: #483A3A;
background:-moz-linear-gradient( 0%, #aaaaaa, #483A3A 5%);
background:-webkit-gradient( linear, 0 0%,0 5%, from(#aaaaaa), to(#483A3A));
color: white;
height: 10%;
width: 100%;
text-align: center;
display: block;
}
HTML :
<body>
<div id="entete">
<div id="vdm">
...
</div>
</div>
<div id="conteneur">
<div id="menus">
...
</div>
<div id="contenu">
...
</div>
</div>
<div id="pied">
...
</div>
</body>
Quelqu'un pourrait m'éclairer ? ^^
Merci d'avance !
'Sub