center text titles within menuheader

  • Resolved dclayton

    (@dclayton)


    11 years 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;}

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter dclayton

    (@dclayton)

    11 years 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…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

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

    Thread Starter dclayton

    (@dclayton)

    11 years 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…

    Michael

    (@alchymyth)

    11 years 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; }
    Thread Starter dclayton

    (@dclayton)

    11 years 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….

    Michael

    (@alchymyth)

    11 years 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*/
}

    Thread Starter dclayton

    (@dclayton)

    11 years 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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘center text titles within menuheader’ is closed to new replies.

Tags