這個頁面有什麼問題？

-2

菜單和底部的文本在div＃body標籤中。我爲此設置了一個綠色邊框。菜單和底部文本應該位於此綠色邊框內，但它們不是。代碼有什麼問題？他們爲什麼不適合邊界？這個頁面有什麼問題？

<!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>

這裏的截圖 http://jsbin.com/apizu4

來源

2011-06-05 Vimal Basdeo

「菜單和底部的文本位於div＃body標籤中」 - >否，它們不是。 – ZippyV 2011-06-05 11:29:20

@ZippyV：哈哈，那是不可能的。 – Midas 2011-06-05 11:33:45

看看代碼。 #body不包含菜單。 – ZippyV 2011-06-05 11:38:48

您好我做了你的代碼進行一些變化，尤其是我已經取代了明確的用途：兩者; CSS和使用溢出：隱藏;代替。

也可以考慮使用class =「redbar」而不是id =「redbar」，因爲class是將特定樣式應用於同一頁面上的多個元素時使用的正確標記。

同樣如由ZippyV所提到的，菜單並未包含在id =「body」標記中，所以我也爲您移動了它！

下面是修改後的代碼：

<!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>

希望這有助於！

來源

2011-06-05 11:56:18 Ben

這個頁面有什麼問題？

回答

相關問題