div tam genişliğe kapsamaz

<!DOCTYPE html> 
 
    <html lang="en-us"> 
 
    <head> 
 
    <title>Golden Ratio</title> 
 
    <style> 
 
    html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
    } 
 
    .wrapper { 
 
    background-color:#DFE2DB; \t 
 
    margin: 0 auto; 
 
    padding: 10px; \t 
 
    width: 1080px; 
 
\t border-radius: 10px; 
 
    border: 5px solid #fff; 
 
\t box-shadow: 7px 7px 5px #888888; 
 
    } 
 
    .banner{ 
 
    border: 5px solid #558C89; 
 
    height: 200px; 
 
    } 
 
    .content_area{ 
 
    float:left; 
 
    width:750px; 
 
    margin: 20px 0 20px 0; 
 
    padding: 10px; 
 
    height:400px; 
 
    border: 2px solid #D9853B; 
 
    } 
 
    .sidebar{ 
 
    float:right; 
 
    width:250px; 
 
    height:400px; 
 
    margin: 20px 10px; 
 
    padding: 10px; 
 
    border: 2px solid #2B2B2B; 
 
    } 
 
    footer{ 
 
    clear:both; 
 
    width:auto; 
 
    color:#fff; 
 
    height:40px; 
 
    padding:10px; 
 
    text-shadow:0.1em 0.1em #E9E581; 
 
    text-align:center; 
 
    border: 3px solid #fff; 
 
    } 
 
    .announcement_section{ 
 
    height:40px; 
 
    border: 2px solid #4499cc; 
 
    } 
 

 
    #nav ul ul { 
 
\t display: none; 
 
    } 
 

 
    #nav ul li:hover > ul { 
 
\t \t display: block; 
 
    } 
 
    #nav ul{ 
 
\t background: #efefef; 
 
\t background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
\t background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
\t background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
 
\t box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
 
\t padding: 0 20px; 
 
\t border-radius: 10px; 
 
\t list-style: none; 
 
\t position: relative; 
 
\t display: inline-table; 
 
    } 
 
    #nav ul:after { 
 
\t \t content: ""; clear: both; display: ; 
 
    } 
 
    #nav ul li { 
 
\t float: left; 
 
    } 
 
    #nav ul li:hover { 
 
\t \t background: #4b545f; 
 
\t \t background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
\t \t background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
\t \t background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
 
     } 
 
     #nav ul li:hover a { 
 
\t \t \t color: #fff; 
 
     } 
 
\t 
 
     #nav ul li a { 
 
\t \t display: block; padding: 25px 40px; 
 
\t \t color: #757575; text-decoration: none; 
 
     } 
 
     #nav ul ul { 
 
\t background: #5f6975; border-radius: 0px; padding: 0; 
 
\t position: absolute; top: 100%; 
 
     } 
 
     #nav ul ul li { 
 
\t \t float: none; 
 
\t \t border-top: 1px solid #6b727c; 
 
\t \t border-bottom: 1px solid #575f6a; 
 
\t \t position: relative; 
 
     } 
 
     #nav ul ul li a { 
 
\t \t \t padding: 15px 40px; 
 
\t \t \t color: #fff; 
 
     } \t 
 
     #nav ul ul li a:hover { 
 
\t \t \t background: #6699aa; 
 
     } 
 
     #nav ul ul ul { 
 
\t  position: absolute; left: 100%; top:0; 
 
     } 
 

 
     </style> 
 
     </head> 
 
     <body bgcolor="#bbccdd"> 
 
     <div class="wrapper"> 
 
     <div class="banner"> 
 
     <h1>banner here</h1> 
 

 
     </div> 
 
     <div id="nav"> 
 
\t  <ul> 
 
\t \t <li><a href="#">Home</a></li> 
 
\t \t <li><a href="#">Registration</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">Registration FAQs</a></li> 
 
\t \t \t \t <li><a href="#">How to register</a></li> 
 
\t \t \t \t <li><a href="#">Register now</a> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><a href="#">register1</a></li> 
 
\t \t \t \t \t \t <li><a href="#">register1</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li><a href="#">About Us</a> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">register2</a></li> 
 
\t \t \t \t <li><a href="#">register2</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li><a href="#">Contact Us</a></li> 
 
\t  </ul> 
 
      </div> 
 

 

 
      <div class="content_area"> 
 
      <h1>content area</h1> 
 

 
      </div> 
 
      <div class="sidebar"> 
 
      <h1>News here</h1> 
 

 
      </div> 
 
      <footer> 
 
      <p>All rights reserved</p> 
 
      </footer> 
 
      </div> 
 
      </body> 
 
      </html>

