Question
I've been working on my personal website recently and come across this problem, the problem being that my footer disappears whenever I preview the site.
I used the 960.gs to keep everything nice and tidy and used a wrapper with a width of 100% so I could extend off the 960 grid if needed (for full size bars ect).
The main content is within this wrapper in the container_16 grid, except for the top nav bar.
HTML Jordan Moss - Portfolio -->
https://stackoverflow.com/questions/14986367
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian</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;
}
the background looks fine in preview but when I open the browser to see how it looks, this is what happens. http://gyazo.com/ab7c9762330c9d4a1c8ec3345aa8493d
The footer background simply disappears.
Another problem I've been having is also the fact that the two items in the footer region won't align central.
Just for the purpose of helping you understand what It's all supposed to look like here's the mockup.
http://gyazo.com/928b4af4618df4d2c97fa38d3dcf9381
If you could help I would be extremely thankful, I've been up all night and day trying to fix this problem.
-Jordan
Solution
I got it!
Take a look at your css/style.css ( errors in the css file )
Last lines :
#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;
}
An error in your .css file disable your last declaration (#footer_area)
Carry on
