Что не так с этой страницей?

-2

Меню и текст внизу находятся в теге тега div #. Я установил для него границу зеленого цвета. Меню и нижний текст должны были быть в пределах этой зеленой границы, но они не ... Что не так с кодами? Почему они не подходят к границе?Что не так с этой страницей?

<!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 #" -> Нет, они не являются. – ZippyV

@ ZippyV: Lol, это невозможно. – Midas

Посмотрите на код. #body не содержит меню. – ZippyV

Привет Я сделал несколько изменений в код, в частности, я заменил использование ясный: как; css и используется переполнение: скрыто; вместо.

Также рассмотрите возможность использования класса = "redbar" вместо id = "redbar", поскольку класс является правильным тегом для использования при применении определенного стиля к нескольким элементам на одной странице.

Также, как упоминалось 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

Что не так с этой страницей?

ответ

Смежные вопросы