Hi all,
Just been practicing my web design by trying to duplicate the look of existing sites, but i have a problem in that i have a margin above my footer and i can’t seem what the cause is. Any ideas please.
Here is the code
<!DOCTYPE html>
<html>
<head>
<title>Hockering House</title>
<style="text/css">
body {
margin:0;
padding:0;
background: url("images/hockbg.png") center top no-repeat;
background-attachment:fixed;
}
h1 {
margin:0;
padding:0;
}
#container {
width: 800px;
margin: 20px auto 30px auto;
padding: 0;
}
#header {
width:800px;
height:125px;
background: url("images/header.png")center top repeat-y;
}
#header h1 {
font:normal 36px/28px "Trebuchet MS", Helavetica, sans-serif;
color:#fff;
margin-top: 55px;
margin-left:20px;
letter-spacing:3px;
}
#header h1 .byline {
font:normal 14px/30px "Trebuchet MS",Helvetica, sans-serif;
color:#fff7ee;
letter-spacing:3px;
}
.headerleft {
float:left;
width:450px;
}
.headerright {
float:right;
width:200px;
text-align:right;
color:#fff7ee;
}
p.headertext {
font:normal 12px/16px "Trebuchet MS", Helvetica, sans-serif;
letter-spacing: 1px;
padding-top: 0;
margin-right: 20px;
}
#topnav {
height:35px;
font: normal 14px "Trebuchet MS", Hevetica, sans-serif;
text-align:center;
background: url("images/menubg.png")center top repeat-y;
}
#topnav ul {
list-style-type:none;
margin:0;
padding:0;
text-align:left;
}
#topnav li {
float:left;
margin-top:10px;
}
#topnav li a {
text-decoration:none;
padding-left:20px;
color:#fff;
}
#topnav li a:hover {
color: #635142;
text-decoration:underline;
}
#topnav li a:active {
color:#635142;
text-decoration:underline;
font-weight:bold;
}
#mainpage {
background-color: #fff7ee;
background: url("images/pagebground.png") center top repeat-y;
padding: 20px;
}
h2 {
margin:0;
padding:0;
font:normal 24px/40px "Trebuchet MS", Helvetica, sans-serif;
color: #635142;
letter-spacing:0;
text-align:left;
}
h3 {
margin:0;
font: normal 18px/22px "Trebuchet MS", Helvetica, sans-serif;
color:#635142;
}
#fadeshow {
float:right;
}
#mainpage p {
font: normal 14px/18px "Trebuchet MS", Helvetica, sans-serif;
color: #635142;
margin:10px 0 0 0;
}
#wedding2 {
padding:30px 0 0 0;
}
#wedding2 img {
float:left;
margin-right:20px;
}
#footer {
position:relative;
clear:both;
width:800px;
height: 30px;
font: normal 14px/30px "Trebuchet MS", Helvetica, sans-serif;
color:#D4D0AC;
background-color: #6f2242;
background: url("images/footer.png") center top repeat-y;
letter-spacing:1px;
}
#footer p {
padding-left:50px;
}
#fb {
position:absolute;
top:5px;
right:30px;
}
#bottom {
text-align:center;
color: #635142;
padding:5px 0 20px 0;
font: normal 10px/16px Arial,Helvetica,sans-serif;
}
#bottom p {
margin:0;
}
#bottom a {
text-decoration:none;
color: #635142;
}
#bottom a:visited {
border-style:none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="headerleft">
<h1>Hockering House<br/><span class="byline">wedding venue Norfolk</span></h1>
</div>
<div class="headerright">
<p class="headertext">Hockering House<br/>Heath Road<br/>Hockering<br/>Norwich<br/>NR20 3JB</p>
<p class="headertext">Tel: 01603 880339</p>
</div>
</div>
<div id="topnav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Wedding Venue</a></li>
<li><a href="#">Glamping</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="mainpage">
<img id="fadeshow" src="images/wedding.jpg" alt="wedding">
<h2>Hockering House</h2>
<h3><em>The perfect Norfolk wedding venue</em></h3>
<p>The only venue in the Dereham district to hold DUO ceremonies in 2013</p>
<p>Imagine yourselves - together - at Hockering House, near Norwich in Norfolk. At this very special time in your lives, Sam and Oliver Berney will welcome you to Hockering House as though you're friends of the family - getting to know you, hearing your ideas, and helping you create the perfect wedding day.</p>
<p>Our personal approach makes this whole wonderful experience stress-free, from our first meeting to your last dance. We have over 10 years of event experience which you will benefit from if you choose Hockering House as your wedding venue, we'll offer as much or as little help as you need - <i>but we never forget: it's your wedding day.</i></p>
<div id="wedding2">
<img src="images/wedding2.jpg" alt="wedding2">
<h3>Hockering House Wedding Reception</h3>
<p>When you hold your wedding ceremony and wedding reception at Hockering House - you'll be celebrating in seclusion and style.</p>
<p>Our private estate offers a warm welcome to wedding reception guests, just fifteen minutes from the centre of Norwich, Norfolk. With gardens, five acres of parkland and a stunning country house as your wedding venue ... you'll have complete privacy for this very special event. We think Hockering House is the ideal country wedding venue. Why not take a look at our estate, and see if you agree...</p>
</div>
</div>
<div id="footer">
<p>Mobile: Sam Berney 07909 510192 or Oliver Berney 07815 772660 | Email Hockering House</p>
<div id="fb"><a href="http//www.facebook.com"><img src="images/fb-small.png" alt="fb-small"></a></div>
</div>
<div id="bottom">
<p><a href="http://validator.w3.org/check?uri=http://www.hockeringhouse.co.uk/">valid xhtml strict</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.hockeringhouse.co.uk/css/hockeringhouse.css">valid css</a> | <a href="privacy.php">Privacy</a> | <a href="sitemap.php">Site Map</a> | <a href="xmlsitemap.php">XML Site Map</a></p>
<p>Copyright © 2010-2014 Hockering House | <a href="http://www.webhotdesigns.co.uk/index.php">web design & hosting - Webhot Designs</a> | last updated: 23rd June 2014</p>
<p>Wedding Venue Norfolk | Wedding Reception Norfolk | Wedding Ceremony Norfolk | Country Wedding Venue Norfolk</p>
</div>
</div>
</body>
</html>
