...

View Full Version : Why won't my footer go to the bottom and centered?



Mccall101
05-15-2010, 07:09 PM
Also why won't my content change to white ?


body{
text-align: center;
background: #000;
font: 16px Helvetica, arial, sans-serif;
}
* {
margin: 0;
padding: 0;
border: black;
}
#container {
width: 1024px;
margin: 0 auto;
}
#header {
width:1024px;
height:229px;
background:url(images2/GLheader.jpg) no-repeat;
}
#nav {
width: 1024px;
height: 107px;
background:url(images2/GLnav.jpg) no-repeat;
text-align: center;
border: 10px;
}
li {
list-style-type: none;
display: inline;
padding: 0 32px;
text-decoration: none;
font: 18px/80px Helvetica;

}
#content {
position:absolute;
width: 1024px;
height: 800px;
border-width:30px;
background:#FFFFFF ;

}


#footer {
position:absolute;
padding-left:20%;
width:1024px;
height:45px; /* Height of the footer */
background-image: url(images2/GLfooter.jpg);
background-repeat: repeat-y;
color: white;

}


}

h2{
text-align: left;
text-indent: 0.5cm;
padding-top: 20px;
color: #000;
text-decoration: none;
font-family: Arial Rounded MT Bold;

}


#left {
float: left;
width: 600px;
}

#right {
margin: 0 0 0 600px;
padding: 20px 0 0 0;


}



a {
Color: blue;
text-decoration: none;
}

h3{text-align: left;
text-indent: 0.5cm;
padding-top: 20px;
color: white;
text-decoration: none;
font-family: Arial Rounded MT Bold;
}



.box {
width: 302px;
height: 400px;
margin: 10px auto 0;
background: url(images2/Fan.jpg);
margin-top:5%;
Margin-left:5%;
border-style: solid;
border-width: 1px;
border-color: black;
}

.box h3{
text-align: center;
text-indent: 2.0cm;
color: black;
}

.box p{
text-align: center;
padding-top: 5px;
margin-left:5%;
margin-top:50%;
}

.box a{
color: blue;
text-decoration: underline;

margin-right:25%;

}

#form{
padding-left: 20%;
}

#content p{
color: black;
font-weight: bold;
font: Arial;
}

#content a{
color:blue;
}

#nav a{
color:white;
}

met
05-15-2010, 07:18 PM
would need to see your page but you're using absolute positioning (poorly)



#footer { position:absolute; bottom:0; left:0; }


is the ~kind~ of thing you're after but that wont look right anyway.

content change to white? what does this mean?
teh background? font colour?



#content { background:white; } /*background*/

#content p{
color: white; /* font */
font-weight: bold;
font: Arial;
}

scoop_987
05-15-2010, 07:20 PM
Change #footer to:



#footer {
position:fixed;
bottom: 0px;
margin: auto;
width:1024px;
height:45px; /* Height of the footer */
background-image: url(images2/GLfooter.jpg);
background-repeat: repeat-y;
color: white;
}


And change #content to:



#content {
position:absolute;
width: 1024px;
height: 800px;
border-width:30px;
background-color:#FFFFFF ;

}


Also, make sure you are using id rather than class in your html.

Mccall101
05-15-2010, 07:30 PM
My header and nav are perfect I just can't seem to get the content background color to change to white. The footer advice helped but it isn't pushed down as far as I'd like. This is probably because the content isn't showing up. The footer isn't centered. It moved down but it's against the left side of the page.

met
05-15-2010, 07:32 PM
really need a link, or your entire CSS+ html to help any further.

scoop_987
05-15-2010, 07:33 PM
Did you use my footer id? if so, it should have fixed it to the bottom of the window, regardless of where the scroll bar is.

Mccall101
05-15-2010, 07:39 PM
really need a link, or your entire CSS+ html to help any further.

http://www.stylishknockouts.com/Grandlegacy.htm

a client job

scoop_987
05-15-2010, 07:43 PM
Theres no content??

And as for the footer, add this:

padding-top: 15px;

Mccall101
05-15-2010, 07:47 PM
I haven't got anything to put in the content yet. I need to make the background of the content div black. I just got into web design again after about 6 months hiatus.

scoop_987
05-15-2010, 07:51 PM
Ahh ok...

To change the background-color to back, change it to #000 instead of #ffffff

Mccall101
05-15-2010, 07:56 PM
I meant the background color of the content area. i don't understand what's going on with it. I tried the bg color in the #content but it didn't work.

Mccall101
05-15-2010, 07:58 PM
I just put my content as a image in css and still had no effect

met
05-15-2010, 08:00 PM
your markup is broke




<ul id="nav">
<ul>
<li><a href="#">Stylish Knockouts</a></li>
<li><a href="#">Episodes</a></li>
<li><a href="#">Characters</a></li>

<li><a href="#>PRR Timeline</a></li>
</ul>



<div id="content">
<p>In progress</p>

<!--end content--></div>



close that tag.

Mccall101
05-15-2010, 08:04 PM
Thanks man. Only thing I need now is to get the footer to look right

scoop_987
05-15-2010, 08:06 PM
What do you want to do with it? make the text in the middle?

met
05-15-2010, 08:09 PM
just change the width now from 100% to 1024px; and job done.

but it's still approx 24px too wide for the ~majority~ of internet users if you look at resolution stats. (i.e you will get horizontal scrollbars)

Mccall101
05-15-2010, 08:11 PM
Yeah, I'd like for the footer to be inline with the rest of the page. When I type text in the content div, it pushes the content section down.

Mccall101
05-15-2010, 08:14 PM
I fixed the content p problem. Everything is good but the footer

scoop_987
05-15-2010, 08:17 PM
100% makes it "fluid"

By fluid, i mean that regardless of resolution of the person's screen who is viewing the page, it will not have scroll bars.

And as for making it inline, Use relative setting for the position.

Mccall101
05-15-2010, 08:19 PM
relative worked but now it's directly under my header

Mccall101
05-15-2010, 08:43 PM
can someone help me fix this footer?

Mccall101
05-15-2010, 08:48 PM
just change the width now from 100% to 1024px; and job done.

but it's still approx 24px too wide for the ~majority~ of internet users if you look at resolution stats. (i.e you will get horizontal scrollbars)

nothing changed

met
05-15-2010, 08:52 PM
look, as i told you in the PM, you essentially want a sticky footer

presumably you want the footer to be at the bottom of the page if there is no content, but also to "expand" if there is content, giving the impression of 100% height.

go read the link, here it is again http://www.cssstickyfooter.com/

or changed position:relative to position:fixed and remove the height on #content.

Mccall101
05-15-2010, 09:02 PM
I apologize but none of that fixed it. check out the link again to see what it looks like. I'm not trying to sound disrespectful, I've just been building for 4 hours now and I'm just trying to get the splash page fixed so I can be done.

met
05-15-2010, 09:08 PM
you haven't implemented the sticky footer correctly, your mark up is rather messed up - #footer inside an UL.

read it again carefully, it will do what i think you want.

Mccall101
05-15-2010, 09:30 PM
my footer isn't in a ul tag. All I want is my footer to align under my content and not under my nav bar

Mccall101
05-15-2010, 09:37 PM
I couldn't understand the link but I did something and now it works perfectly. check it out

Excavator
05-16-2010, 05:57 PM
Hello Mccall101,
I think all you did was give #content a height.
Have you seen your site in FireFox?
Have you tried validating it yet??? See the links about validation in my signature line below.


Try it like this -
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
font: 100% "Comic Sans MS";
background: #fffccf;
}
* {
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
width: 1024px;
margin: 0 auto -45px; /* the bottom margin is the negative value of the footer's height */
position: relative;
background: #0f1715;
overflow: auto;
font-size: 0.8em;
}
#header {
width: 1024px;
height: 229px;
background: url(http://www.stylishknockouts.com/images2/GLheader.jpg);
}
#nav {
height: 107px;
width: 1024px;
background:url(http://www.stylishknockouts.com/images2/GLnav.jpg);
text-align: center;
border: 10px;
}
li {
list-style-type: none;
display: inline;
padding: 0 32px;
text-decoration: none;
font: 18px/80px Helvetica;
}
#footer {
height: 45px;
width: 1024px;
position:absolute;
left: 0;
bottom: 0;
background: url(http://www.stylishknockouts.com/images2/GLfooter.jpg);
text-align: center;
line-height: 45px;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<ul id="nav">
<li><a href="#">Stylish Knockouts</a></li>
<li><a href="#">Episodes</a></li>
<li><a href="#">Characters</a></li>
<li><a href="#">PRR Timeline</a></li>
</ul>
<div id="content">
<p>Under Construction</p>
<!--end content--></div>
<div id="footer">
<p>&amp;copy www.stylishknockouts.com 2009</p>
</div>
<!--end container--></div>
</body>
</html>

That's based on this method (http://nopeople.com/CSS/full-height-layout/index.html).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum