不能讓菜單欄縮放到屏幕大小

Question

我想根據屏幕大小縮放菜單欄。我試過float,@media等，但它沒有正常工作。我的13英寸全屏看起來不錯。但是，一旦我縮小它，菜單欄會向右移動，但頁面元素很好。菜單位於底部#navsite。

CSS

* { 
    margin:0; 
    padding:0; 
} 

html{ 
    min-width:770px; 
} 

body{ 
    background:white url(candy/background.png) 0 0 repeat; 
text-align:center; 
} 


/*=====[ Set up container divs and add background tiles ]=====*/ 

#pageheadContainer, 
#contentContainer, 
#footContainer{ 
width:100%; 
} 

#pageheadContainer{ 
    background:transparent url(candy/pageheadBackground.png) 0 100% repeat-x; 
} 

#contentContainer{ 
    background:#F7F7F7 url(candy/contentBackground2.png) 50% 100% repeat-y; 
    float:left; 
} 

#footContainer{ 
    background:transparent url(candy/footBackground.png) 0 0 repeat-x; 
    clear:both; 
} 

#pagehead, 
#content, 
#foot{ 
    width:770px; 
    margin:0 auto; 
    position:relative; 
text-align:left; 
} 


#pagehead{ 
    height:130px; 
} 

#foot{ 
    height:150px; 
} 

#pagehead{ 
    background:transparent url(candy/pageheadBackground2.png) 0 100% no-repeat; 
} 

#content{ 
    background:transparent url(candy/contentBackground.png) 0 0 no-repeat; 
    min-height:300px; 
    _height:300px; 
} 

#foot{ 
    background:transparent url(candy/footBackground2.png) 100% 0 repeat-x; 
} 

#article{ 
    width:450px; 
    float:left; 
    padding:40px 0 20px 0; 
    margin-left:25px; 
} 

#subContent{ 
    display:inline; 
    width:180px; 
    float:left; 
    padding:25px 0 20px 0; 
    margin-left:30px; 
    color:#8B725A; 
    font-size:.9em; 
} 


#foot ul{ 
    position:absolute; 
    top:45px; 
} 

#foot li{ 
list-style-type:none; 
} 

#foot #foot1{ 
    width:200px; 
    position:absolute; 
    left:300px; 
} 

#foot #foot2{ 
    width:200px; 
    position:absolute; 
    left:570px; 
} 

#foot #pageTop{ 
    position:absolute; 
    left:482px; 
    top:-40px; 
} 

#foot #pageTop a{ 
    display:block; 
    width:26px; 
    height:26px; 
    text-indent:-9999px; 
    text-decoration:none; 
    background:transparent url(candy/pageTop.png) 0 0 no-repeat; 
    float:left; 
} 


body{ 
    font:normal 62.5%/1.8em Arial, Helvetica, sans-serif; 
} 

#content ul{ 
    margin:0.8em 0 0.6em 1em; 
    padding-left:1em; 
    list-style-type:square; 
} 

ol{ 
    margin:0.8em 0 0.6em 2em; 
    padding-left:1em; 
    list-style-type:lower-roman; 
} 

blockquote{ 
    margin:0.8em 0 0.6em 1em; 
    padding-left:1em; 
    font-style:italic; 
    border-left:4px solid #E2D7CF; 
} 

img{ 
    padding:2px; 
    border:1px solid #F2F2F2; 
} 

#content{ 
    font-size:1.25em; 
} 

p{ 
    margin:0.3em 0 0.6em 0; 
} 

a{ 
    color:#9D6141; 
    font-weight:bold; 
    text-decoration:none; 
} 

a:hover{ 
    background:#9D6141; 
    color:#FFE; 
} 

#article{ 
    line-height:1.7em; 
    color:#635141; 
} 

h1, 
h2, 
h3, 
h4{ 
font-family:Georgia, Times New Roman, Times, serif; 
} 

h2{ 
    color:#98533B; 
    margin-bottom:.5em; 
    line-height:1.7em; 
    font-size:1.7em; 
} 

h3{ 
    margin:0.8em 0 0.6em 0; 
    font-size:1.3em; 
} 

h4{ 
    margin:0.8em 0 0.6em 0; 
    font-size:1.1em; 
} 


#subContent h2{ 
    font-size:1.3em; 
} 

#subContent h3{ 
    font-size:1.1em; 
} 


/* menu navigation */ 
.navsite {width: 845px; height: 35px; z-index: 100; 
margin-bottom: 3px; margin-left: 155px;}  

/* menu bar */ 

#headermenu {width: 800px; height: 35px; z-index: 100; position: absolute} 

#headermenu ul {   
    text-align: center; 
    list-style: none; 
    line-height: 20px; 
    font-size: small; 

} 


#headermenu a { 
    display: block; 
    width: 8em; 
    color: white; 
    text-decoration: none; 
    padding: 0.3em; 
    white-space: nowrap; 

} 

#headermenu li {   
    float: left; 
    padding: 0; 
    width: 8em;      
    background-color: #B67357;   /* medium brown */ 
} 
#headermenu li ul {    /* second level lists */ 
position: absolute; 
    z-index:500; 
    left: -999em; 
    height: auto; 
    width: 8em; 
    border-width: 0.25em; 
    margin: 0;  
} 

#headermenu li:hover ul, #nav li.shfhover ul { 
    left: auto; 
    z-index:100; 
} 

#content { 
    clear: left; 
    color: #ccc; 
} 

@media screen and (max-width: 770px) 
{ 
    #headermenu { 
    width:770px; 
    margin:0 auto; 
    position:relative; 
    text-align:left;} 
} 

Answer 1

所以你的問題是你絕對從瀏覽器的左側定位菜單。所以當你調整它的大小時，它會移動。

如果你想整個網站爲中心，但流體可以用以下

width:100%; max-width:400px; margin:auto; 

這裏有一個Fiddle