SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    footer stay bottom and footer link problem

    How can I fix footer links so that I can have some space between the right hand side of browser edge and footer links?
    Login link at the top, has a space between itself and edge of right hand side of the browser.

    I tried putting padding, then the footer goes out of viewport even when the content is short and I also get a scroll bar.

    Also, when I define 950px for the outer div, that 950px has no impact and the size goes over 950px depending on the browser's ability to expand. Any thoughts on this?

    PHP 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>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    style type="text/css">


    /* commented backslash hack \*/ 
    htmlbody{height:100%;} 
    /* end hack */
    html,body {margin:0;padding:0}
    body{text-align:center/* centre for ie5.+*/

    #outer{
    min-height:100%;
    /*margin-bottom:-50px;*/

    height:auto;
    width950;
    margin-leftauto;
    margin-rightauto;
    positionrelative;
    text-alignleft;
    background-color#90ee90
    }
    html #outer{
    height:100%;
    width950px/*box model hack for ie5.+*/
    w\idth950px;
    }
    #footer {
    text-alignright;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    height:50px;
    background-color#ffa200;
     
    }
    #clearfooter{clear:both;height:50px;width:100%}
    div>{margin:0}
    html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */
     
     #content-pri {
      
      
    width80%;
      
    floatright;
      
    background-color#d2a5ff
    }

    #content-sec {
      
      
    padding1em 0;
      
    width20%;
      
    floatleft;
      
    background-color#49e9ff
    }

     
    #main-nav {
    marginauto;
      
    text-alignright;
      
    padding0 1em;
      
    background-color#ff00fa
    }

    body {
      
    background-color#dcdcdc;
      
    }
     </
    style>


    </
    head>
    <
    body>
    <
    div id="minHeight"></div><!-- Safari hack -->
    <
    div id="outer"


                <
    div id="main-nav">
                    
                        <
    a href="http://www.mysite.com/login/">login</a>

                        <
    br />
                    
                
                </
    div> <!-- End of main-nav -->

    <
    div id="content-sec">
                
                    <
    p>
                        
                    
    Hello Welcome to my site 
                  
    </p>
                    
                </
    div
    <
    div id="clearfooter"></div>
    </
    div>
    <
    div id="footer">Footer -
                    <
    a href="http://www.mysite.com/about/">About</a
                    <
    a href="http://www.mysite.com/contact/">Contact Us</a>

    </
    div>
    </
    body>
    </
    html

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

    I would add an inner div to apply padding to:
    Code:
    <div id="footer">
      <div class="inner">Footer -
         <a href="http://www.mysite.com/about/">About</a> 
         <a href="http://www.mysite.com/contact/">Contact Us</a>
      </div>
    </div>
    Then you can apply padding to that element without effecting the dimensions of the parent element.
    Code:
    #footer .inner { padding: 20px }

  3. #3
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    my question 1 seems silly now...I read a book but you learn by applying.

    What about the question 2:

    when I define 950px for the outer div, that 950px has no impact and the size goes over 950px depending on the browser's ability to expand. Any thoughts on this?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    You've only defined width: 950; you need 'px' in there

    Validate your CSS to pick on things like this.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd also use an unordered list instead of a DIV and two anchor links.

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    yep
    You'll just have to tame the margin padding as well on the lists.
    Code:
    <div id="footer">
      <ul class="inner">
         <li><a href="/about/">About</a></li>
         <li><a href="/contact/">Contact Us</a></li>
      </ul>
    </div>

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't even use a class on the list. Just target it directly from the DIV with the ID of footer on it.

    Code:
    #footer ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }


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
  •