Sat, 2013-09-07 09:06
I've been stressing out why my coding has a gap between the content and the footer.. please look and give feedback!! Thanks -allison
http://www.allisons-help.com/tables1.html
Here is the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="HTML, Help, Tutorials, CSS, Javascript, Java, Website"> <meta name="description" content="Step by step on how to create your own website, learning HTML, CSS, Javascript, Java, and lots more. Also other fun tutorials on how to create your template."> <meta name="author" content="Allison Powell"> <title>Allison's Help ~ Tables</title> <link href="Ahcss2.css" rel="stylesheet" /> </head> <body> <div id="pagewrapper"> <div id="header"> <img src="http://www.allisons-help.com/allisonshelplogo.png" width="599px" height="104px"> <div id="nav"> <ul><b>[</b> <li><a href="http://www.allisons-help.com/" title="Allison's Help">Home</a> <b>|</b></li> <li><a href="http://www.allisons-help.com/learn.html">Learn</a> <b>|</b></li> <li><a href="http://www.allisons-help.com/Goods/">Goods</a> <b>|</b></li> <li><a href="http://www.allisons-help.com/site.html">Site</a> <b>|</b></li> <li><a href="http://www.allisons-help.com/sitemap.html">Map</a> </li> <b>]</b> </ul> </div> <!-- end of nav --> </div> <!-- end of header --> <div id="content"> <div id="content2"> <div class="text"> <h1>Html</h1> <h2>Tables</h2> <p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p> </div> <!-- end of test --> <div id="footer"> </div> <!-- end of content2 --> </div> <!-- end of content --> </div> <!-- end of footer --> </div> <!-- end of pagewrapper --> </body> </html>
Here is the css:
body {font-family: 'Palatino Linotype', 'Times New Roman', serif; font-size: 14pt; background-color:#E3DEF3; color:#000000; padding:0; margin:10px auto; width:599px;} a:link{text-decoration:underline; color:#aaa;} a:visited{text-decoration:underline; color:#aaa;} a:hover{text-decoration:underline; color:#aaa; background-color:#E3DEF3;} #header{border-top:4px #000 dotted;} #nav {background-color:#7092BE; padding:4px; text-align:center; margin-top:-.50em; border:1px #7092BE; border-bottom-left-radius:15px; border-bottom-right-radius:15px;} #pagewrapper {margin:0 auto; height:100%;} #content{background-image:url('http://www.allisons-help.com/allisonshelpcontenttop.png'); width:599px; height:173px; border:1px #7092BE; } #content2 { top:168px; width:599px; position: absolute;} .text {background-image:url('http://www.allisons-help.com/allisonshelpcontentmid.png'); margin-top:10px; padding-top:10px; padding-left:20px; padding-right:20px; line-height:16px;} #footer {background-image:url('http://www.allisons-help.com/allisonshelpcontentbottom.png'); width:599px; height:96px; left:-2px; text-align:center; position: absolute;} #nav a:link {color:#fff; } #nav ul {margin:0; padding:0; list-style:none;} #nav li {display:inline; margin:.50em; padding:0;} p {font-family: 'Palatino Linotype', 'Times New Roman', serif; font-size:14pt; color:#424242; padding:0px; margin-top:0px; } b {font-family: 'Palatino Linotype', 'Times New Roman', serif; font-size:14pt; color:#8336b7; } ul {font-family: 'Palatino Linotype', 'Times New Roman', serif; font-size:14pt; color:#424242; } h1 {font-family: 'Palatino Linotype', 'Times New Roman', serif; color:#8336b7; letter-spacing:8px; text-align: center; padding:0px; margin:.5em; background-color:#7092BE; } h2 {font-family: 'Palatino Linotype', 'Times New Roman', serif; color:#ddd; padding:0px; margin:3px; border-top-style:dotted; border-color:#e63a9f; } h3 {font-family: 'Palatino Linotype', 'Times New Roman', serif; color:#8336b7; padding:0px; margin:0px; } h4 {font-family: 'Palatino Linotype', 'Times New Roman', serif; color:#9BFAAE; padding:0px; margin:0px; background-color:#9bbac8; border-bottom-style:dotted; border-color:#e63a9f; } .hexcolors { width:500px; font-family:Georgia; color:#aaa; font-size:18px; text-align:center; letter-spacing:2px; background-color:#000; margin-left: auto; margin-right: auto; } .hexcolors th { background-color:#2a2a2a; } .hexcolors tr { margin:0px; padding:10px; border:#000;
Sat, 2013-09-07 09:09
#1
uhh try this link
uhh try this link
Sat, 2013-09-07 19:06
#2
Multiple spacing issues
The spacing you're asking about is probably due to a top margin on the footer p element. Other spacing issues are due to using absolute positioning (a no-no for major layout elements) and an un-sane line height,e.g. .text {line-height: 16px;}.
Using fixed heights to support your background images for color and border is another opportunity for spacing error.
cheers,
gary