Petrolhead
Technical User
- Mar 13, 2009
- 27
I am new to CSS sheets and have been designing a personal site.
I am having trouble with an area of white space between the content div and the footer div.
I have tried setting the margins and padding to 0 but it hasn't worked.
Am I missing something obvious here?
I am having trouble with an area of white space between the content div and the footer div.
I have tried setting the margins and padding to 0 but it hasn't worked.
Am I missing something obvious here?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
<head>
<title>Personal Web Site - Thomas Irvine</title>
<meta name="description" content="Thomas Irvine: Personal Web Site">
<meta name="keywords" content="Mormon, LDS, Latter Day Saint, Gilberts Syndrome, Excel, VBA, Macro, Cycling, Lyreco, Personal Development,Sci-Fi, Cars, Engineering, Industrial Architecture">
<link rel="stylesheet" type="text/css" href="CSS/Thomas-Irvine.css">
<link rel="stylesheet" type="text/css" href="CSS/print.css" media="print" >
</head>
<body>
<div id="wrapper">
<div id="banner">
<div id="banner-text">
<span class="banner-title">Thomas Irvine . com</span>
<h1 class="banner-subtitle">Personal Website<sup style="font-size: 50%; position:relative; top:-8px;">©</sup></h1>
</div> <!-- banner-text -->
</div> <!-- banner -->
<div id="hmenu">
<div id="hnav">
<a href="Index.html">Home</a>
<a href="Blog.html">Blog</a>
<a href="Family.html">Family</a>
<a href="Work.html">Work</a>
<a href="Religion.html">Religion</a>
<a href="Cycling.html">Cycling</a>
<a href="Cars.html">Cars</a>
<a href="Engineering.html">Engineering</a>
<a href="IT.html">IT</a>
<a href="Sci-Fi.html">Sci-Fi</a>
<a href="Gilberts Syndrome.html">Gilbert's Syndrome</a>
<a href="Personal Development.html">Personal Development</a>
<a href="Contact.html">Contact</a>
</div> <!-- hmenu -->
</div> <!-- hnav -->
<div id="content">
<!-- Begin Main Page Content -->
<script language="JavaScript" type="Text/Javascript">
<!--
function Bookmark()
{
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) {
window.external.AddFavorite("[URL unfurl="true"]http://www.stevepavlina.com/","Thomas-Irvine[/URL] - Personal Website");
} else if (navigator.appName == "Netscape") {
window.sidebar.addPanel("Personal Development - Steve Pavlina","[URL unfurl="true"]http://www.stevepavlina.com/","");[/URL]
} else {
alert("Press CTRL-D (Netscape) or CTRL-T (Opera) to bookmark");
}
}
//-->
</script>
<!-- main content section -->
<h1>
Welcome
</h1>
<p>
Hello and welcome to my personal web site.
</p>
<p>
Be sure to <a href="javascript:Bookmark()"><b>bookmark this site</b></a>, so you can return to it.
</p>
<p>
More text goes here...
</p>
</div> <!-- content -->
<div id="clearer"> </div>
<div id="footer">
<p class="credits">
Copyright © 2009 by Thomas Irvine.<br />
<div class="credits1111">11:11</div>
</div> <!-- footer -->
</div> <!-- rap -->
</body>
</html>
body {
background: #CDC8B1;
color: #000;
font-family: Veranda, Sans-Serif;
text-align: center;
margin: 0;
padding-top: 15px;
padding-bottom: 15px;
}
#wrapper{
width: 80%;
background: White;
border: 1px solid #8B1A1A;
text-align: left;
margin-left: auto;
margin-right: auto;
padding: 0;
}
#banner{
background: #8B1A1A;
height: 110px;
border: 0;
margin: 0;
padding: 0;
text-align: center;
color: White;
}
#masthead-text
{
text-align: center;
font: normal normal 70%/120% Verdana, sans-serif;
padding-top: 12px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.banner-title{
font: normal bold 375% Veranda, sans-serif;
letter-spacing: 2px;
}
.banner-subtitle{
font: normal bold 140%/170% Verdana, sans-serif;
letter-spacing: 1px;
text-align: center;
color: white;
border: none;
padding: 0;
margin: 0;
}
#hmenu{
background: #B22222;
padding: 0;
margin: 0;
text-align: center;
color: white;
font:normal normal 70%120% Veranda, sans-serif
}
#hnav{
color: white;
border: 0;
padding: 5px;
margin: 0px;
}
#hnav a {
color: White;
text-decoration: none;
padding-left: 8px;
padding-right: 8px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
font-weight: Bold;
}
#hnav a:hover {
color: #ffff00;
background: #FF3030;
}
#content{
float: center;
padding-top: 20px;
padding-left: 25px;
padding-right: 25px;
background: #FFF8DC;
text-align: left;
}
#clearer {
clear: both;
height: 0;
}
#footer{
background: #8B1A1A;
}
.credits
{
clear: both;
background: #8B1A1A;
color: White;
font-size: 11px;
padding: 5px;
text-align: center;
margin-bottom: 0px;
}
.credits1111
{
background: #8B1A1A;
color: White;
font-size: 9px;
padding: 0px;
text-align: right;
margin-bottom: 0px;
}