Bonjour à vous tous et merci d'avance de votre aide.
J'essaye un second style graphique pour mon nouveau site.
Et je vous expose le probléme:
http://www.delightfactory.eu/test2.html
Comme vous pouvez le constater les deux DIV se limite à la hauteur du viewport.
Tout les site internet sont unanime. Pour pouvoir mettre une DIV en height:100%;
Il faut que tout ses parents soit à height:100%;, même la balise html.
C'est sur base de ce layout que j'ai fait, je n'arrive pas à le faire.
http://blog.html.it/layoutgala/LayoutGala07.html
Car si je met ma DIV #container height:100%;, Tout mon layout et faussé.
Pour votre information, c'est la DIV #wrapper qui un background de couelur bleu marine
HTML
CSS
Merci à vous.
Modifié par Rifton007 (03 May 2009 - 22:57)
J'essaye un second style graphique pour mon nouveau site.
Et je vous expose le probléme:
http://www.delightfactory.eu/test2.html
Comme vous pouvez le constater les deux DIV se limite à la hauteur du viewport.
Tout les site internet sont unanime. Pour pouvoir mettre une DIV en height:100%;
Il faut que tout ses parents soit à height:100%;, même la balise html.
C'est sur base de ce layout que j'ai fait, je n'arrive pas à le faire.
http://blog.html.it/layoutgala/LayoutGala07.html
Car si je met ma DIV #container height:100%;, Tout mon layout et faussé.
Pour votre information, c'est la DIV #wrapper qui un background de couelur bleu marine
HTML
<body>
<div id="container">
<div id="wrapper">
<div id="Page_body">
<div id="DIV_Flash"></div>
<div id="DIV_Transition"></div>
<div id="DIV_Body"></div>
<div id="DIV_Bottom"></div>
</div>
</div>
</div>
<div id="Page_left"></div>
<div id="Page_right">C</div>
</div>
</body>
CSS
html,body{
margin:0;
padding:0;
background-color: #CF0;
height: 100%;
}
body{
text-align:center;
height: 100%;
}
div#container{
width:1380px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
text-align: left;
background-color: #000;
}
div#wrapper{
float:left;
width:100%;
background-color: #006;
height: 100%;
margin: 0px;
}
#Page_body{
background-color: #69F;
margin-top: 0;
margin-right: 180px;
margin-bottom: 0;
margin-left: 180px;
}
#Page_left{
float:left;
width:180px;
margin-left:-1380px;
background-color: #66F;
background-image: url(../PIC/Groud_repeatL.jpg);
background-repeat: repeat-y;
background-position: right top;
margin-bottom: 0px;
min-height: 100%;
}
#Page_right{
float:left;
width:180px;
margin-left:-180px;
background-color: #63F;
height: 100%;
margin-bottom: 0px;
}
#DIV_Flash {
width: 1020px;
height: 561px;
}
#DIV_Install {
height: 562px;
width: 1020px;
background-image: url(../PIC/Install_flash.jpg);
background-repeat: no-repeat;
padding-top: 380px;
font-family: Helvetica, Arial;
font-size: 12px;
color: #FFF;
text-align: left;
padding-left: 90px;
}
#DIV_Transition {
width: 970px;
height: 80px;
background-image: url(../PIC/DIV_Transition.jpg);
margin: 0px;
padding-right: 0px;
padding-left: 50px;
padding-top: 20px;
}
#DIV_Body {
background-image: url(../PIC/DIV_Window.jpg);
background-repeat: repeat-y;
width: 970px;
padding-left: 50px;
height: 500px;
}
#DIV_Bottom {
background-image: url(../PIC/DIV_Bottom.jpg);
height: 157px;
width: 1020px;
}
Merci à vous.
Modifié par Rifton007 (03 May 2009 - 22:57)
