Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Centering links

  1. #1
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Centering links

    How do I center the links at the top of my site:
    http://www.linuxpcs.net/

    in the style menu a:

    #menu a {

    float: left;

    width: 79px;

    height: 32px;

    display: block;

    text-align: center;

    text-decoration: none;

    color: #ffffff;

    font-weight: bold;

    font-size: 12px;

    text-transform: uppercase;

    it shows text-align: center, but it's not centered. How do I correct this?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #menu ul {/*styles.css (line 62)*/
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0pt auto;
    width:474px;/* 6x79px */
    }
    #menu1 {/*styles.css (line 54)*/
    background:transparent url(images/menu.gif) no-repeat scroll 0%;
    height:55px;
    /*padding-left:180px;*/
    padding-top:35px;
    /*width:702px;*/
    }
    PS: You could remove either #menu1 or #menu or even both to avoid divitis. That <ul> itself is enough to provide that display.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried to remove one menu and it really messed it up.

    What should I change to center the text links?

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this.

    Code:
    #menu1
    {
    width: 702px;
    height: 55px;
    padding-left: 129px;  adjust as necessary.
    padding-top: 35px;
    background: url(images/menu.gif) no-repeat;
    }


    Frank
    Last edited by effpeetee; 10-30-2008 at 07:29 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New Coder
    Join Date
    Sep 2008
    Location
    Portland, OR
    Posts
    82
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •