Almost there! Trying to keep footer on bottom

cmxsevenfoldxmc · 12-29-2009, 09:33 PM

Hi there,

I'm simply trying to keep the footer on the bottom without overlapping the stuff behind it (meaning, if the page is not filled up completely, then the footer is fixed on the bottom... But if there's a bunch of content, to see the footer, the user has to scroll down, so it avoids covering anything up).

Here's the page:
www.kimikal.com/collection.php

I appreciate the help!

Excavator · 12-29-2009, 09:51 PM

Hello cmxsevenfoldxmc,
I have a good full height layout demo here. View the source to see how it's done. Very simple.

Excavator · 12-29-2009, 09:59 PM

Your use of position:absolute; is causing problems...
This is a partial fix to get you started -

Code:

#container {
	min-height: 100%;
	margin: 0 auto -70px; /* the bottom margin is the negative value of the footer's height */
	position: relative;
	text-align: left;
}
#main_content {
	/*position:absolute;*/
	width:200px;
	padding-top:50px;
	margin-left:700px;
	color:#FFFFFF;
	font-size:14px;
}
#main_content_collection {
	/*position:absolute;*/
	width:650px;
	padding-top:50px;
	margin-left:230px;
	color:#FFFFFF;
	font-size:14px;
}
#footer {
	position: absolute;
	height:70px;
	bottom:0;
	width:100%;
	background-color:#FFFFFF;
}

cmxsevenfoldxmc · 12-29-2009, 10:08 PM

Quote:

Originally Posted by Excavator

Your use of position:absolute; is causing problems...
This is a partial fix to get you started -

Code:

#container {
	min-height: 100%;
	margin: 0 auto -70px; /* the bottom margin is the negative value of the footer's height */
	position: relative;
	text-align: left;
}
#main_content {
	/*position:absolute;*/
	width:200px;
	padding-top:50px;
	margin-left:700px;
	color:#FFFFFF;
	font-size:14px;
}
#main_content_collection {
	/*position:absolute;*/
	width:650px;
	padding-top:50px;
	margin-left:230px;
	color:#FFFFFF;
	font-size:14px;
}
#footer {
	position: absolute;
	height:70px;
	bottom:0;
	width:100%;
	background-color:#FFFFFF;
}

I see what you mean. I followed your partial fix. It seems to decapitate the left nav menu, but the footer goes down. It doesn't stay on the very bottom permanently yet, though.

I'll fiddle with it too on my end with your recommendations.

Thank you very much for your help! You're saving my life here

Excavator · 12-30-2009, 01:00 AM

Have a look at this -
markup

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kimikal Clothing</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	$(document).ready(function(){
		$(".nav_button").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
	
		$(".nav_button").hover(function(){
			$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
		},function(){
			$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
		});
	});
</script>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="scripts/pngfix.js"></script>
<style media="screen" type="text/css">
	#container {
		height:100%;
	}
	</style>
