The menus and the text at the bottom are in the div#body tag.. I've set a border of green for this.. The menus and the bottom text should have been within this green border but they are not..
What's wrong with the codes? Why don't they fit withing the border?
Here's the screenshot
http://jsbin.com/apizu4
What's wrong with the codes? Why don't they fit withing the border?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>TLJ_Produits_Non_Alimentaires</title>
<style type="text/css" media="all">
/*-------------------------
CSS reset
----------------------------*/
html{margin:0px;padding:0px;width:1020px;height:auto;}
.wrapper{background:url(images/bgbg.jpg) repeat-y;width:100%;min-height:100%;margin-top:0px;margin-left:auto;margin-right:auto;padding:0px;font-family:Georgia, "Times New Roman", Times, serif;line-height:1px}
/* Border*/
.top{width:977px;height:21px;background:url(images/top.png) no-repeat;}
.content{width:977px;height:auto;background:url(images/bg.png) repeat-y;}
.bottom{width:977px;height:21px;background:url(images/bottom.png) no-repeat;}
/*-------------------------
CSS for header
--------------------------*/
.header{width:100%;height:auto;}
/*-------------------------
CSS for menu
--------------------------*/
.menubar{margin-left:10px;width:100%;clear:both;height:68px}
.menu{background:url(images/menu.png) no-repeat; width:127px;height:68px;list-style:none;float:left;margin-top:10px;padding-top:10px;clear:both;}
.text{font-weight:bold;font-size:11px;text-transform:uppercase;line-height:1;margin-top:40px;text-decoration:none;}
#body{width:100%;border:#099 thin groove;}
#body p{margin-left:200px;float:left;clear:both;}
p.text{color:#060;border:#060 thick groove;padding-left:100px;margin-top:00px;width:600px;margin-right:100px;}
</style>
</head>
<body>
<div class="wrapper purple">
<div class="top"> </div>
<div class="content">
<div class="header">
<ul class="menubar white" >
<li class="menu">
<div id="redbar">lundi</div>
<a href="#" class="text purple">Pourquoi <br />tous les jours</a>
</li>
<li class="menu">
<div id="redbar">mardi</div>
<a href="#" class="text purple">produits <br />alimentaires</a>
</li>
<li class="menu">
<div id="redbar">mercredi</div>
<a href="#" class="text purple">produits<br />non-alimentaires</a>
</li>
<li class="menu">
<div id="redbar">jeudi</div>
<a href="#" class="text purple">tout<br />comprendre</a>
</li>
<li class="menu">
<div id="redbar">vendredi</div>
<a href="#" class="text purple">trouvez nos<br />produits</a>
</li>
<li class="menu">
<div id="redbar">samedi</div>
<a href="#" class="text purple">contactez-nous</a>
</li>
<li class="menu">
<div id="bluebar">dimanche</div>
<a href="#" class="text purple">j'aime</a>
</li>
</ul>
</div>
<div id="body">
<p class="text purple">retrouvez notre gamme de produits non alientaires. bientot plus de 300 references du quotidien.</p>
</div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
http://jsbin.com/apizu4
Comment