Clicky

How do I get the footer here http://www.cygen.com/oldtimeypb/ to stretch all the way across the bottom?

asked 12/11/2011 10:33

brettr's gravatar image

brettr ♦♦


5 Answers:
Upgrade to a strict doctype like:
1:
2:
3:
4:
5:
6:
7:
8:
9:
<!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>
	<title></title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />


Rationalize the excessive structue around the footer.  It should not require multiple div tags.

Apply the width style to the p tags.

Cd&
link

answered

COBOLdinosaur's gravatar image

COBOLdinosaur

Thanks.  Can you provide an example of how you would simplify the footer but keep the same affect?
link

answered 2011-12-12 at 06:48:52

brettr's gravatar image

brettr

The html should look something like this:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
<div id="footer">
          <p>
             | <a href="http://www.cygen.com/contact.php">Contact Us</a>
          </p>

          <p class="address">
            Copyright &copy; Cygen, 2011. All rights reserved.
          </p>
    </div>
 
   
And the stylesheet like this:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
#footer {
   clear:both;
	bottom: 0;
    width:100%
	height:54px;
	background-color: #303032;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #303032), color-stop(1.0, #2c2c2e));
	background: -moz-linear-gradient(top, #303032, #2c2c2e);
}

#footer p {
    width:100%
	text-align: center;
	color:#c2c9d3;
	font-size: 10pt;
	text-shadow: black 0px 1px 1px;
	margin-top: 12px;
	margin-bottom: 1px;
}

#footer a {color:#ebedf0;}

#footer .address {
	margin-top: 1px;
	padding-top: 1px;
	font-size: 8pt;
	color:#6d7177;
	text-shadow: #202123 0px 1px 1px;
}



Cd&
link

answered 2011-12-12 at 07:02:29

COBOLdinosaur's gravatar image

COBOLdinosaur

Great.  That worked well.

One last thing, do you know how I can get the edges of the footer to go all the way against the sides of the browser window?
link

answered 2011-12-12 at 07:40:01

brettr's gravatar image

brettr

The margin auto on outerwrapper, wrapper, and main are creating a gap, and forcing the body to be slightly wider than 100%.




Cd&
link

answered 2011-12-12 at 07:53:59

COBOLdinosaur's gravatar image

COBOLdinosaur

Your answer
[hide preview]

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Tags:

Asked: 12/11/2011 10:33

Seen: 215 times

Last updated: 12/12/2011 02:52