SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering text of navigation

    I am trying to center the text but it is only going to the top not center of the navigation. How do do that?

    Here is the code:

    #navcontainer
    {
    margin: 0 0 0 0;
    padding: 0;
    height: 0;

    }

    #navcontainer ul
    {
    border: 0;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }

    #navcontainer ul li
    {
    display: block;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
    }

    #navcontainer ul li a
    {
    background: #5B1A26;
    width: 125px;
    height: 40px;
    padding: 0;
    margin: 0 0 0 0;
    color: #f5d7b4;
    text-decoration: none;
    display: block;
    text-align: center ;
    font: Arial, Helvetica, sans-serif;
    }

    #navcontainer ul li a:hover
    {
    color: #FFFFFF;
    background: #442221;
    text-decoration:underline;
    }

    #navcontainer a:active
    {
    background: #442221;
    color: #fff;
    font-weight: bold;
    }

    #navcontainer li#active a
    {
    background: #442221;
    color: #fff;
    font-weight: bold;
    }
    Also look at the picture if you don't knowwhat I am talking about.

    THanks
    Attached Images Attached Images

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Vancouver Canada
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am having the exact same problem (just decided to move from table based design to CSS based design 2 weeks ago (when I started to fall in love with BBEdit 8 Demo)).
    Get busy living or get busy dying
    --Stephen King

  3. #3
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No picture yet as it can take quite a few hours for the mod to approve it.

    By chance, have you tried

    vertical-align: middle;
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

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

    Assuming the text isn't to wrap and will remain in one line then you acn set the line-height to the same height as the element. e.g. line-height:40px.

    This will automatically vertically centre the text on that line. Make sure that there is no top and bottom padding getting in the way of the alignment.

    Alternatively just use top padding to push the element into place. (The first method is easiest.)

    Vertical-align ony aligns elements in a single line (or table cell) in respect to each other and does not align content in block level elements. (For more info see the faq sticky thread).

    Paul

  5. #5
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I will second or third the motions that have been made in other posts...

    Paul is definitley one of the major authorities on CSS.
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Thanks for the vote of confidence lol - but I've still got lots to learn as well I just seem to have a knack with problem solving.


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
  •