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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    57
    Thanks
    10
    Thanked 0 Times in 0 Posts

    How can I center the top menu?

    Hi,

    I want to center the top menu in my site, currently it is aligned to the left.
    In the CSS file the line that controls the menu is:
    Code:
    #navigation{height:35%;margin-top:1px;font-size:12px;background-color:#E5F0FA;overflow:hidden;width:100%;float:left;}
    I tried adding:
    Code:
    margin-left:auto;margin-right:auto;
    but it didn't help.

    Link to my site:
    http://www.gamestoenjoy.com

    How can I center this menu?

    Thank you for your help

  • #2
    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 adding text-align:center; to the relevent DIV.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    57
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I tried adding to the relevant DIV:
    Code:
    <div id="navigation" style="text-align:center;"><jdoc:include type="modules" name="user3" style="xhtml" /></div>
    It didn't help, still aligned to the left...

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello gamestoenjoy,
    That's a bit of divitis there, you should also know that tables are not the way to build websites. See the link about tables in my signature line below.

    I understand that's a template though and you can still center your menu a number of ways. Based on this example, your's centers with this bit of CSS:
    Code:
    .sidebar1 .module div div div,.sidebar .module_menu div div div,.sidebar .module_text div div div{width:122px;overflow:hidden;background:none;padding:3px 3px 10px!important;}
    
    
    #header{
    /*height:135px;
    display:block;*/
    position: relative;
    }
    #schriftzug{width:100%;height:65%;background-color:#339999;float:left;font-size:30px;padding:0 0 0 0;}
    #navigation {
    height: 35%;
    margin-top: 1px;
    font-size: 12px;
    background: #E5F0FA;
    overflow: hidden;
    width: 100%;
    /*float:left;*/
    clear: both;
    }
    #mainlevel-nav {
    float: left;
    position: relative;
    left: 50%;
    }
    #mainlevel-nav li {
    float: left;
    position: relative;
    right: 50%;
    }
    
    
    #navigation ul,#navigation li{list-style-type:none
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    gamestoenjoy (05-24-2010)

  • #5
    New Coder
    Join Date
    Nov 2009
    Posts
    57
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thanks a lot Excavator.

    Your CSS code works perfectly on Firefox, and the menu is indeed centered.
    However on IE 8 with this CSS, the header is shown as blank.
    What is missing so it will also work with IE?

  • #6
    New Coder
    Join Date
    Nov 2009
    Posts
    57
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Managed to solved it.

    Without the change in #header, meaning keeping it:
    Code:
    #header{height:135px;display:block;}
    It works perfectly on both browsers.

    I definitely learned from your solution.
    CCS has a lot of power I wasn't aware of


  •  

    Posting Permissions

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