I have looked at some of the questions on this site regarding this and still can’t get it to work. Thank you for any help.
How do I stretch the footer all the way across and down?
Thanks
Hi,
If you are talking about the 6-8px spacing on the left, right, and bottom of the footer then that is the default margin on the body element.
Just remove the margin/padding from the body and then add margins to your navbar if you don’t want it on the edge of the screen.
[B]body[/B] {
font-family: "Times New Roman", Times, serif;
font-size:25px;
/* color:#006;*/
background-color: #99CCff;
letter-spacing:-1px;
[COLOR=Blue]margin:0;
padding:0;[/COLOR]
}
Thank you so much, Ray. Worked like a charm.
Hi,
You have some big problems with your html, let’s get that cleaned up first before going any further.
You have given the doctype three times and opened and closed the body twice.
At the top of the page you have this, cut out everything that I highlight in red below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Speaking.css" />
<title>Penny Colman - Resources - Thanksgiving: The True Story</title>
[COLOR=Red]</head>
<body>
<a name="header" id="header"></a>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>[/COLOR]
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="Speaking.css" />
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js"></script>
</head>
<body>
At the bottom of the page you have this, once again cut out the red.
[B]<map name="Map">[/B]
<area shape="rect" coords="583,365,727,397" href="http://us.macmillan.com/BookCustomPage.aspx?isbn=9780805082296&m_type=1#excerpt" target="_self" alt="Read Excerpt">
</map>
[COLOR=Red]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Penny Colman - Footer</title>
<link rel="stylesheet" type="text/css" href="Speaking.css" />
</head>
<body>[/COLOR]
[B]<div class="footer">[/B]
<a href="#header"><img id="back_to_top" alt="Back to top" src="images/back_to_top.png"/></a>
<div id="footer_content">. </div>
<div id="footer_leftcol" class="footNoteTextRightWhite">Contact Penny at: pennycolman@gmail.com </div>
<div id="footer_centercol" class="footNoteTextRightWhite">© Penny Colman 2010</div>
<div id="footer_rightcol" class="footNoteTextRightWhite">Penny Colman 4059 West 59th St., <br />Ste.687 Engelwood, NJ</div>
[B]</div>[/B]
[COLOR=Red][COLOR=Black]</body>
</html>[/COLOR]
</body>
</html>[/COLOR]
Get that corrected on your live page and we can go forward.
I am so sorry, but I am still having problems with this thing, I added content and now it won’t stay at the bottom. I have played around with the margin-height, margin-botton and min-height and no luck. Please help. It’s probably simple, that’s why I feel like an idiot. :headbang:
Unfortunate, but probably easy footer problem
css
.footer {
width:100%;
height:80px;*
position: relative;
bottom: 0;
max-width:100%;
background: #006 url('/images/footer-background.gif');
border-top: 2px solid #ffffff;
}
#footer_leftcol {
float: left;
width: 30%;
height: 100%;
padding: 0 20px;
margin-right: 10px;
border-right: 1px dotted #C4CCC9;
text-align: left;
}
#footer_centercol {
float: left;
width: 30%;
height: 100%;
padding: 0 15px;
margin-right: 10px;
border-right: 1px dotted #ffffff;
text-align: left;
}
#footer_rightcol {
float: right;
width: 30%;
height: 100%;
padding: 0 10px;
text-align: left;
}
#back_to_top {
position: absolute;
right: 15px;
top: -2px;
border:0;
}
Try giving the .footer “overflow:hidden” :). To contain the floats.
Thoguh as Rayzur said, that page is a complete mess. <link> tags in the body, extra tags, make sure the page is validating 
Yes, I was coming back to say that it really needs a complete rebuild.
It is really just a simple one-column layout and that table can be done away with completely.
Most of the css in your stylesheets is just font styling for the different classes, it could probably be salvaged and copied over.
I saw that code, but I thought it was reading that way because of the includes? the code is not like that when I am in dreamweaver. I thought it is showing the code for all three pages? menu.php, and footer.php are includes.
Go to view source and look at the complete mess generated :). That should give you an idea of what we are seeing.
That’s what I am talking about. I see it. I thought it was supposed to be that way because of the includes. What are you saying? lol.
you overflow:hidden worked btw.
I am just saying that the source is cluttered with bad markup and I thought you were saying that PHP includes are probably doing it and your dreamweaver isn’t showing it lol.
Glad it worked :).
[ot]
Sorry, I’ve not slept much in hte past month, I need to get open to the napping suggestion lol :x[/ot]
Why is it showing up like that? nighty night.
I used [ ot ][/ ot ] tags :). Off topic.
no, lol. I mean why is my code showing up all screwy like that?
Well I don’t know how the code looks in dreamweaver, but if you are doing PHP includes or something like that, then that code is being copied to the file you are including, or rather, the included file is being copied to the file you are calling it to, and then that could potentially be the problem.
How does your dreamweaver code show it?
Hi Ryan,
I hope you had a good nap. Thank you so much for helping me.
here is how the code looks in dreamweaver. I’ll get rid of that table later.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Speaking.css" />
<title>Penny Colman - Resources - Thanksgiving: The True Story</title>
</head>
<body>
<a name="header" id="header"></a>
<?php include("menu.php"); ?>
<table width="67%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="294" valign="top">
<div align="center"><img src="thanksgiving_pic.jpg" alt="Thanksgiving Picture" width="756" height="470" border="0" usemap="#Map"></div> </td>
</tr>
</table>
<table width="90%" border="0" align="center" >
<tr>
<td height="713"><div align="center">
<p align="center"><span class="booksTitleText">Thanksgiving: The True Story</span></p>
<span class="mainDescriptionText">Using firsthand accounts, poetry and folk songs, magazines, newspapers, historic markers, and interviews, Colman paints a fascinating picture of this cherished holiday and its changing meanings throughout American history. Get ready to delve into the rich past of Thanksgiving in a historical tour de force that uncovers the true story.</span><br>
<br>
<p align="center"> <span class="speakingBold">Reader Responses:</span></p>
<p align="left"><br>
<span class="mainDescriptionText">I thoroughly enjoyed reading <span class="bookTitlesTextSm">Thanksgiving; The True Story</span>. As usual, your writing flows so smoothly through all of the facts. It feel as though you and I are sitting side-by-side, and you are telling me a story. Wonderful--and fascinating.</span><br>
<span class="bylineText">Patricia Bandre', Professor, Reading Education, University of Arkansas at Little Rock</span><br>
</p>
<p align="left"><span class="mainDescriptionText">Hurrah! Hurrah! Hurrah! As a teacher, I see this book as being about Thanksgiving, but also about historical thinking.
This is a great contribution.<br>
</span><span class="bylineText">Myra Zarnowski, Professor, Elementary and Early Childhood Education, Queens College, the City University of New York</span></p>
<p align="left"><span class="mainDescriptionText">Your book is going to be required reading for my students and has all the makings of being a landmark text! </span><br>
<span class="bylineText">Janice V. Kristo, Professor of Reading and Language Arts, University of Maine </span></p>
<p align="left">
<span class="mainDescriptionText">I loved <span class="bookTitlesTextSm">Thanksgiving: The True Story</span>. I am always nervous when anyone uses the word "true" in relation to history, but this is an excellent example of the kind of truth historical inquiry might inform--tentative based on available evidence, open to new information, inviting new information, going for complexity and ambiguity.</span><br>
<span class="bylineText">Linda Levstik, Professor Social Studies, University of Kentucky </span></p>
<p align="left"><span class="mainDescriptionText">Your work is incredible . . . . The whole time I was reading I was marveling over your research . . . . I plan to give a copy to our 7th grade history teacher. . . . She can devise some really good lessons using the book. I like the way you use original sources with this age group. I was never taught to do that until I got to college! </span><br>
<span class="bylineText">Dot Emer, middle school librarian, Saint Andrew's School, Boca Raton, Florida<br>
<br>
</span>
<span class="mainDescriptionText">Congratulations for another great achievement! I enjoyed reading it, and especially liked the way you make the actual doing of history so much a part of the story, describing how you did the research and what that entails.</span><br>
<span class="bylineText">Molly Hoben, co-founder Minnesota Women’s Press and BookWomen<br></span>
<span class="mainDescriptionText"><br>
I love history books that make history into something that can be questioned and explored. . . .A must have middle school nonfiction and a great choice for history classrooms.</span><em><br>
</em><span class="bylineText">propernoun.net<br><br></span><span class="mainDescriptionText">Drawing on historical research and the results of a written questionnaire, Colman first retraces the growth of Thanksgiving as a national holiday and then surveys the wide range of customs and mouthwatering comestibles associated with the celebration. Both tracks are illuminating.</span><br>
<span class="bylineText">Booklist</span><br>
<br>
<span class="mainDescriptionText">Colman blends factual evidence with the results from the surveys in each chapter leaving the reader to determine the truth.</span><br>
<span class="bylineText">Voya</span><br>
<br>
</p>
<hr align="center" >
<table width="324" border="0">
<tr>
<td width="100"><a href="massasoit.php" target="_self"><img src="images/Books/imagesFromBooks/Massasoit_thumbnail.jpg" width="220" height="221"></a></td>
<td width="100"><a href="buell.php" target="_self"><img src="images/Books/imagesFromBooks/BuellHale_thumbnail.jpg" alt="" width="220" height="221"></a></td>
<td width="100"><a href="footballTK.php"><img src="images/Books/imagesFromBooks/footballthk_thumbnail.jpg" width="220" height="221"></a></td>
<td width="10"><a href="thkpostcard.php"><img src="images/Books/imagesFromBooks/thkpostcard-Thumbnail.jpg" alt="" width="220" height="221"></a></td>
</tr>
</table>
<p class="mainDescriptionText" align="left">I do the picture research and take photographs for my books. For Thanksgiving: The True Story, I took a road trip to Massachusetts and New Hampshire, in addition to tracking down visual images and documents in archives, museums, libraries, and online. <span class="bookTitlesTextSm">Thanksgiving: The True Story </span> has 60 images, a chart, and a map.
<p class="footNoteText">Images appear in black and white in the book. </p>
<p class="mainDescriptionText">Images from <span class="booksTitleText"> Thanksgiving: The True Story</span>.<br>
<span class="mainDescriptionText">click images to view</span></p>
<hr align="center">
<p><span class="quotesText">Check out a <a href="qa.php#thanksgiving2">Q & A</a> and <a href="thanksgiving-resources.php">Classroom Connections </a><br> for <span class="booksTitleText"> Thanksgiving: The True Story</span>.</span><br> </p>
<p align="center" class="mainDescriptionText">Download or Print a <a href="Thanksgiving-Reading Guide.pdf" target="_self" class="mainDescriptionText4Links">Thanksgiving reading guide</a></p>
<a href="Did you know.pdf" target="_self" class="mainDescriptionText4Links">Click here to learn fascinating facts about Thanksgiving</a>
<p class="footNoteText">This book is available from your local bookstore or online at:<br>
<span class="footNoteText">•<a href="http://search.barnesandnoble.com/Thanksgiving/Penny-Colman/e/9780805082296/?itm=5" target="_self"> Barnes and Noble </a>• <a href="http://www.amazon.com/jThanksgiving-True-Story-Penny-Colman/dp/0805082298/ref=sr_1_4?ie=UTF8&s=books&qid=1218265086&sr=1-4" target="_self">Amazon.com </a>•</span></p>
<p><a href="javascript:history.go(-1)" target="_parent"><img src="images/back2bookspage.jpg" alt="Return to Penny's Books" width="110" height="24" border="0"></a><br>
</p>
</div> </td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="583,365,727,397" href="http://us.macmillan.com/BookCustomPage.aspx?isbn=9780805082296&m_type=1#excerpt" target="_self" alt="Read Excerpt">
</map>
<?php include("footer.php"); ?>
</body>
</html>
Post the code for footer.php and menu.php. They seem to be the trouble parts your adding in
here is the footer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Penny Colman - Footer</title>
<link rel="stylesheet" type="text/css" href="Speaking.css" />
</head>
<body>
<div class="footer">
<div id="topimg">
<a href="#header"><img id="back_to_top" alt="Back to top" src="images/back_to_top.png"/></a>
</div>
<div id="footer_content">. </div>
<div id="footer_leftcol" class="footNoteTextRightWhite">text goes here </div>
<div id="footer_centercol" class="footNoteTextRightWhite">© Penny </div>
<div id="footer_rightcol" class="footNoteTextRightWhite">4059 West 59th St., <br />Ste.687 Engelwood, NJ</div>
</div>
</body>
</html>
here’s the menu. should I remove all the html body tags from these? that could be the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="Speaking.css" />
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">
</script>
</head>
<body>
<img name="AuthorPageNormal_r1_c1" src="images/authorPage/AuthorPageNormal_r1_c1.jpg" width="440" height="93" border="0" id="AuthorPageNormal_r1_c1" alt="Penny Colman - Award Winning Author" />
<div id="ddtopmenubar" class="mattblackmenu" >
<ul>
<li><a href="http://www.pennycolman.com">Home</a></li>
<li><a href="podcasts.php" rel="ddsubmenu1">Meet Penny Colman</a></li>
<li><a href="http://pennycolman.blogspot.com" >Blog</a></li>
<li><a href="books.php" >Books </a></li>
<li><a href="qa.php">Question & Answers </a></li>
<li><a href="resou.php" >Resources for Teachers</a></li>
<li><a href="speaking.php" rel="ddsubmenu3">Speaking Engagements</a></li>
<li><a href="podcasts.php" >Audio & Video Podcasts</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<p style="margin-top: 2em">
<!--HTML for the Drop Down Menus associated with Top Menu Bar-->
<!--They should be inserted OUTSIDE any element other than the BODY tag itself-->
<!--A good location would be the end of the page (right above "</BODY>")-->
<!--Top Drop Down Menu 1 HTML-->
<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="awards1.php">Awards</a></li>
<li><a href="bib1.php">Bibliography</a></li>
<li><a href="bio3.php">Biography</a>
<!-- <ul> -->
<!-- <li><a href="#">Sub I</a></li>-->
<!-- <li><a href="#">Sub Item 3.2a</a></li> -->
<!--<li><a href="#">Sub Item 3.3a</a></li> -->
<!-- <li><a href="#">Sub Item 3.4a</a></li> -->
<!-- </ul> -->
<!-- </li> -->
<!--<li><a href="http://www.pennycolman.blogspot.com">Blog</a></li>-->
<li><a href="links.php">Favorite Links</a>
<!--<li><a href="podcasts.php">Audio & Video Podcasts</a></li>-->
<li><a href="photoGallery.php">Photo Gallery</a>
<li><a href="art2.php">Speeches, Essays & Articles</a></li>
</ul>
<!--Top Drop Down Menu 2 HTML-->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Item 1b</a></li>
<li><a href="#">Item 2b</a></li>
<li><a href="#">Item Folder 3b</a>
<ul>
<li><a href="#">Sub Item 3.1b</a></li>
<li><a href="#">Sub Item 3.2b</a></li>
<li><a href="#">Sub Item 3.3b</a></li>
<li><a href="#">Sub Item 3.4b</a></li>
</ul>
</li>
<li><a href="#">Item 4b</a></li>
<li><a href="#">Item Folder 5b</a>
<ul>
<li><a href="#">Sub Item 5.1b</a></li>
<li><a href="#">Item Folder 5.2b</a>
<ul>
<li><a href="#">Sub Item 5.2.1b</a></li>
<li><a href="#">Sub Item 5.2.2b</a></li>
<li><a href="#">Sub Item 5.2.3b</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 6b</a></li>
</ul>
<!--Top Drop Down Menu 3 HTML-->
<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="calendar.php">Calendar</a></li>
</ul>
</body>
</html>
here’s the menu. should I remove all the html body tags from these? that could be the problem.
When includes are called into a page from within the opening and closing body tags then the only html that they can contain is html that is valid in that position. They can’t contain more doctypes and head elements.
Your main template page should contain the doctype, header elements and full page structure (plus all the css files needed for your includes). The includes would then just contain the html for that section only.
e.g.
<div class="footer">
.... footer html content etc..
</div>
So that when you run the page and view source you end up with a well structured and valid page.
Bingo! That is why it’s jacked up. Thank you all so much.