Kodum yukarıdaki gibi olan bir sorun: Benim gezinti çubuğu tam genişliğini kapsayacak şekilde genişletmek yok ama her şey gayet iyi çalışıyor. sorun ne olabilir. Genişliği denedim:% 100 nav, ama işe yaramaz gibi görünüyor. Bunu nasıl düzeltirim? Bu

kaynak

2016-04-11 lil

Bunu nasıl yaparım?

html, body { 
 
padding: 0; 
 
margin: 0; 
 
} 
 
.wrapper { 
 
background-color:#DFE2DB; 
 
margin: 0 auto; 
 
padding: 10px; 
 
width: 1080px; 
 
border-radius: 10px; 
 
border: 5px solid #fff; 
 
box-shadow: 7px 7px 5px #888888; 
 
} 
 
.banner{ 
 
border: 5px solid #558C89; 
 
height: 200px; 
 
} 
 

 
.content_area{ 
 
float:left; 
 
width:750px; 
 
margin: 20px 0 20px 0; 
 
padding: 10px; 
 
height:400px; 
 
border: 2px solid #D9853B; 
 
} 
 
.sidebar{ 
 
float:right; 
 
width:250px; 
 
height:400px; 
 
margin: 20px 10px; 
 
padding: 10px; 
 
border: 2px solid #2B2B2B; 
 
} 
 
footer{ 
 
clear:both; 
 
width:auto; 
 
color:#fff; 
 
height:40px; 
 
padding:10px; 
 
text-shadow:0.1em 0.1em #E9E581; 
 
text-align:center; 
 
border: 3px solid #fff; 
 
} 
 
.announcement_section{ 
 
height:40px; 
 
border: 2px solid #4499cc; 
 
} 
 

 
#nav ul ul { 
 
display: none; 
 
} 
 

 
#nav ul li:hover > ul { 
 
    display: block; 
 
} 
 
#nav ul{ 
 
background: #efefef; 
 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
 
border-radius: 10px; 
 
list-style: none; 
 
position: relative; 
 
display: inline-table; 
 
width:100%; 
 
padding:0px !important; 
 
} 
 
#nav ul:after { 
 
    content: ""; clear: both; display: ; 
 
} 
 
#nav ul li { 
 
float: left; 
 
} 
 
#nav ul li:hover { 
 
    background: #4b545f; 
 
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
 
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
 
    } 
 
    #nav ul li:hover a { 
 
     color: #fff; 
 
    } 
 

 
    #nav ul li a { 
 
    display: block; padding: 25px 40px; 
 
    color: #757575; text-decoration: none; 
 
    } 
 
    #nav ul ul { 
 
    background: #5f6975; border-radius: 0px; padding: 0; 
 
    position: absolute; top: 100%; 
 
    width:auto !important; 
 
    } 
 
    #nav ul ul li { 
 
    float: none; 
 
    border-top: 1px solid #6b727c; 
 
    border-bottom: 1px solid #575f6a; 
 
    position: relative; 
 
    } 
 
    #nav ul ul li a { 
 
     padding: 15px 40px; 
 
     color: #fff; 
 
    } 
 
    #nav ul ul li a:hover { 
 
     background: #6699aa; 
 
    } 
 
    #nav ul ul ul { 
 
    position: absolute; left: 100%; top:0; 
 
    }

<body bgcolor="#bbccdd"> 
 
    <div class="wrapper"> 
 
    <div class="banner"> 
 
    <h1>banner here</h1> 
 

 
    </div> 
 
    <div id="nav"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Registration</a> 
 
     <ul> 
 
      <li><a href="#">Registration FAQs</a></li> 
 
      <li><a href="#">How to register</a></li> 
 
      <li><a href="#">Register now</a> 
 
       <ul> 
 
        <li><a href="#">register1</a></li> 
 
        <li><a href="#">register1</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">About Us</a> 
 
     <ul> 
 
      <li><a href="#">register2</a></li> 
 
      <li><a href="#">register2</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact Us</a></li> 
 
     </ul> 
 
     </div> 
 

 

 
     <div class="content_area"> 
 
     <h1>content area</h1> 
 

 
     </div> 
 
     <div class="sidebar"> 
 
     <h1>News here</h1> 
 

 
     </div> 
 
     <footer> 
 
     <p>All rights reserved</p> 
 
     </footer> 
 
     </div> 
 
     </body>

kaynak

2016-04-11 07:49:13

çok teşekkürler thats tam olarak ben – lil

istediğini senin hep bekliyoruz.! –

tam olarak ne düzeltildi? aynı hata tekrar yapmak istemiyorum – lil

div tam genişliğe kapsamaz

cevap

İlgili konular