CSS Footer & Improvments

HTML & CSS
1

Hi,

i have a footer div in my webpage, but i was just wondering what is the best/most common way to position it?

Also, given my full CSS code, how could i make it better/more compatable? Please note, the navigation ul are placeholders and pagedesc div, is used with my nav links describing what each page is showing. The main functionality i have for this site works fine, i simply need some advice on my CSS which is why i am not giving any php code just a test page so you can see the state it is in and css, hope that clear.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	      <title> Shanghai Trip 2010</title>
	      <link rel="stylesheet" type="text/css" href="style_V1.css" />
		
	      <meta http-equiv="content-type"
				content="text/html; charset=utf-8"/>
	</head>
	<body>
	      <div id="wrapper">
		     <div id="header">
			    <h1> SHANGHAI TRIP 2010 </h1>
		     </div> 
        
		     <div id="navigation">
			    <ul>
				   <li><a href="index.php?link=home">Home</a></li>
				   <li><a href="index.php?link=shanghaizoo">Shangai Zoo</a></li>
				   <li><a href="index.php?link=chengtemple">Cheng Huang Temple</a></li>
			    </ul>
		     </div>
		     
		     <div id="content">
			    
			    <div class="pagedesc">
                    <p>
                                          
                    </p>
   
			    </div>
			    
			    
			    
			    <div class="imageswrapper">
			             
			    </div>
			     
		     </div> 
        
		     <div id="footer">
			    FOOTER
        
		     </div> 
	      
  
	      </div>
		 
			 
			  
		    
		 
	</body>
</html>



/*
 Date created: 7th October 2010
 Last Modified: 15th October 2010
*/
body
{
    background: #f3f2f3;
    color: #000000;
    font-family: Trebuchet MS, Arial, Times New Roman;
    font-size: 12px;

}

#wrapper
{
    background: red;
    /* first value represents top/bottom, while second represents left/right margin */
    margin: 0px auto; 
    width: 900px;
    height: 1500px;
}

#header
{
    background: #663300;
    /** width: 900px; **/
    height: 100px;
}



#navigation
{
    overflow: hidden;
    background: #3366CC;
    /** width: 900px; **/
    height: 50px;
}
#navigation ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#navigation li
{
    display: block;
    float: left;
    padding: 2px;
     
}

#content
{
     
    background: #993300;
    width: 900px;
    /** height: 1350px; **/
} 

 .pagedesc
{ 
    width: 900px;
    /** height: 100px; **/
    font-size: 14px;
    padding: 0px;
    background-color: blue;
    
}

.pagedesc p
{
    margin: 0;
    border: 0;
    padding: 0px;
    
}
 
.imageswrapper
{
    margin: 0;
    border: 1px solid #330066;
    /** height: 1200px; **/
    /** width: 900px; **/
    overflow: hidden;
    text-align: center;
    float: left;
}


.thumb
{
    margin: 3px;
    border: 1px solid #ff8000;
    padding: 0px;
    height: auto; 
    text-align: center;
    float: left;
}

.thumb img
{
   display: inline;
    margin: 5px;
    border: 1px solid red;
    padding: 0px;
 
}

.thumbdesc
{
    text-align: center;
     border: 1px solid black;
}


#footer
{
    background: pink;
    height: 50px;
    width: 900px;
    
}
2

As a rule of thumb the only rules that you want to apply to the html element are to remove the margins and padding and to set height:100%. So in the first example the code could be this:


html, body {
    height:100%;
    margin:0;
    padding:0
}

Your example should be like this:


html, body {   
    height: 100%;
    margin: 0;
    padding: 0;
}    
body{
    background: #f3f2f3;
    color: #000;
    font-family: Trebuchet MS, Arial, Times New Roman;
    font-size: 12px;
}

The reason being that if you were applying a background repeating image then you would be applying it twice. Once on the body and once on the html element which is a waste. There are also other complications in that background placed on the body propogates to html anyway so you just don’t need to mess with the html element.

Also, i was told that i should get something called a CSS reset, is that important to have?

The faq explains resets and why you should or shouldn’t use them

Is it crucial for me to also have something called line-height?

Line-height is the space around the font and creates the gap between one line and the next. If you want text to be spaced wider apart then you would increase the line-height.

I usually set line height in the body element to 1.3:


body{line-height:1.3}

That is a unitless line height and passes a scaling factor to children who will then size the line depending on their parent’s font-size.

If you don’t explicitly set line-height then you will be left at the browsers default which may vary between browsers.

I read that using px to define the font size was not a good idea due to accessibility, if that is the case what would be the best/standard way of doing so?
Thanks
A big and complicated topic with too many aspects to answer quickly. The short answer is use ems but the long answer is read this and all the threads at the bottom as opinions differ on the details.

3

Thanks for the reply, that helps me out really good. Although i do have 1 or 2 questions i hope you can answer for me. In the sticky footer tread they use the following code:


html, body {
    height:100%;
}
html, body {
    margin:0;
    padding:0
}

while with mine:


html, body
{   
    height: 100%;
    margin: 0;
    padding: 0;
    background: #f3f2f3;
    color: #000000;
    font-family: Trebuchet MS, Arial, Times New Roman;
    font-size: 12px;
    

}

i only declared html,body once, is there difference between declaring twice? or should i have done the same? or is it to make it a little easier to read perhaps?

Also, i was told that i should get something called a CSS reset, is that important to have?

Is it crucial for me to also have something called line-height?
I read that using px to define the font size was not a good idea due to accessibility, if that is the case what would be the best/standard way of doing so?

Thanks

4

Hi,
The problem with the code you posted is the 1500px height on the #wrapper div. As you can see that has no effect on pushing the footer down, the wrapper just extends below the footer.

It’s never a good idea to set fixed heights on an element that contains dynamic or fluid content. You would want to use min-height to hold a page open at a specific height and then allow it to expand.

You could set the footer outside of the wrapper div and then center it with auto margins. That is the method used with sticky footer layouts. Or just use a sticky footer layout instead with min-height:100% on the wrapper div.


#footer
{
    background: pink;
    height: 50px;
    width: 900px;
    [B]margin:0 auto;[/B]
}


          [COLOR=DarkGreen]<!--end wrapper-->[/COLOR]</div>
            
            [B]<div id="footer">[/B]
                FOOTER
             [B]</div>[/B]

    </body>
</html>
5

thanks for the advice much appreciated indeed.