SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Coding Problems

    Hey all!

    On an upcoming project I'm working on, I've run into two dead ends that I can't figure out... One involves a stick footer and the other involves a formatting issue that I'll try to explain. The site I'm working on is here.

    1) I cannot get the sticky footer to stick to the bottom...there's a slight gap at the bottom
    2) I don't how know to get the 3 bottom <ul>s in my footer to behave like my mockup here

    So yeah..I'm kinda stumped. Thanks if you all could take the time to show me how to fix this issue.

    Thanks,
    Eric Huang
    Erichuangis: Erichuangis.com
    Small Blogs Network: Small Blogs Network

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hello,

    The 2px gap at the bottom is caused by
    Code:
    #menu {
       	position: absolute; 
       	width: 160px;
    	left: 220px;
    	top: 13px;
    	bottom: -2px !important; /*IE Hack to bring menu down*/
    }
    If it's an IE hack IE should be the only browser to see it. If it needs to stay just give the #footer a margin-bottom: -2px;

    To achieve the design in your mockup just give each column fixed widths and put the paragraph below the lists - not within another ul element - Remember to validate.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I fixed the sticky footer problem thanks to you. However, I still cannot understand how I should arrange the footer elements? I tried playing around with it using floats but I can't figure it out still.. Can you give me any hints?

    Thanks,
    Eric Huang
    Erichuangis: Erichuangis.com
    Small Blogs Network: Small Blogs Network

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    You've got some spelling issues..
    This section of the layout isn't too difficult - Something like this should work
    Code:
    <div id="footer">
      <div class="first">Put Heading and list</div>
      <div class="second">Put Heading and list</div>
      <div class="third">Put Heading and Paragraphs</div>
      <div class="bottom">Put Paragraph</div>
    </div>
    Code:
    #footer .first{ width: 300px; float: left }
    #footer .second { width: 200px; float: left }
    #footer .third { width: 400px; float: left }
    #footer .bottom{ clear: left }
    Float everything, give them widths(fixed as your layout is fixed) and clear the last element. Of course the width's will have to account for the padding/margin on the elements also.

    Hope it helps

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,793
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Just use three floats of the correct width.

    The first float would contain another three floats for those 3 little columns.

    There's not really much more to it than that. Just make sure everything has the correct dimensions and that they fit in the space you allocate.

    The copyright message could be a paragraph with text-align:center and clear:both added.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, thanks to you two I've gotten that fixed. However, in IE 7 for some reason the links are double spaced and are messing up the sticky footer? How can i fix that?

    Thanks,
    Eric Huang
    Erichuangis: Erichuangis.com
    Small Blogs Network: Small Blogs Network

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

    It's probably a white space bug so try floating the list.


    Code:
    #footer li {
    font-size: 11px;
    color: #444444;
    list-style-type:none;
    float:left;
    clear:left;
    }


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
  •