我的网站设计存在问题。
每当我的浏览器全屏(最大化)时,我的标题和标题都是全宽的。 虽然,一旦我开始调整我的浏览器屏幕大小,我的标题和标题下面就会乱七八糟。
我已在此图像中说明了油漆中的以下问题:
在下图中,调整了浏览器屏幕的大小。如您所见,内容停留在应该(固定)的位置。虽然,标题和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