0

我正在尝试根据屏幕尺寸缩放菜单栏。我已经尝试过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;}
}
4

1 回答 1

0

所以你的问题是你绝对定位浏览器左侧的菜单。因此，当您调整它的大小时，它会移动。

如果您希望整个站点居中但流畅，您可以使用以下内容

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

这是一个小提琴

于 2013-04-25T17:55:48.673 回答