What's wrong with this page?
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?
<!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-开发者_JAVA百科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>
Here's the screenshot http://jsbin.com/apizu4
Hi I've made a few changes to your code, in particular I've replaced the usage of the clear:both; css and used overflow:hidden; instead.
Also consider using class="redbar" instead of id="redbar" instead as class is the correct tag to use when applying a particular style to multiple elements on the same page.
Also as mentioned by ZippyV the menu was not enclosed in the id="body" tag, so I've moved this for you also!
Here's the modified 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:977px;
}
/*-------------------------
CSS for menu
--------------------------*/
.menubar
{
margin-left:10px;
width:100%;
overflow:hidden;
}
.menu
{
background:url(images/menu.png) no-repeat;
width:127px;
height:68px;
list-style:none;
float:left;
margin-top:10px;
padding-top:10px;
}
.menu_title
{
padding: 5px 0;
}
.text{font-weight:bold;font-size:11px;text-transform:uppercase;line-height:1.5em;margin-top:40px;text-decoration:none;}
#body{width:100%;border:#099 thin groove;}
#body p
{
margin:0 auto 10px auto;
}
p.text{color:#060;border:6px groove #060;padding:5px 10px;width:700px;}
</style>
</head>
<body>
<div class="wrapper purple">
<div class="top"> </div>
<div class="content">
<div id="body">
<div class="header">
<ul class="menubar white" >
<li class="menu">
<div class="menu_title" id="redbar">lundi</div>
<a href="#" class="text purple">Pourquoi <br />tous les jours</a>
</li>
<li class="menu">
<div class="menu_title" id="redbar">mardi</div>
<a href="#" class="text purple">produits <br />alimentaires</a>
</li>
<li class="menu">
<div class="menu_title" id="redbar">mercredi</div>
<a href="#" class="text purple">produits<br />non-alimentaires</a>
</li>
<li class="menu">
<div class="menu_title" id="redbar">jeudi</div>
<a href="#" class="text purple">tout<br />comprendre</a>
</li>
<li class="menu">
<div class="menu_title" id="redbar">vendredi</div>
<a href="#" class="text purple">trouvez nos<br />produits</a>
</li>
<li class="menu">
<div class="menu_title" id="redbar">samedi</div>
<a href="#" class="text purple">contactez-nous</a>
</li>
<li class="menu">
<div class="menu_title" id="bluebar">dimanche</div>
<a href="#" class="text purple">j'aime</a>
</li>
</ul>
</div>
<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>
Hope this helps!
加载中,请稍侯......
精彩评论