2 div se touche css
Bonjour,
je voudrais que left et right touche content simplement.
Quelqu'un Peut M'aider SVP?
mon html:
<div id="banner"><font size=5><u><center><b><TITRE></b></center></u></font></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="content"><center><font color=#000000><TEXTE><SUITE><br><br><COMMENT><IMPRIMER><ENVOYER></font></center></body></div>
</div>
<div id="footer"><font color=#FFFFFF><center><b>News ajoutée le <DATE></b></center></div>
mon css:
<style type="text/css">
body{margin:0 auto;}
div{border:0px solid #333;}
#banner{width:765px;background-repeat:repeat;background-image:url(planete.jpg);}
#left{width:69px;float:left;background-repeat:repeat;background-image:url(planete.jpg);}
#content{width:625px;float:center;background-color:#ffffff;}
#footer{width:765px;clear:left;background-repeat:repeat;background-image:url(planete.jpg);} #right{width:69px;float:right;background-repeat:repeat;background-image:url(planete.jpg);}
#container {overflow:hidden; zoom:1;}
#left, #right, #content {padding-bottom:32000px; margin-bottom:-32000px;}
</style>
je voudrais que left et right touche content simplement.
Quelqu'un Peut M'aider SVP?
mon html:
<div id="banner"><font size=5><u><center><b><TITRE></b></center></u></font></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="content"><center><font color=#000000><TEXTE><SUITE><br><br><COMMENT><IMPRIMER><ENVOYER></font></center></body></div>
</div>
<div id="footer"><font color=#FFFFFF><center><b>News ajoutée le <DATE></b></center></div>
mon css:
<style type="text/css">
body{margin:0 auto;}
div{border:0px solid #333;}
#banner{width:765px;background-repeat:repeat;background-image:url(planete.jpg);}
#left{width:69px;float:left;background-repeat:repeat;background-image:url(planete.jpg);}
#content{width:625px;float:center;background-color:#ffffff;}
#footer{width:765px;clear:left;background-repeat:repeat;background-image:url(planete.jpg);} #right{width:69px;float:right;background-repeat:repeat;background-image:url(planete.jpg);}
#container {overflow:hidden; zoom:1;}
#left, #right, #content {padding-bottom:32000px; margin-bottom:-32000px;}
</style>
Configuration: Windows XP Firefox 2.0.0.14
7 réponses
-
j'ai trouver la solution !!!
css:
<style type="text/css">
body{margin:0 auto;}
div{border:0px solid #333;}
#banner{width:763px;height:25px;background-repeat:repeat;background-image:url(planete.jpg);}
#left{width:69px;float:left;background-repeat:repeat;background-image:url(planete.jpg);}
#content{width:625px;float:center;background-color:#ffffff;}
#footer{width:763px;clear:left;background-repeat:repeat;background-image:url(planete.jpg);}
#right{width:69px;float:right;background-repeat:repeat;background-image:url(planete.jpg);}
#container {overflow:hidden; zoom:1; width:763px;}
#left, #right, #content {padding-bottom:32000px; margin-bottom:-32000px;}
</style>
html:
<div id="banner"><font size=5><u><center><b><TITRE></b></center></u></font></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="content"><center><font color=#000000><TEXTE><SUITE><br><COMMENT><IMPRIMER><ENVOYER></font></center></body></div>
</div>
<div id="footer"><center><font color=#FFFFFF><b>News ajoutée le <DATE></b></center></div>
Et L'avantage c'est que ça fonctionne correctement sur IE....
Merci a vous !! -
http://images1.hiboox.com/images/2608/98aff211c62e521bdbe31ad856f63eda.jpg
http://images1.hiboox.com/images/2608/c804959241efabc6554d575f4dd6b309.jpg -
#left, #right, #content {padding-bottom:32000px; margin-bottom:-32000px; width=765px;}
-
-
@macgawelscreenshot avec ce que j'ai:
<img src=http://images1.hiboox.com/images/2608/98aff211c62e521bdbe31ad856f63eda.jpg>
scrennshot avec le code de macgawel:
<img src=http://images1.hiboox.com/images/2608/c804959241efabc6554d575f4dd6b309.jpg>
donc ça ne le fé pas tro...
-
-
j'ai essayer de faire:
#left, #right, #content {padding-bottom:32000px; margin-bottom:-32000px; [b]width=765px;[/b]}
mais là je ne vois plus left et right. -
euh ouai, j'y arrive pas, jcomprend pas tellement là ce que jdois faire, j'ai essayer quelques trucs mais.....
-
essaie de mettre un margin à gauche et à droite de content. FF et IE ne reagissent pas pareil avec donc si necessaire tu mets un margin negatif pour IE(margin: -3px)
#content{width:625px; margin:0; float:center;background-color:#ffffff;} -
<style type="text/css">
body{margin:0 auto;}
div{border:0px solid #333;}
#banner{width:765px;background-repeat:repeat;background-image:url(planete.jpg);}
#left{width:69px;float:left;display:block;background-repeat:repeat;background-color:#FF0000;}
#content{width:625px;background-color:#ffffff;text-align:center;color:#000;margin:0 0 0 69px;}
#footer{width:765px;clear:both;background-repeat:repeat;background-image:url(planete.jpg);}
#right{width:69px;display:block;float:right;background-repeat:repeat;background-color:#0000FF;}
#container {overflow:hidden; zoom:1;}
#left, #right, #content {}
#level0{
width:763px;/* 69+625+69*/
margin:0px auto;
}
</style>
<html>
<body style='background-color:#000;'>
<div id="banner">TITRE</div>
<div id="level0">
<div id="container">
<div id="right">right</div>
<div id="left">left</div>
<div id="content">Comment</div>
</div>
</div>
<div id="footer">News ajoutée le </div>
</body>
</html>
