SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with footer - link provided

    Can someone please tell me why, when i add content to this site, there is a huge gap between the end of the content, and the footer.

    http://www.tremorchrist.net/index3.html

    On the home page (linked above) theres a photo, then you'll see a big gap below that, then the footer. I'm trying to get rid of this gap, but cant seem to do it for some reason.
    Pages with no content on them are ok.
    Whats causing the gap? (No, theres no p or br's etc and Ive checked margins and padding as far as i can see)

    I'm sure its quite a simple answer... anyone?

    edit: would also LOVE if someone could tell me whats stopping this from working in mozilla

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,832
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The problem is that you have used the wrong positioning system with all your elements. Position:relative wasn't designed for laying out a whole page and is causing the problems you have.

    position relative moves an element in relation to itself but as far as any other elements on that page are concerned the elements remains where it was. This is why you get loads of white gaps around the page where elements were until you moved them somewhere else.

    You should be using absolute positioning or floating elements or no positioning at all (static). Position relative is used for small scale effects and nudging elements on top of other elements without altering the structure or flow of the page. If you need to use relative positioning for anything else then the chances are you are doing it wrong. (there are some exceptions of course).

    You need to replan your playout into a logical order and use a mixture of static, absolute and floated elements to achieve your layout.

    As I have no idea where you are going with this layout then this code may be totally wrong for you, however it should give you some ideas on how to construct things.
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>
    <title>tremorchrist.net</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="description" content="Tremor Christ. Australian Pearl Jam Fan Website and Forums" />
    <meta name="keywords" content="tremorchrist, pearl jam, australian, vedder, pearl jam forums, trading, concert, tour" />
    <style type="text/css">
    body {margin:0px; padding:0;background-image:url('http://www.tremorchrist.net/marb009.jpg'); background-repeat:repeat;}
    #nav {float:left;width:150px; background-color:#E6C531; margin-left:20px;; margin-top:50px;}
    #nav a, a:hover {text-decoration:none; color:#000;}
    #nav a:hover {color:red;}
    #nav ul {list-style-type:none; font-family:verdana, arial; font-size: 0.7em; margin:7px;}
    #contentwrapper{
    margin-left:180px;
    }
    #content a, a:hover {text-decoration:none; color: red;}
    #content a:hover {color:blue;}
    #content {font-family: verdana, arial; font-size: 0.7em; color:#000;}
    #contentimg {text-align:center;margin-top:50px;}
    #header { height:90px;background-image:url('http://www.tremorchrist.net/headbgsm.jpg'); background-repeat:repeat-x;}
    #footer { height:60px; background-image:url('http://www.tremorchrist.net/footerbg.jpg'); background-repeat:repeat-x}
    </style>
    </head>
    <body>
    <div id="header"><img src="http://www.tremorchrist.net/header.jpg" alt="tremorchrist.net"/></div>
    <div id="nav"> 
      <ul>
    	<li><a href="index3.html">Home</a></li>
    	<li><a href="<A href="http://tremorchrist.net/forums/index.php">Forums</a></li">http://tremorchrist.net/forums/index.php">Forums</a></li>
    	<li><a href="gallery.html">Photo Gallery</a></li>
    	<li><a href="memberphotos.html">Members Photos</a></li>
    	<li><a href="trading.html">Aussie Trading</a></li>
    	<li><a href="tourarchive.html">Oz Tour Archive</a></li>
    	<li>Link7</li>
    	<li>Link8</li>
      </ul>
    </div>
    <div id="contentwrapper"> 
      <div id="contentimg" ><img src="http://www.tremorchrist.net/images/knees.jpg" alt="" /> 
      </div>
      <div id="content"> 
    	<p>some more text</p>
      </div>
    </div>
    <div id="footer"> </div>
    </body>
    </html>
    You will see that the code is much simpler

    Take a look at the FAQ on positioning to help you understand the basics as this will help you with the layout.

    Paul

  3. #3
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Funnily enough, I learnt about this stuff a while back, and the teacher never said that relative positioning shouldnt be used for a whole layout. hmm

    Thanks alot for that, I will try it tomorrow and let you know how it goes.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,832
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    and the teacher never said that relative positioning shouldnt be used for a whole layout
    Well you could use it for a whole layout but its not advised. Anytime you position an element with relative positioning you leave a hole in the page where the element was. That alone makes it too hard for the whole layout unless you know exactly what you are doing . But there are better and easier ways.

    Paul

  5. #5
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B, you'll notice on the one i originally posted, the main part of the header is located to the right of the top banner. On the new one you posted its on the left.
    You didnt specify any positioning rules for this, so how would i safely move it back to the right without messing things up?

    edit: i did it using relative positions, just for the header. hopefully it wont mess other things up

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,832
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    edit: i did it using relative positions, just for the header. hopefully it wont mess other things up
    Well it all depends if you put anything else alongside as it will still think the header is to the left. However if thats all tahts going in the header then it should be fine.

    However you could simply have used the following code and made life easier for yourself .

    Code:
    #header {text-align:right}
    Images are treated as text and will be afffected by the same rules such as text-align etc.

    Paul

  7. #7
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    couldnt do that with the header (align right) as it has a bg image, and the image on top of that is what i wanted aligned right.
    I got that sorted now.

    I do have another problem. I cant upload it because my webhost is playing up, but i'll try to describe.
    On one of my pages, I have a long table (its a list of audio recordings). I had it set to 80% width, but rather than just stretching the page to bring on a horizontal scroll (which is what i want it to do - it is fine for this situation), it positions itself in line below the navigation. How can i make it so it sits beside the navigation without reducing the width of the table?
    I've tried the clear property but that doesnt seem to help.

    Hopefully you understand what Im talking about, if not i will post a link as soon as i can

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,832
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I had it set to 80% width, but rather than just stretching the page to bring on a horizontal scroll (which is what i want it to do - it is fine for this situation)

    How can i make it so it sits beside the navigation without reducing the width of the table?
    I'm not quite sure what you mena but if you want the table to stay full width then you could put it inside another div that has the width specified and set the overflow to auto. You could then put your table inside with the correct width and the scrollbar should appear on the outer div. The user could just scroll the dix to see the table rather than scrolling the whole window.

    You should always try to avoid having a horizontal scrollbar on the window at normal sizes.

    Paul

  9. #9
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I knew you'd say that
    I do avoid it, but in this case, its not a big deal. Trust me

    I dont think you've taken it the right way.. so i'll post a link as soon as i can

  10. #10
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok.... in firefox it does the right thing, but in IE, ir gets pushed down in line with the bottom of the nav.
    view it in both browsers if you can...

    http://www.tremorchrist.net/tradinglist.html

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,832
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Try this:
    Code:
    #content {font-family: verdana, arial; font-size: 0.7em; color:#000;width:99%}
    Not sure if thats the effect you were after

    Paul

  12. #12
    SitePoint Addict longroad's Avatar
    Join Date
    Mar 2004
    Location
    Australia
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that doesnt do anything for me. Its still pushed halfway down the page in IE


Bookmarks

Posting Permissions

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