Bonsoir tout le monde!
Je viens faire appel a vous, car j'ai un petit probleme de mise en page,
apres pas mal d'essai,de prises de tetes, vous etez peut etre LA solution!
Voyez par vous meme : http://www.20syl.com/alsa/index2.html
En l'ouvrant avec IE bizarement sa marche impec!
mais avec firefox, rien ne marche comme il faut!
Je vous met le code source de la page:
Et le css:
Je vous remerci d'avance d'eclairer un peu ma lanterne, et de me donner un ptit coup de pouce!
Modifié par 20syl (19 Jan 2006 - 21:58)
Je viens faire appel a vous, car j'ai un petit probleme de mise en page,
apres pas mal d'essai,de prises de tetes, vous etez peut etre LA solution!
Voyez par vous meme : http://www.20syl.com/alsa/index2.html
En l'ouvrant avec IE bizarement sa marche impec!
mais avec firefox, rien ne marche comme il faut!
Je vous met le code source de la page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>20syl blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<BODY>
<DIV id=conteneur>
<DIV class=haut_gauche>
<DIV class=haut_droit>
<DIV class=bas_gauche>
<DIV class=bas_droite>
<DIV id=haut>
</DIV>
<DIV id=banniere></DIV>
<DIV id=milieu></DIV>
<DIV id="contenu"><DIV id=g>
menu<br/> menu2
</DIV>
<DIV id=c>
partie centrale qui "pousse" les colones vers le bas.<BR>
partie
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer feugiat, mauris in venenatis aliquam, lacus neque commodo lorem, a tristique erat nulla imperdiet tortor. Donec ante libero, interdum ut, pharetra id, imperdiet posuere, sapien. Nulla facilisi. Sed ullamcorper. Morbi scelerisque dolor eu dolor. Pellentesque tincidunt lobortis justo. Cras non ante eu risus hendrerit pellentesque. Vestibulum ultrices. Mauris accumsan, felis ut tristique tempus, eros mauris vehicula velit, id gravida libero lectus at nulla. Maecenas sagittis. Aenean vel nulla sit amet ipsum pellentesque aliquam. Cras varius. Vivamus turpis enim, porttitor nec, facilisis sed, varius nec, diam. Proin posuere velit et diam. Maecenas consectetuer, mauris quis molestie pharetra, ante lectus vulputate tortor, at ultricies nunc pede sed odio. Sed pellentesque diam pretium quam. Mauris nec eros eget nulla bibendum venenatis. Aenean a est. Sed gravida ornare nisl. Vestibulum porta risus.
Nullam gravida. Fusce facilisis libero quis nulla. Fusce et dui vitae lacus imperdiet laoreet. Suspendisse lacus massa, porta nec, tincidunt et, lobortis id, enim. Aliquam dignissim tincidunt augue. Curabitur hendrerit mauris lacinia sem. Duis justo nisi, fermentum ut, ultricies vitae, viverra et, massa. Sed eu pede a nibh hendrerit gravida. Ut pellentesque, magna eget adipiscing tincidunt, magna arcu tristique mauris, et blandit ligula eros porta leo. Aenean orci metus, laoreet bibendum, semper eget, facilisis eget, elit. Integer eget nibh. Quisque vitae mi. Maecenas condimentum, velit nec condimentum pharetra, neque ipsum fringilla eros, blandit ultricies pede metus at lacus. Maecenas eleifend, velit in sagittis ornare, eros nisl porttitor libero, in mattis lorem ipsum nec eros. Praesent interdum consequat dui. Maecenas bibendum hendrerit massa. Donec leo eros, tincidunt et, semper in, fringilla ac, nisi. In pulvinar. Cras luctus blandit metus.
Integer ultrices nunc ut purus. Integer vel dui. In vulputate, erat ac posuere pulvinar
</DIV>
</div>
</DIV>
</DIV></DIV></DIV>
<DIV id=footer>
<DIV class=foot_bas_gauche>
<DIV class=foot_bas_droite>
</DIV></DIV></DIV></DIV></DIV></BODY></HTML>
Et le css:
body{
margin:0;
padding:0;
text-align:center;
background:#888;
font-family:Arial,Geneva;
font-size:9pt;
}
#conteneur{
width:510px;
margin-top:20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
text-align:left;
background-color : #fff;
}
.haut_gauche{
background-image : url(images/tl.gif);
background-repeat : no-repeat;
background-position : top left;
}
.haut_droit{
background-image : url(images/tr.gif);
background-repeat : no-repeat;
background-position : top right;
}
.bas_droite{
padding : 15px 15px 15px 15px;
}
#haut{
border-bottom:0px solid #fff;
height:40px;
background:#6C0DB1;}
#banniere{
background: #6C4FB1;
border-top:10px solid #fff;
border-bottom:10px solid #fff;
height:250px;
}
#milieu{
border-bottom:10px solid #fff;
height:50px;
background:#6C0DB1;
}
#contenu{
height:300px;
background:#BDA1DC;}
#footer{
border-bottom:10px solid #888;
height:30px;
background:#595955;}
.foot_bas_gauche{
background:#595955;
background-image : url(images/fbl.gif);
background-repeat : no-repeat;
background-position : bottom left;
}
.foot_bas_droite{
background-image : url(images/fbr.gif);
background-repeat : no-repeat;
background-position : bottom right;
padding : 15px 15px 15px 15px;
}
.menu
{
height:auto;
background:#BDA1DC;}
.post
{
height:auto;
background:#BDA1DC;}
#c {
float: right; MARGIN-LEFT: 0px; MARGIN-RIGHT:0px; BACKGROUND-COLOR: #9999cc
}
#g {
float: left; MARGIN-LEFT: 0px; WIDTH: 150px;
}
Je vous remerci d'avance d'eclairer un peu ma lanterne, et de me donner un ptit coup de pouce!
Modifié par 20syl (19 Jan 2006 - 21:58)