...

View Full Version : Resolved Random Gap =/



Dan_Sheen
07-11-2011, 05:44 AM
So I am finishing up a friends website for him but recently the footer went to the left hand side of the page and there is this big random gap between the navigation and the content. It is quite annoying and would like to get help to get it fixed.

Screenshots can be found attached.

Heres the source:
HTML:

<!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" />
<meta name="description" content="Catch the latest news on Fairs in Kent and London!" />
<meta name="keywords" content="fair, rides, kent, london" />
<title>Fair Rides Kent &amp; London</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin&v1' rel='stylesheet' type='text/css'>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/logo.png" alt="description" /></a></div>
</td>
<td>
<div id="flash"><img src="images/flash.png" alt="description" /></div>
<!--end header--></div>
</td>
</tr>
<tr>
<td>
<!--Start Navigation-->
<div id="navigation">
<img src="images/navigation.png" />
<a href="index.html"><img src="images/home-nav.png" border="0" /></a>
<a href="forums"><img src="images/forum-nav.png" border="0" /></a>
<a href="photos.html"><img src="images/photos-nav.png" border="0" /></a>
<a href="videos.html"><img src="images/videos-nav.png" border="0" /></a>
<a href="contact.html"><img src="images/contact-nav.png" border="0" /></a>
</div>
<!--End Navigation-->
</td>
<td>
<div id="content">
<!-- Add news content above this line here -->
<h2>10th July 2011</h2>
Today Fair Rides Kent & London's website has gone live. We have amazing collections of photos and the latest news reports
that we invite you to look at. Soon we are going to be creating a forum to form a community. So stay tuned for that!
Here you will find all the latest news of the website, what fair ride locations we visit and loads more.
</div>
</td>
</tr>
<tr>
<td>
<!--Start Footer-->
<div id="footer">
Fair Rides Kent & London 2011. Website Created and Coded by <a href="http://cubehosts.eu">Cube Hosts</a>.
</div>
</td>
</tr>
</table>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>


CSS:


@charset "utf-8";
/* CSS Document */
#header {
width: 100%;
height: 150px;
}

#logo {
width: 240px;
height: 150px;
float: left;
}

#flash {
width: 700px;
height: 150px;
padding-right: 100px;
}

#navigation {
width: 250px;
height: 500px;

}

#content {
width: 100%;
height: 500px;
font-family: ubuntu;
}

#footer {
width: 100%;
height: 74px;
clear: both;
font-family: ubuntu;
}

It is probably something completely obvious but I can't seem to find what.

ARCLite Studio
07-11-2011, 06:40 AM
Try this change in HTML and Table setup, looked to me that a TD tag was missing for the placement you wanted.


<tr>
<td>&nbsp;</td>
<td align="center"><!--Start Footer-->
<div id="footer"> Fair Rides Kent & London 2011. Website Created and Coded by <a href="http://cubehosts.eu">Cube Hosts</a>. </div>
</td>
</tr>
</table>
</body>
</html>

The only portion that was changed was down at the footer, added a TD and moved the copyright data into it. FULL CODE 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" />
<meta name="description" content="Catch the latest news on Fairs in Kent and London!" />
<meta name="keywords" content="fair, rides, kent, london" />
<title>Fair Rides Kent &amp; London</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin&v1' rel='stylesheet' type='text/css'>
</head>

<body>
<script type="text/javascript"> Cufon.now(); </script>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="header">
<div id="logo"> <a href="index.html"><img src="images/logo.png" alt="description" /></a></div>
</div></td>
<td><div id="flash"><img src="images/flash.png" alt="description" /></div>
<!--end header--></td>
</tr>
<tr>
<td><!--Start Navigation-->
<div id="navigation"> <img src="images/navigation.png" /> <a href="index.html"><img src="images/home-nav.png" border="0" /></a> <a href="forums"><img src="images/forum-nav.png" border="0" /></a> <a href="photos.html"><img src="images/photos-nav.png" border="0" /></a> <a href="videos.html"><img src="images/videos-nav.png" border="0" /></a> <a href="contact.html"><img src="images/contact-nav.png" border="0" /></a> </div>
<!--End Navigation--></td>
<td><div id="content">
<!-- Add news content above this line here -->
<h2>10th July 2011</h2>
Today Fair Rides Kent & London's website has gone live. We have amazing collections of photos and the latest news reports
that we invite you to look at. Soon we are going to be creating a forum to form a community. So stay tuned for that!
Here you will find all the latest news of the website, what fair ride locations we visit and loads more. </div></td>
</tr>
<tr>
<td>&nbsp;
</td>
<td align="center"><!--Start Footer--><div id="footer"> Fair Rides Kent & London 2011. Website Created and Coded by <a href="http://cubehosts.eu">Cube Hosts</a>. </div></td>
</tr>
</table>
</body>
</html>

Dan_Sheen
07-11-2011, 06:57 AM
Wow thank you so much that has fixed it, I knew it would be something obvious but I'm just too thick to see what it was. :rolleyes:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum