WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] center text titles within menuheader (8 posts)

  1. dclayton
    Member
    Posted 1 year ago #

    Hi folks! I am sure you have seen this issue before...I just can't seem to center the text in the menu header...here is my .css from the academia template...

    here is the page: http://dcbdemo.dreamhosters.com/wordpress/

    #menuhead, #menuhead ul { margin:0; padding:0; position:relative; line-height:18px; z-index:300; width:100%; }
    #menuhead {background-color: #3a678d; height: 36px; line-height: 36px; font-size: 12px; font-weight: bold; margin-bottom: 15px; }
    #menuhead a { display:block; color: #fff; text-shadow: #264c6c 1px 1px 0; text-decoration: none; padding: 0 15px 0; }
    #menuhead a:hover, #menuhead .current-menu-item > a {color: #fff; text-shadow: #b86d21 1px 1px 0; background-color: #e98a2a; }
    #menuhead li {float:left; display: inline; position:relative; line-height: 36px; font-size: 12px; border-right: solid 1px #fff;}
    #menuhead li li {line-height: 28px; }
    #menuhead ul {position:absolute; display:none; width:120px; top:36px; left:0; }
    #menuhead ul a {border-left:1px solid #333; border-right: 1px solid #333; border-top: solid 1px #333; background-color: #444; text-shadow: none;}
    #menuhead li ul {width:130px;}
    #menuhead li ul a {width:130px; float:left; display:inline; border-bottom:1px solid #555;}
    #menuhead ul ul {top:auto;}
    #menuhead li ul ul {left:130px; margin:0 0 0 10px;}
    #menuhead li:hover ul ul, #menuhead li:hover ul ul ul, #menuhead li:hover ul ul ul ul {display:none;}
    #menuhead li:hover ul, #menuhead li li:hover ul, #menuhead li li li:hover ul, #menuhead li li li li:hover ul {display:block;}

  2. dclayton
    Member
    Posted 1 year ago #

    oh... and the related issue is that when you hover the hover color does not cover the entire menu element (float?)...there is some default color on the left side when you hover...

  3. Andrew
    Forum Moderator
    Posted 1 year ago #

    Something like this http://snag.gy/VKkIo.jpg ?

  4. dclayton
    Member
    Posted 1 year ago #

    Andrew thanks for responding...I actually mean that I would like to center the text within the individual cells with white borders....just the minor adjustment...right now the text is all shifted to the right a tiny bit and the hover color does not fill up the whole menu element when you hover...

  5. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    turn this into a proper css comment?

    <!--ul li {
        list-style-type: disc;
        margin-left: 1.5em; /* which should give space for the disc to show */
        list-style-position: inside; /* will put the disc inside of the li
                                        element, for debugging purposes -added april 5 to fix bullet list*/
    }-->

    http://www.w3schools.com/css/css_syntax.asp

    and possibly increase the padding in:

    #menuhead a { display:block; color: #fff; text-shadow: #264c6c 1px 1px 0; text-decoration: none; padding: 0 15px 0; }
  6. dclayton
    Member
    Posted 1 year ago #

    Thanks for catching the comment issue. That was actually to fix a problem with the bullet list disappearing and I am a newbie...so I did not comment that correctly.

    I increased padding: 0 30px 0; and it looks better, however the mouseover (hover) still does not fill the whole menu element and it still looks a bit off-center to the right....

  7. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    remove the left margin from that uncommented style:

    ul li {
        list-style-type: disc;
        margin-left: 1.5em; /* which should give space for the disc to show */
        list-style-position: inside; /* will put the disc inside of the li
                                        element, for debugging purposes -added april 5 to fix bullet list*/
    }
  8. dclayton
    Member
    Posted 1 year ago #

    Thanks alchymyth...that looks like that was the issue. I removed the left margin and it fixed the menu center-text issue and the hover-mouse over issue (spacing as well) and did not disturb the bulleted list. I will mark this resolved.

Topic Closed

This topic has been closed to new replies.

About this Topic