4 replies to this topic

[Fez_uk]

I'm learning Css and i've been trying to make a extra area called 'footer' but I want it to be a certain font and size as everything else on the template. But I don't know how to create it.

heres the code:

body{
margin-top: 0px;
text-align: center;
background-color: #999999;
}

/**Container To Hold The Layout**/
#container{
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 600px;
background-color: #BFFFBF;
border: 1px solid #ffffff;
}

/**Banner Styles**/
#banner{
height: 50px; /*CHANGE THIS TO THE HEIGHT OF YOUR BANNER*/
background-image: url(banner.png) !important;
background-repeat: no-repeat;
}
#banner h3{
margin: 0px;
padding: 0px;
font-size: 20px;
font-weight: normal;
}

/**Links Styles**/
#left{
width: 150px;
float: left;
}
.links{
padding: 5px 5px 0px 5px;
color: #598059;
font-family: Arial, sans-serif;
font-size: 11px;
}

/**Content Styles**/
#right{
width: 450px;
float: right;
}

.content{
padding: 5px 10px 0px 10px;
color: #598059;
text-align: justify;
font-family: Arial, sans-serif;
font-size: 11px;
}

<-- I would like it somewhere here -->

}

If anyone could help me with this it would be a great weight of my mind.

Thanks

[sdesign]

Place your font settings within the body element within your CSS file. That will then cover all of your text throughout the whole document.

body { 
	color: #000000; font-size: 9pt; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #000; }

[Althanis]

Create a new div named footer like this:

#footer {
clear: both;
font-size: 9px;
}

The "clear: both" will ensure that both the right side and the left side dont have anything, so it will push it self below both of them and you'll get a footer.

Not: This will only work when the content for you page takes up an entire screen or more. You can see exactly what I mean here: http://www.tobiasbuc...alrain/news.htm

I've used it in that site. However I need help when it comes to content that wont take up and entire page, when this happens the footer is displayed at the bottom of whatever divs you have, that is, in the middle of the page.

Can anyone help?

[Stu]

can you not do something like this:

Quote

p.footer{
color: black;
style: etc;
}

and then in your footer div:

Quote

<p class="footer">Text Goes Here</p>

edit: oh i see you want the footer code too? do you have the site somewhere online so we can see where about you want it on the page... or a screen shot?

edit2: moved to the correct forum

[Fez_uk]

Thanks for the help, Understanding ti much more. Css is comming in quite handy.
The website is http://www.w3bjock3ys.com/css if any of you want to still look at the codes.

Thanks!