SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Owz2004's Avatar
    Join Date
    Mar 2004
    Location
    U.K (Wales)
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Verticaly aligning content in the footer..

    Hi I have a site: http://www.joe-blogggs.co.uk/ladpwebsite/index.html

    all is well except for the footer, I'm trying to vertically centre the icons, navigation and span within the footer... currently their a bit messed up..

    My understanding was that if I set the height of the footer at 60px and then set the line height of the span and nav to 60px and set the v-align to middle it would solve this issue..

    is this correct? so far I've tried this and it doesn't seem to work...

    any help on this would be great...

    thank you

    O

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I haven't gone to your site, but the height/line height trick DOES work, but the element must be block level first. Adding display:block should fix that little thing up .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Owz2004 View Post
    My understanding was that if I set the height of the footer at 60px and then set the line height of the span and nav to 60px and set the v-align to middle it would solve this issue..
    Hi,
    The main problem is the right floated ul being last in the footer source order. Floats always need to come first in the source if other elements are to sit on the same vertical plane.

    I would suggest wrapping the anchors (with the nested images/icons) in a "p" tag and floating it left. Then what I mentioned above will not be an issue.

    As far as the icons are concerned you can target those images through the #footer p style and set the v-align to middle on those.

    You have some errors in the image size attributes of your live page also, you have set "px" and you are missing the "=" on one of them. You intended to set the image dimensions at 50px via the html so that is what I will work with.

    You can set a 50px height on the footer with 5px top and bottom paddings to bring it to 60px total. Set a 50px line-height on the footer and it will inherit to all the child elements.

    This will get you what you are after.
    (I noticed you were using a reset so I used one also)

    Hope that helps

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>V-A footer</title>
     
    <style type="text/css">
    * {margin:0;padding:0;}/*for demo only*/
     
    body {
        background: #fff;
        font-size:100%;
    }
    img {border:0}
     
    #wrapper {
        width:900px;
        margin:0 auto;
    }
    #footer {
        height:50px;/*60px with padding*/
        line-height:50px;
        padding:5px 0;
        background:#000;
    }
    #footer ul {
        list-style:none;
        float:right;
    }
    #footer li {
        float:left;
        margin-right:10px;
    }
    #footer li a {
        float:left;
        height:50px;
        color:#fff;
        text-transform:uppercase;
        text-decoration:none;
        font-size:14px;
        font-weight:normal;
    }
    #footer li a:hover {
        color:#697813;
    }
    #footer p {
        float:left;
        height:50px;
        background:#333;
    }
    #footer p img {vertical-align:middle;}
     
    #footer span {color:#fff;}
     
    </style>
    </head>
    <body>
     
    <div id="wrapper">   
        <div id="footer">
            <p>       
                <a href="#" title="Visit louise Austins Facebook Page"><img src="__images/Louise_austin_design_facebook.png" alt="Facebook Icon" width="50" height="50"/></a>
                <a href="#" title="Visit louise Austins Twitter Page"><img src="__images/follow_louise_austin_on_twitter.png" alt="twitter Icon" width="50" height="50"/></a>
                <span class="follow">Follow LADP-DESIGN</span>
            </p>
            <ul>
                <li><a href="sitemap.html" title="LADP Sitemap">Sitemap  |  </a></li>
                <li><a href="sitemap.html" title="LADP Terms and Conditions">T&amp;C's</a></li>
            </ul>
        </div><!-- End footer Div -->
    </div>
     
    </body>
    </html>


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
  •