SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Vertically align links in nav bars?

    Hi, I want my nav bars to have the links vertically aligned but can't get it to work.

    I have both a horizontal and vertical navigation bar with blocks of specific heights, and I want the link text to be vertically-aligned in the center/middle. I can't use padding I guess because in Firefox padding is added to the size of the block and in IE it is not, and the nav elements have to remain the same size to fit around an image (image height 150px)...

    How do I vertically align text in a horizontal navigation bar? and in a vertical navigation bar? Note that I am using the "float" property rather than "inline" because I want the horizontal bar blocks to be the same width.

    THANK YOU!!!

    Here's the code I'm working with....
    Horizontal Nav Bar:

    <style type="text/css"><!--
    ul.main
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    }
    a.mainnav:link,a.mainnav:visited
    {
    display:block;
    width:100px;
    height:38;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#7fbb00;
    text-align:center;
    padding-top:0px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a.mainnav:hover,a.mainnav:active
    {
    background-color:#EEAA11;
    }


    Vertical Nav Bar:
    <style type="text/css"><!--
    a.button:link,a.button:visited
    {
    display:block;
    width:150px;
    height:61px;
    vertical-align:middle;
    font-weight:bold;
    font-size:12px;
    color:#FFFFFF;
    background-color:#AA0066;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    }
    a.button:hover,a.button:active
    {
    background-color:#EEAA11;
    border-width=1px;
    border-style=solid;
    border-color=#d9d9d9;
    }
    div.utilitynav
    {
    width:150px;
    padding:0px;
    border:0px;
    margin:0px;
    float:left;
    }
    .clear
    {
    clear:both;
    }

  2. #2
    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)
    How do I vertically align text in a horizontal navigation bar? and in a vertical navigation bar? Note that I am using the "float" property rather than "inline" because I want the horizontal bar blocks to be the same width.
    Hi ohallost, Welcome to SitePoint!

    The same basic principle will apply to your list items whether it is a vertical or horizontal menu so that is not the issue at hand.

    Vertical-centering with css can be kinda tricky until you understand the limitations of the vertical-align property. It only applies to tables, display:table, and inline elements (including inline-block).

    Now there are limitations with display:table since IE6/7 does not support it. But you can use the relative offset method for those browsers and feed display:table to good browsers.
    Here is an example of the display:table method.

    Next, you can use inline:block; with some other rules to bring IE6/7 into compliance since they don't have native support for inline-block. It is possible to make them behave though. It requires some extra nested elements to make it happen but that is the case with the other method also.
    Here is an example of the inline-block method.

    View the page source on those demos and see if you can see what's going on and feel free to post back if you have any questions.

  3. #3
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much! I tried the display: table and it worked for firefox, but not IE, as you said. How do I add relative offset for IE?

    Also, I have both nav bars on one page, and when I made these additions, it pushed the horizontal nav bar links further down in the bar, so that some text disappeared and it was no longer vertically centered. I'll keep looking for the cause but thought I'd mention it in case you'd know why one might affect the other and how to prevent that.

    Thank you so much for your help! I frequented this site a few years back, and when I ran into some coding problems again lately I remembered it was a terrific resource. I really appreciate it!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,601
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    http://www.pmob.co.uk/temp/vertical-align3.htm

    I call it a double relative shift (whatever lol ), look inside the conditional comments to find out how.

    Basically you work off an IE bug and set top:50&#37;; and then bring the child to -50% thus perfect vertical aligning to the pixel
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    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)
    Hi,
    It would really help if you could post a link to the page. Since you are a new member you will not be able to post links until you have made five posts. However you can just leave out the http:// stuff and it will work. We can paste into our browser from there.
    How do I add relative offset for IE?
    The code below is from the first link I gave. The position:relative; on the .outer and .outer span are for IE. Then the 50%/-50% offset takes place in the IE Conditional Comment.
    Code:
    .outer{
        position:relative;
        display:table;
        width:11em;
        height:4em;
        vertical-align:middle;
    }
    .outer span {
        position:relative;
        display:table-cell;
        padding:0 1em;    
        vertical-align:middle;
    }
    h1{padding:20px;}
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
    .outer,.outer span {display:block; height:auto;}
    .outer {top:50%;}
    .outer span {top:-50%;}
    
    * html ul {height:1%; overflow:visible}/*overflow reset and haslayout the ul for IE6*/
    * html li {display:inline;}/*fix the dbl margin bug*/
    </style>
    <![endif]-->
    </head>
    <body>
    <h1>Vertical Aligning Text within Lists Items</h1>
        
        <ul>
            <li><a href="#">
                <span class="outer">
                    <span>test text</span>
                </span></a>
            </li>

  6. #6
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both!

    I am still having problems. The green horizontal nav is pushed down for some reason. And my CMS keeps changing the comment code, so in IE a weird [end if] is displaying above both.

    Here is a link to a test page. tinyurl.com/ycndpdu

    Any ideas...? Thank you again sooo much!!!!

  7. #7
    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)
    And my CMS keeps changing the comment code, so in IE a weird [end if] is displaying above both.
    Hi,
    The problem there is that you did not close your comment correctly. You have two hyphens after the ! and there should be none.

    <!--[endif]-->

    It should be like this

    <![endif]-->


    You are also putting your internal stylesheets in the body element, they belong in the head of the page. This is not like javascript where you can place scripts inside the page.

    Run your page through the W3C Validator and let it point out your errors.

    Here is your green nav working correctly by itself

    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>nav demo</title>
     
    <style type="text/css">
     
    body {
        background: #fff;
        font-size:100%;
    }
    ul.main {
        list-style:none;
        margin:0;
        margin-top:5px;
        padding:0;
        overflow:hidden;
    }
    li{float:left;}
     
    a.mainnav:link,a.mainnav:visited {
        float:left;
        width:100px;
        height:38px;
        font-size:12px;
        font-weight:bold;
        color:#FFFFFF;
        background-color:#7fbb00;
        text-align:center;
        padding-top:0px;
        text-decoration:none;
        text-transform:uppercase;
    }
    a.mainnav:hover,a.mainnav:active {
        background-color:#EEAA11;
    }
    .outer{
        position:relative;
        display:table;
        width:100px;
        height:38px;
        vertical-align:middle;
    }
    .outer span {
        position:relative;
        display:table-cell;
        padding:0;    
        vertical-align:middle;
    }
    </style>
     
    <!--[if lt IE 8]>
    <style type="text/css">
    .outer,.outer span {display:block; height:auto;}
    .outer {top:50%;}
    .outer span {top:-50%;}
    * html ul.main {height:1%; overflow:visible}/*overflow reset and haslayout the ul for IE6*/
    </style>
    <![endif]-->
     
    </head>
    <body>
     
    <div id="wrapper">
    <ul class="main">
        <li><a class="mainnav" href="PageServer?pagename=walk_about"><span class="outer"><span>About the Walk</span></span></a></li>
        <li><a class="mainnav" href="PageServer?pagename=walk_info"><span class="outer"><span>Event Details</span></span></a></li>
        <li><a class="mainnav" href="PageServer?pagename=walk_heartandsole"><span class="outer"><span>Heart &amp; Sole Circle</span></span></a></li>
        <li><a class="mainnav" href="PageServer?pagename=walk_teamleaders"><span class="outer"><span>Teams</span></span></a></li>
        <li><a class="mainnav" href="PageServer?pagename=volunteer"><span class="outer"><span>Volunteers</span></span></a></li>
        <li><a class="mainnav" href="PageServer?pagename=walk_participanttools"><span class="outer"><span>Participant Tools</span></span></a></li>
    </ul>
    </div>
     
    </body>
    </html>

  8. #8
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again. Yes I noticed the extra dashes in the comment; the CMS is adding those when I click save. I'll keep trying. Thanks so much for looking at my code an helping!


Tags for this Thread

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
  •