Wordpress Themes - WP Forum at BFA - [SOLVED] Page menu item

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - [SOLVED] Page menu item - vertical text alignment (http://forum.bytesforall.com/showthread.php?t=13465)

[SOLVED] Page menu item - vertical text alignment

Hi Folks,

I'm building a site using Atahualpa and all my resources are failing me on this one issue. All morning I've been looking through websites, books and this forum and trying code snippets, none of which work, so it's time to ask for help.

All I want is to move the text in the page menu down without moving the background color or image fill. Can someone please suggest some code to make this happen?

I thought I might add that property to the page menu item span class, but I haven't found the magic combination (i.e., css insert code) to make that happen. (Despite being smart, I find CSS easily confusing.)

Below is the code I already have and a screenshot of the menu as it is currently.

Code:

/* Page menu Container             */

div#menu1 { 

        border-top: solid 1px #cccccc;

        border-bottom: solid 1px #cccccc;

        margin-top: 20px;

        height: 43px; 

        text-align: center;

}



/* Page Menu items Area            */

div#menu1 ul.rMenu {

        margin-top: 1px;

        border-top: 0px; 

        border-bottom: 0px;

}





/* Page Menu items themselves       */

ul.rMenu li a:link, 

ul.rMenu li a:visited, 

ul.rMenu li a:hover, 

ul.rMenu li a:active, 

ul.rMenu li {

        width: 115px;

        height: 35px; 

        border-left: solid 1px #ffffff;

        border-right: solid 1px #ffffff;

        margin-right: 10px;

}



/*   Page menu items - background image on hover  */ 

ul.rMenu li a:hover {

    background: transparent url(http://michellemastersnlp.com/wp-content/uploads/2011/03/menubuttonhover.png) repeat-x scroll top left !important;

}

http://i17.photobucket.com/albums/b5...at115811AM.png

You can see that the current page is Home, and that Style Page is in the hover state. (Sorry I can't let the site be public right now.)

WP: 3.1
Atahualpa: 3.6.4
Browser: Firefox: 3.6.15
Mac OS X

THANK YOU!

Thanks for the quick reply, STB, but I'm afraid that has no effect at all...

Hmm. No, not working.

In a day or two, it should be okay to unveil the site temporarily. I'll ask again then. In the meanwhile, I'd be happy to try anything else anyone comes up with.

Thanks!

Yes, I did. I put

Code:

padding-top: 15px;

Inside each of the sections of code above in turn and basically they all move the whole button down, rather than moving the text down within the button.

This is why I was kinda hoping to put a top margin on the class for the text span in the buttons, but I couldn't seem to get the code right - or at least it didn't have any effect no matter what tried.

And yes, I'm using Atahualpa's menus. I forgot about WordPress's.

Thanks for sticking with it!

I am having an issue with vertical alignment myself. the height of my li is 70px which is a solid color blue box. I would like the text of the link to be centered or at the bottom of this box, not at the top.

Here is the CSS I'm currently using:

HTML Code:

/* ===menu background===*/



div#menu1 { 

height: 60px;  

margin-top:0px; 

background: #F3F4F5; 

}





/* ===menu background and border === */



div#menu1 ul.rMenu {

background: #F3F4F5;

border: none 0px; 

}





/* ===menu item === */



ul.rMenu li a:link, 

ul.rMenu li a:visited, 

ul.rMenu li a:active, 

ul.rMenu li {

margin-top:50px;

padding-left:15px;

height: 60px;  

background: #F3F4F5 !important;

color: #000000 !important;

}



ul.rMenu li a:hover{

margin-top:50px;

padding-left:15px;

height: 60px;  

background: #0055a5 !important;

color: #F3F4F5 !important;

}

Whenever I do as is suggested by STB, the whole "button" moves, not just the text. I was hoping someone could offer a better explanation or another alternative. Thanks!

try playing with 'padding-top' instead of 'margin-top'

I have the margin in there b/c I need it moved down from the top of the page. As for messing with the padding, all it does is move the entire thing down. It either moves the entire menu down or when I do it in "li a" section, it moves on that one menu item down. Nothing seems to affect just the text.

http://www.judgehardymccollum.com

let me know as soon as you're done looking at it b/c it's not live yet and i'll need to turn my "coming soon" plugin back on. Thanks!

looks like you turned the coming soon plugin back on.

It's off now. I did turn it off yesterday afternoon, but i don't know what happened.

get rid of the height and padding-top on all the 'div#menu1 ul.rMenu li a:xxxx

then add

HTML Code:

div#menu1 ul.rMenu li a {border: Solid 1px red;

padding-top:30px;

 height:40px;

}

and play with the numbers

That worked! Thanks so much, JD!