Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Random Gap =/

  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Random Gap =/

    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:
    Code:
    <!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:
    Code:
    @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.
    Attached Thumbnails Attached Thumbnails Random Gap =/-fair.jpg  
    Last edited by Dan_Sheen; 07-11-2011 at 06:58 AM. Reason: Resolved

  • #2
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Thumbs up

    Try this change in HTML and Table setup, looked to me that a TD tag was missing for the placement you wanted.

    Code:
     <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.



    Code:
    <!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>
    Last edited by ARCLite Studio; 07-11-2011 at 06:41 AM. Reason: Slight code adjustment

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •