CSS Footer help??

[kyllle]

Hey all,

a quick question, i was wondering if someone could provide me with a tutorial or help on how to create a footer that stretches the whole way across the webpage at 50px or so height and has the links centered on the page with font size 12px with a white background??

Thanks

Kyle

[macneato]

Hi Kyllle,

Quickly did a little script for you.

HTML

<div class="footer">
			<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="about_us.html">About Us</a></li>
			<li><a href="serviceshtml">Services</a></li>
			<li><a href="productshtml">Products</a></li>
			<li><a href="training.html">Training</a></li>
			<li><a href="our_team.html">Our Team</a></li>
			<li><a href="contact_us.html">Contact Us</a></li>
			</ul>
			</div>

CSS

.footer ul{
width:100%;
font: bold 12px Verdana;
text-align: center;
height: 50px;
background:#FFF;
}

.footer ul li{
list-style: none;
display: inline;

}

.footer ul li a{
padding: 8px 2.5em;
text-decoration: none;
color: #dcdcdc;
line-height: 50px;
}

.footer ul li a:hover{
color: #000;
}

That should do the trick for you.

[kyllle]

Hi again, I have added the css to add a footer but have encountered some problems, first of all the footer sits at the top of the page and secondly the gray doesnt stretch the whole length of the viewed page instead it is set at the length of the wrapper and I also cant see the links, how can I sort these problems out? :s

here is a link to my test page http://www.glen-lodge.co.uk/mytester.html

Thanks for your help

Kyle

p.s can the main links at the head of the page be centered in the wrapper without padding etc??

[macneato]

Hi,

1. Add the footer outside the wrapper DIV.
2. The reason why its at the top is because of positioning you using (absolute) which I just dont use. Simply add a margin-top tag to the Footer class.

.footer ul{
width:100%;
background-color:#dedede;
font-size:12px;
height:50px;
color:#000;
text-align:center;
margin-top:90%;

}

[MidiMagic]

There is no way provided in html or xhtml to position something at the bottom of the screen. And there is no way to make a full screen display that works on all screens and browsers.

The Internet does not work that way. It has no idea of what a screen is. It starts filling in at the top, and expands downward until all of the material is rendered. The width of the display is considered, but not its height.

The reason for this is twofold:

1. There are too many different kinds of screens, each with its own screen resolution. What overflows into scrolling on one screen will be scrunched up in the top of another screen.

2. There are modes of rendering that do not use video displays. A screen, and screen positions, are meaningless to a speech unit for the blind.

You are trying to sew a button on a custard pie.