HTML 960gs - 页脚消失答案

【问题标题】：HTML 960gs - Footer DisapearingHTML 960gs - 页脚消失
【发布时间】：2013-02-20 17:39:08
【问题描述】：

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

我使用 960.gs 来保持一切整洁，并使用宽度为 100% 的包装器，因此如果需要，我可以从 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

如果您能帮上忙，我将不胜感激，我一直在努力解决这个问题。

-乔丹

【问题讨论】：

嗨，乔丹，欢迎来到 StackOverflow。的一部分丢失。你能提供一个网址到你的页面，以便我检查它吗？
抱歉回复晚了，我必须创建一个子域并上传文件。这是页面。 mockup.jordanmoss.co.uk
好的，首先，尝试验证您的代码：validator.w3.org/… || 21 个错误，9 个警告 ||我会帮你的。最后一点：你的页脚#footer_area 没有任何样式。
在调试方面我不是最好的，但我遵循了验证器的步骤，但最终出现了更多错误。更不用说它看起来完全一样了。
我之前有没有给你写过：没有任何东西可以为你的#footer_area 容器设置样式。

标签： html css background-image containers 960.gs

【解决方案1】：

我明白了！

看看你的 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)

继续

【讨论】：