Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    85
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Question Almost there! Trying to keep footer on bottom

    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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello cmxsevenfoldxmc,
    I have a good full height layout demo here. View the source to see how it's done. Very simple.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    85
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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;
    		}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    cmxsevenfoldxmc (12-30-2009)

  • #6
    New Coder
    Join Date
    Jan 2008
    Posts
    85
    Thanks
    25
    Thanked 0 Times in 0 Posts
    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!!!

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by cmxsevenfoldxmc View Post
    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...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    cmxsevenfoldxmc (12-30-2009)

  • #8
    New Coder
    Join Date
    Jan 2008
    Posts
    85
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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!

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •