如何使我的導航和頁眉真正達到100％的寬度？

-2

我的網站的麻煩是，我希望導航和標題從屏幕的一側延續到另一側。導航從我的頁面的最左側到屏幕的最右側，但不會到達屏幕的左側，頁眉僅與頁面重疊很小一點。如何使我的導航和頁眉真正達到100％的寬度？

如果有人能告訴我如何解決這些問題，我很樂意。這裏是我的網站的CSS：

/* BACKGROUND */ 

body { 
background-color:#339999; 
background-attachment: fixed; 
} 

*{ 
margin:0; 
padding:0; 
} 

img { 
border:0; 
} 

/* AREA */ 

#wrapper { 
margin:0 auto; 
width:950px; 
background:#ffffff; 
font-size:1.20em; 
} 

/* HEADER */ 

#header { 
margin-top: 40px; 
height: 150px; 
padding: 20px 30px; 
width: 100%; 
} 

/* PAGE */ 

#content { 
min-height:400px; 
padding:23px; 
text-align:justify; 
line-height:1.5; 
} 

/* FOOTER */ 

#flexifooter{ 
width: 950px; 
background: #339999; 
padding: 10px 0px 0px 0px; 
} 

/* MENU */ 

#menu { 
position: fixed; 
clear: both; 
top: 0; 
width: 100%; 
color: #ffffff; 
height: 35px; 
padding-top: 1px; 
float: left; 
display: inline; 
background-color: rgba(1, 1, 1, 0.8); 
color: rgba(1, 1, 1, 0.8); 
} 

#menu { 
height:35px; 
line-height:34px; 
padding:0 10px; 
} 

/* MENU TEXT */ 

#menu ul { 
list-style-type:none; 
} 

#menu li { 
float:left; 
} 

#menu li a { 
padding:0 15px; 
display:block; 
color:#ffffff; 
font-size: 13px; 
margin-right:0px; 
} 

#menu a { 
padding-left: 15px; 
padding-right: 15px; 
text-decoration: none; 
list-style: none; 
display: inline; 
} 

#menu a:hover { 
color: #339999; 
} 

#navigation a:hover, a:visited { 
color: #339999; 
} 

/* HEADINGS & HEADER */ 

h2 { 
    font-size:1.75em; 
    font-weight:normal; 
    color: #6CC7DC; 
    margin: 10px 0; 
    line-height:1.5; 
    } 

#header { 
font-size:2.5em; 
letter-spacing:1px; 
} 

#header, #header a { 
color:#6F6F6F; 
font-style:italic; 
font-weight:normal; 
} 

/* SCROLLBAR */ 

body { 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 
overflow-x: hidden; 
} 

::-webkit-scrollbar { 
width: 3px; 
height: 10px; 
} 

::-webkit-scrollbar-track-piece { 
background-color: #339999; 
} 

::-webkit-scrollbar-thumb:vertical { 
height: 50px; 
background-color: #FFFFFF; 
} 

/* PREVENTING UNDERLINED LINKING */ 

a:hover, a:visited, a:link, a:active { 
text-decoration: none; 
}

來源

2014-01-07 user2452856

沒有HTML我們不能真正看到的問題是什麼，還粘貼了整個CSS是不必要的，因爲這個問題是在標題內。 – Kiee

有幾件事情，如果你使用HTML5，你可以使用頭元素，並設置其CSS來100％的寬度和高度，你想使用的任何高度。看我下面的例子。擁有HTML將最終幫助你。

HTML

<header> 
     <nav> 
     </nav> 
</header>

CSS

header { 
    width: 100%; 
    height: 5em; 
}

http://jsfiddle.net/cornelas/8RXD2/

來源

2014-01-07 17:40:33 Cam

我已經改變了它，但它的左側是相同大小的標題和正文：（ – user2452856

）您可以將您的html發佈到jsfiddle或codepen嗎？此外，您的元素嵌套在父元素中（不包括body標籤）。 – Cam

如何使我的導航和頁眉真正達到100％的寬度？

回答

相關問題