HTML 960gs - 页脚消失

我最近在处理我的个人网站时遇到了这个问题，问题是每当我预览网站时，我的页脚就会消失。

我使用 960.gs 来保持一切整洁，并使用宽度为 100% 的 wrapper ，这样我可以在需要时扩展 960 网格(用于全尺寸条等)。

除顶部导航栏外，主要内容位于 container_16 网格中的包装内。

HTML 乔丹莫斯 - 投资组合 -->

</head>
<body>
<div class="wrapper">
<div class="topbar">
<div id="navmenu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Skills</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>
</div>

<div id="content" class="container_16">

<div id="header" class="grid_6 suffix_10">
<h4>Welcome to the Portfolio and Blog Of</h4>
</div>
<div class="clear"></div>
<div id="logo" class="grid_6 suffix_10">
<a href="#">
<img width="340" height="55" alt="Jordan Moss" src="img/logo.png"></a>
</div>
<div class="clear"></div>
<div id="picture" class="grid_4">
<a href="img/large/image-1.jpg" rel="lightbox" title="EyeSee2D">
<img width="220" height="220" alt="pic1" src="img/thumbs/art1.jpg"></a>
</div>

<div id="picture" class="grid_4">
<a href="img/large/image-2.png" rel="lightbox" title="Evil Within">
<img width="220" height="220" alt="pic2" src="img/thumbs/art2.jpg"></a>
</div>


<div id="picture" class="grid_4">
<a href="img/large/image-3.jpg" rel="lightbox" title="Colourful geometry">
<img width="220" height="220" alt="pic3" src="img/thumbs/art3.jpg"></a>
</div>


<div id="picture" class="grid_4">
<a href="img/large/image-4.jpg" rel="lightbox" title="Unique">
<img width="220" height="220" alt="pic4" src="img/thumbs/art4.jpg"></a>
</div>
<div class="clear"></div>

<div id="picture" class="grid_4">
<a href="img/large/image-5.jpg" rel="lightbox" title="M1911 Gun Slide">
<img width="220" height="220" alt="pic5" src="img/thumbs/art5.jpg"></a>
</div>


<div id="picture" class="grid_4">
<a href="img/large/image-6.png" rel="lightbox" title="Vormator Eye of Raa">
<img width="220" height="220" alt="pic6" src="img/thumbs/art6.jpg"></a>
</div>


<div id="picture" class="grid_4">
<a href="img/large/image-7.png" rel="lightbox" title="Earths Last Gasp">
<img width="220" height="220" alt="pic7" src="img/thumbs/art7.jpg"> </a>
</div>


<div id="picture" class="grid_4">
<a href="img/large/image-8.jpg" rel="lightbox" title="Fleeter 3D concept">
<img width="220" height="220" alt="pic8" src="img/thumbs/art8.jpg"></a>
</div>
<div class="clear"></div>

</div>

<div id="footer_area" class="container_16">

<div id="contact" class="grid_4">
<a href="#" class="contact_button"> Contact </a>
    <p class="subfooter_text">Have a query?<br>Don't be scared to contact me!</p>
</div>
<div id="divider" class="grid_2">
</div>

<div id="social" class="grid_4">
    <a href="#"><img src="img/social/linkedin.png"></a>
    <a href="#"><img src="img/social/vimeo.png"></a>
    <a href="#"><img src="img/social/twitter.png"></a>
    <a href="#"><img src="img/social/deviantart.png"></a>
    <a href="#"><img src="img/social/wordpress.png"></a>
        <p class="subfooter_text"> Find me on other sites </p>
</div>
<div id="divider" class="grid_2">
</div>
<div class="grid_4"> </div>
</div>
</div>
</body>
</html>

CSS

    #picture {
padding: 5px;
border: solid 1px #EFEFEF;
margin-left:4px; /* border + margin = 10px */
margin-right:4px; /* border + margin = 10px */
margin-bottom:50px;
}
#picture:hover {
    border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
        }

#logo {
margin-bottom:50px;
}



body {
background-color:#cccccc
}

#header {
padding-top: 20px;
padding-bottom: -20px;
}

#navmenu {
    float: right;
    position: relative;
    left: -24%;
    padding-top: 10px;
}

#navmenu ul {margin: 0; padding: 0; 
    list-style-type: none; list-style-image: none; }

#navmenu li {display: inline; }

#navmenu ul li a {text-decoration:none;  margin: 0px;
    padding: 5px 10px 5px 10px; color: white;
    border-radius: 6px;
;}

#navmenu ul li a:hover {color: black;
    background: white; }

.topbar {
height:40px;
color:white;
min-width: 960px;
width: 100%;
background: #111111; /* Old browsers */
background: -moz-linear-gradient(top, #111111 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111111), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111111 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111111 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #111111 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #111111 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}


.contact_button {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-style:normal;
    font-size:14px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}

.contact_button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}

.contact_button:active {
    position:relative;
    top:1px;
}

.subfooter_text {
padding-top: 10px;
color: #777777;
font-family:verdana;
}


#contact {
font-style:italic;
padding-top:70px;
text-align:center;
  }

#social {
font-style:italic;
padding-top:70px;
text-align:center;
  }

#divider {
margin-top:70px;
border-left:1px solid #000000; 
border-right:1px solid #404040; 
height:80px;
width: 1px;
position:relative;}


.wrapper {
margin-right:auto;
margin-left:auto;
position:static;
width:100%;
min-width:960px;
max-width:2560px; 
}


#content { 
margin-right:auto;
margin-left:auto;
position:static;
width:960px;
}


}
#footer_area {
    width: 100%;
    background-image: url(../img/footer_tile.png);
    background-repeat: repeat-x;
}

背景在预览中看起来不错但是当我打开浏览器查看它的外观时，就会发生这种情况。 http://gyazo.com/ab7c9762330c9d4a1c8ec3345aa8493d

页脚背景就这样消失了。

我遇到的另一个问题是页脚区域中的两个元素不会居中对齐。

只是为了帮助您理解这一切应该看起来像的模型。

http://gyazo.com/928b4af4618df4d2c97fa38d3dcf9381

如果您能提供帮助，我将不胜感激，我日以继夜地试图解决这个问题。

-乔丹

最佳答案

我明白了!

看看你的 css/style.css ( errors in the css file )

最后一行:

#content { 
    margin-right:auto;
    margin-left:auto;
    position:static;
    width:960px;
}

}   /* <-- w.t.h. ??  */

    #footer_area {
        width: 100%;
        background-image: url(../img/footer_tile.png);
        background-repeat: repeat-x;
}

您的 .css 文件中的错误禁用您最后的声明 (#footer_area)

继续

关于HTML 960gs - 页脚消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14986367/

HTML 960gs - 页脚消失

上一篇：html - CSS float 、溢出和绝对位置

下一篇：CSS 背景颜色不包括底部填充