PDA

View Full Version : Positioning Footer Text



kyllle
Oct 15th, 2008, 10:16 AM
Hi all,

Iv created a page were I require the Copyright footer text to be positioned dead center at the bottom of the page, iv tried position relative; bottom etc but not gettin the required result, can anyone offer some advice on how this can be achieved?

http://www.glen-lodge.co.uk/testing/stu.html

Also could anyone provide me with good information on how to create image rollovers with just pure css?

Many Thanks

abduraooft
Oct 15th, 2008, 10:39 AM
Clear your floats and apply a min-height:100% to the main container(you need to use some hacks for IE though).

Follow http://bonrouge.com/2c-hf-fixed.php, which applies and explains it well.

kyllle
Oct 15th, 2008, 10:53 AM
Hi Abdul,

Iv cleared the floats and added min-height but the footer text doesnt seem to move from the center of the page?

abduraooft
Oct 15th, 2008, 11:13 AM
Updated your link?

kyllle
Oct 15th, 2008, 11:15 AM
http://www.glen-lodge.co.uk/testing/stu.html

abduraooft
Oct 15th, 2008, 01:58 PM
Applying a border (say, 1px solid #fff) around #mainContainer would give you the reason.

Change you CSS like

html, body{
height:100%;
}
#mainContainer {
...
/*height:100%;*/
min-height:100%;
}
Now read www.positioniseverything.net/easyclearing.html to se how to clear your floats properly.

kyllle
Oct 15th, 2008, 03:18 PM
Hi Abdul,

Thanks for showing me that, can i ask am I doing the right thing by using relative position to move the .jpg down the page or should I be using a different technique??

I also cant understand why the footer text remains above this jpg as Iv cleared everything i feel needs cleared?

abduraooft
Oct 15th, 2008, 03:29 PM
Try


#mainContainer {
border:2px solid #FFFFFF;
margin:25px auto 0pt;
min-height:100%;
padding:0pt;
position:relative;
text-align:center;
width:850px;
}
#siteLink {
border:2px solid #FFFFFF;
float:right;
margin-right:18px;
}
#footer {
bottom:0;
left:0;
clear:both;
position:absolute;
text-align:center;
width:100%;
}