使div全宽并固定

时间:2011-11-24 12:02:13

标签: html css fixed

我的网站设计存在问题。

每当我的浏览器全屏(最大化)时,我的标题和标题都是全宽的。 虽然,一旦我开始调整我的浏览器屏幕大小,我的标题和标题下面就会乱七八糟。

我已在此图像中说明了油漆中的以下问题:

enter image description here

在下图中,调整了浏览器屏幕的大小。如您所见,内容停留在应该(固定)的位置。虽然,标题和udnerheader不是。

我的HTML是:

        <div class="header">
        <div class="headercontainer">

         HEADER TEXT

        </div><!-- End Header Container -->
    </div><!-- End Header -->

    <div class="underheader">
        <div class="wrapper">
            <div class="undertext">
                <div class="row" style="margin:0px 0px 0px 0px;">
                    <div class="column grid_16">
                        <a href="?i=h"><div class="logo"></div></a>

                        <div class="menu">
                            <ul class="toolbar">
                                <li><a class="dark" href="#">Home</a></li>
                                <li><a class="dark" href="#">View Advertisements <span>5</span> </a></li>
                                <li><a class="dark" href="#">Dashboard</a></li>
                                <li><a class="dark" href="#">Forum</a></li>                       
                            </ul>  

                        </div>

                    </div><!-- End Grid_16 -->
                </div><!-- End Row -->
            </div><!-- End Under Text -->
        </div><!-- End Wrapper -->
    </div><!-- End Under Header -->

这是我的CSS:

  .header{        
    background: rgb(52,139,183); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(52,139,183,1) 0%, rgba(48,123,167,1) 45%, rgba(45,112,157,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(52,139,183,1)), color-stop(45%,rgba(48,123,167,1)), color-stop(100%,rgba(45,112,157,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(52,139,183,1) 0%,rgba(48,123,167,1) 45%,rgba(45,112,157,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(52,139,183,1) 0%,rgba(48,123,167,1) 45%,rgba(45,112,157,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(52,139,183,1) 0%,rgba(48,123,167,1) 45%,rgba(45,112,157,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(52,139,183,1) 0%,rgba(48,123,167,1) 45%,rgba(45,112,157,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#348bb7', endColorstr='#2d709d',GradientType=0 ); /* IE6-9 */      
    -moz-box-shadow: 0px 1px 4px #979797;
    -webkit-box-shadow: 0px 1px 4px #979797;
    box-shadow: 0px 1px 4px #979797;
    color:#fff;
    padding:10px;
    border-color:#000;
    border-width:0px 0px 1px 0px;
    border-style:solid;
    min-height:32px;    
}                     
.headercontainer{
    margin-left:6%;
    margin-right:6%;  
}              
.headertext{
    padding-top:10px;
    padding-left:15px;
    float:left;
} 
.underheader{
    margin-top:2px;
    background: rgb(249,249,249); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(224,224,224,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(224,224,224,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(224,224,224,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(224,224,224,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(224,224,224,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(249,249,249,1) 0%,rgba(224,224,224,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
    -moz-box-shadow: 0px 1px 3px #c1c1c1;
    -webkit-box-shadow: 0px 1px 3px #c1c1c1;
    box-shadow: 0px 1px 3px #c1c1c1;
    border-color:#aeaeae;
    border-width:0px 0px 1px 0px;
    border-style:solid;
}
.underheader .undertext{
    padding:10px;
}
.underheader .wrapper{
    background-image:url("../images/wrapper.png");
    background-repeat:no-repeat;
    background-position:center;  
}

我在这里做错了什么?我尝试过使用position:fixed

您可以在此处查看整个CSS:http://esobux.com/dm/css/style.css

0 个答案:

没有答案