WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Center menu help (14 posts)

  1. manaal
    Member
    Posted 1 year ago #

    hi,

    i want to center menu and the code is given below. the menu is not moving to center http://www.aeos.ws

    /********** Header **********/
    #menu{
    top:6px;
    left:8px;
    margin:0 0 0 0;
    padding:0;
    width:600px;
    clear: both;
    float: none;
    height:33px;
    z-index: 50;
    position: relative;
    text-align: center;

    }
    .menu{ text-align:center; }

    #menu ul {
    overflow:hidden;
    margin:0;
    padding:0;
    height: 33px;
    text-align: center;
    }
    #menu li {
    display:inline;
    font-size: 11px;
    font-family:Arial,Verdana;
    font-weight: bold;
    height:33px;
    margin:0px;
    position:relative;
    text-align: center;
    float: none;
    }

    #menu ul li a {
    float: left;
    display: block;
    height:23px; /*33*/
    line-height:11px;
    color: #667F87;
    text-align:center;
    padding:10px 20px 0px 20px;
    margin:0 0px 0 -14px;
    text-decoration:none;
    background:url(images/bg_menu.gif) no-repeat top left;
    text-align: center;

    }
    #menu ul li a:hover, #menu ul li.current_page_item a{
    color:#3E4D52;
    background:url(images/bg_menu_hover.gif) no-repeat top left;
    }

    #menu ul li:hover ul { display: block; }
    #menu ul li:hover ul ul { display: none; }
    #menu ul ul { position:absolute; top:33px; left:50px; background:#fff; display:none; list-style:none; margin:0;padding:0; border-top: 1px solid #aaa; width:130px;}
    #menu ul ul li {position:relative; border:1px solid #aaa; border-top: 0;width:159px; margin:0; padding: 0; background: none;}
    #menu ul ul li a {display:block; padding:0 7px 0 12px; color: #3E4D52; background-color:#fff; border-right: 0; font-size: 11px; font-family:Arial, Verdana; }
    #menu ul ul li a:hover {background-color:#eee}
    #menu ul ul li:hover ul { display: block; }
    #menu ul ul ul { left:159px; top:-1px; display: none; }

    #menu .lastmenu:hover{
    background:url(images/bg_menu.gif) no-repeat top left;
    }

  2. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Have a read through this document on centring things http://www.w3.org/Style/Examples/007/center.en.html

  3. manaal
    Member
    Posted 1 year ago #

    yes but it does not help can you please let me know where my code is wrong

    i gave text-align:center; as well..

  4. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Where are you getting the .menu styles from? There's no HTML classed or ID of 'menu'.

  5. ronangelo
    Member
    Posted 1 year ago #

    #sub-navigation {
        display: table;
        margin: auto;
    }

    http://ronangelo.com/the-easiest-way-to-center-a-menu/

  6. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Ronangelo,
    Is that a solution to expanding menus, i.e when you change the name of a menu item, the menu automatically centres accordingly?

  7. ronangelo
    Member
    Posted 1 year ago #

    You mean a menu that has a dynamic width? Yes.
    It centers whether you add or remove menu items.

  8. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    Nice work.

  9. manaal
    Member
    Posted 1 year ago #

    thankyou so muchhhhhhh

    Do you have any idea how to reduce distance between text widgets

  10. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    For general CSS queries, try a general CSS forum http://csscreator.com/forum

  11. manaal
    Member
    Posted 1 year ago #

    Hi,

    One problem I have encountered is that;

    When i use the code below the menu gets centered but when i hover over the dropdown menu it disappears before I can go to the third fourth category in the sub menu. How to resolve it ?

    #sub-navigation {
    display: table;
    margin: 0 auto;
    	}
    
    The previous code used was
    #sub-navigation {
    
    	top:2px;
    	left:122px;
    /*	width:700px;*/
    	clear: both;
    	float: left;
    	padding-top: 0px;
    	margin-top:3px;
    	height:33px;
     	z-index: 50;
     	position: relative;
    	}

    Can anyone suggest changes?

    Thankfully
    MJ

  12. ronangelo
    Member
    Posted 1 year ago #

    You probably removed the z-index. You were just supposed to add the

    display: table;
    margin: 0 auto;

    Then remove this

    left: 122px;
    float: left;
    #sub-navigation {
       display: table;
       margin: 0 auto;
       z-index: 50;
    }
  13. manaal
    Member
    Posted 1 year ago #

    #sub-navigation {
    display: table;
    margin: 0 auto;
    z-index: 50;
    }

    is not working too... I changed z index several times as well...

  14. manaal
    Member
    Posted 1 year ago #

    working now thanks :)

    Thankyou for so much help

    HAPPY NEW YEAR

Topic Closed

This topic has been closed to new replies.

About this Topic