<![endif]-->
<style type="text/css">
body {
	background: url(http://www.kimikal.com/images/bg3.gif) no-repeat;
}
.style1 {
	font-size: 36px
}
</style>
</head>
<body>
<div id="container">
        <div id="header">
            <a href="index.php" id="kimi_logo"><img src="http://www.kimikal.com/images/kimikal_brand09_03-logo1.jpg" alt="kimikal" border="0" /></a>
        <!--end header--></div>
    <div id="nav">
      <div class="nav_buttonOFF" onmouseover="this.className='nav_buttonON'" onmouseout="this.className='nav_buttonOFF'"><a href="index.php">home</a></div>
        <div class="nav_buttonOFF" onmouseover="this.className='nav_buttonON'" onmouseout="this.className='nav_buttonOFF'"><a href="philosophy.php">philosophy</a></div>
        <div class="nav_buttonOFF" onmouseover="this.className='nav_buttonON'" onmouseout="this.className='nav_buttonOFF'"><a href="collection.php">collection</a></div>
        <div class="nav_buttonOFF" onmouseover="this.className='nav_buttonON'" onmouseout="this.className='nav_buttonOFF'"><a href="pressblog.php">press / blog</a></div>
        <div class="nav_buttonOFF" onmouseover="this.className='nav_buttonON'" onmouseout="this.className='nav_buttonOFF'"><a href="contact.php">make contact</a></div>
        <div class="nav_shopbuttonOFF" onmouseover="this.className='nav_shopbuttonON'" onmouseout="this.className='nav_shopbuttonOFF'">>> <a href="http://www.kimikal.com/store/">shop now</a></div>
  <!--end nav--></div>
<div id="main_content_collection">
    <img src="http://www.kimikal.com/images/collection/1.png" alt="description" width="500" height="750" id="kimi_pic" /> 
        <div id="collection_infobox">
            <div id="collection_infoboxcontent">
                <p>Hello</p>
                <p>Testing 1 2 3</p>
            <!--end collection_infoboxcontent--></div>
        <!--end collection_infobox--></div>
                <div id="collection_thumbs">
                    <div id="collection_thumbs_left"><img src="http://www.kimikal.com/images/kimikal_brand09-collection_arrow_left.png" alt="left" /></div>
                    <div id="collection_thumbs_imgs"></div>
                    <div id="collection_thumbs_right"><img src="http://www.kimikal.com/images/kimikal_brand09-collection_arrow_right.png" alt="right" /></div>
                <!--end collection_thumbs--></div>
<!--end main_content_collection--></div>
        <div id="footer">
            <div id="footer_links">English | French</div>
                <div id="footer_icons">
                    <img src="http://www.kimikal.com/images/kimikal_brand09_icon-fb.jpg" alt="facebook" width="28" height="29" />
                    <img src="http://www.kimikal.com/images/kimikal_brand09_icon-t.jpg" alt="twitter" width="28" height="29" />
                    <img src="http://www.kimikal.com/images/kimikal_brand09_icon-ms.jpg" alt="myspace" width="28" height="29" />
                    <br />
                <!--end footer_icons--></div>
        <!--end footer--></div>
<!--end container--></div>
</body>
</html>

and CSS

Code:

body, html {
	height: 100%;
	font: 14px Arial, Helvetica, sans-serif;
	color: #fff;
}
* {
	margin:0px;
	padding:0px;
}
#container {
	min-height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
	position: relative;
	text-align: left;
}
#header {
	height: 70px;
	border-bottom: 2px solid #000;
	position: relative;
}
	#kimi_logo {
		position: absolute;
		top:50px;
		left: 20px;
	}
#nav {
	width:200px;
	float: left;
	margin:50px 0 0 0;
}
			.nav_buttonON {
				padding:5px 5px 5px 20px;
				background:url(http://www.kimikal.com/images/kimikal_brand09_BTN.png) no-repeat ;
				margin-bottom:2px;
				width:100%;
				font-weight:bold;
				opacity:.95;filter: alpha(opacity=95); -moz-opacity: 0.95;
			}
			.nav_buttonOFF {
				padding:5px 5px 5px 20px;
				background:url(http://www.kimikal.com/images/kimikal_brand09_BTN.png) no-repeat ;
				margin-bottom:2px;
				width:100%;
				font-weight:bold;
				opacity:.70;filter: alpha(opacity=70); -moz-opacity: 0.70;
			}
			.nav_shopbuttonON {
				padding:8px 8px 8px 20px;
				background:url(http://www.kimikal.com/images/kimikal_brand09_BTN-shop.png) no-repeat;
				margin-top:50px;
				width:100%;
				font-weight:bold;
				opacity:.95;filter: alpha(opacity=95); -moz-opacity: 0.95;
			}
			.nav_shopbuttonOFF {
				padding:8px 8px 8px 20px;
				background:url(http://www.kimikal.com/images/kimikal_brand09_BTN-shop.png) no-repeat;
				margin-top:50px;
				width:100%;
				font-weight:bold;
				opacity:.70;filter: alpha(opacity=70); -moz-opacity: 0.70;
			}
#main_content_collection {
	width:1000px;
	padding: 50px 0;
	margin: 0 0 0 250px;
	overflow: auto;
	font-size:14px;
}
	#kimi_pic {float: left;}
#collection_infobox {
	height: 750px;
	width: 200px;
	margin: 0 0 0 600px;
	background: #999;
}
#collection_infoboxcontent {
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
}
#collection_infoboxbottom {
	background:url(http://www.kimikal.com/images/kimikal_brand09_boxbottom.png) no-repeat 0 0;
}
#collection_thumbs {
	width: 651px;
	height: 128px;
	float: left;
	margin-top: 20px;
	background: url(http://www.kimikal.com/images/kimikal_brand09-collection_box.png);
}
#collection_thumbs_left {
	width:42px;
	height:38px;
	margin-top:45px;
	margin-left:20px;
	float:left;
}
#collection_thumbs_right {
	width:42px;
	height:38px;
	margin-top:45px;
	margin-right:20px;
	float:right;
}
#collection_thumbs_imgs {
	margin-left:20px;
	margin-right:20px;
}
.bl {background: url(http://www.kimikal.com/images/bl.png) 0 100% no-repeat #211f20; width: 20em}
.br {background: url(http://www.kimikal.com/images/br.png) 100% 100% no-repeat}
.tl {background: url(http://www.kimikal.com/images/tl.png) 0 0 no-repeat}
.tr {background: url(http://www.kimikal.com/images/tr.png) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}
#footer {
	position: absolute;
	height:50px;
	bottom:0;
	width:100%;
	background:#fff;
}
#footer_icons {
	float:right;
	margin:10px;
	font-size:10px;
	color:#999999;
}
#footer_links {
	float:left;
	margin:10px;
	font-size:12px;
	color:#666666;
}
#footer_icons img {
	margin-left:5px;
}
		a:link {
			text-decoration: none;
		}
		a:visited {
			text-decoration: none;
		}
		a:hover {
			text-decoration: underline;
		}
		a:active {
			text-decoration: none;
			color: #FFFFFF;
		}

cmxsevenfoldxmc · 12-30-2009, 03:38 PM

Excavator,

It is looking beautiful!

Thank you very much for cleaning up my mess. I will use it as motivation for the rest of the pages and upcoming work.

My last thing is, now I'm trying to position the horizontal box on the bottom with the left and right arrows directly underneath the long box on the right (I'm sizing that box and the horizontal box to perfectly be the same height as the picture). So, in essence, both boxes to the right, and the picture to the left.

I'm already trying my best from my side.

Would you happen to know a quick way to do it? CSS usually imposes challenges that I can't decipher soon enough.

Thanks for all your help!!!

Excavator · 12-30-2009, 04:05 PM

Quote:

Originally Posted by cmxsevenfoldxmc

My last thing is, now I'm trying to position the horizontal box on the bottom with the left and right arrows directly underneath the long box on the right (I'm sizing that box and the horizontal box to perfectly be the same height as the picture). So, in essence, both boxes to the right, and the picture to the left.

You will have to make #main_content_collection wider so the long box has room, then you can margin it over the same way that #collection_infobox is.
That's going to make your site about 1500px wide or so...

cmxsevenfoldxmc · 12-30-2009, 04:19 PM

Quote:

Originally Posted by Excavator

You will have to make #main_content_collection wider so the long box has room, then you can margin it over the same way that #collection_infobox is.
That's going to make your site about 1500px wide or so...

Awesome. Got it working.

Just capped the size of the box with the arrows so it wasn't too wide.

Now on to populate the image gallery.

Thanks again!

Excavator · 12-30-2009, 04:32 PM

Looking good. Just for a visual, put a background color on to see how big your container is.
Try this -

Code:

#main_content_collection {
	width:1000px;
	padding: 50px 0;
	margin: 0 0 0 50px;
	overflow: auto;
	font-size:14px;
background: #fff;
}

Looks like that could be width: 900px; or less. That would make the x scrollbar appear a few pixels later.