Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Page menu item - vertical text alignment


  #1  
Old Mar 24, 2011, 01:07 PM
deuxetoiles
 
44 posts · Dec 2009
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;
}


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!
  #2  
Old Mar 24, 2011, 01:29 PM
deuxetoiles
 
44 posts · Dec 2009
Thanks for the quick reply, STB, but I'm afraid that has no effect at all...
  #3  
Old Mar 24, 2011, 04:19 PM
deuxetoiles
 
44 posts · Dec 2009
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!
  #4  
Old Mar 24, 2011, 04:43 PM
deuxetoiles
 
44 posts · Dec 2009
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!
  #5  
Old Jun 11, 2012, 12:59 PM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
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!
  #6  
Old Jun 11, 2012, 01:42 PM
juggledad's Avatar
juggledad
 
23,628 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try playing with 'padding-top' instead of 'margin-top'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Jun 11, 2012, 02:17 PM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
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.
  #8  
Old Jun 12, 2012, 08:46 AM
juggledad's Avatar
juggledad
 
23,628 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what is the URL?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Jun 12, 2012, 03:58 PM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
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!
  #10  
Old Jun 12, 2012, 04:08 PM
juggledad's Avatar
juggledad
 
23,628 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
looks like you turned the coming soon plugin back on.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Jun 13, 2012, 08:46 AM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
It's off now. I did turn it off yesterday afternoon, but i don't know what happened.
  #12  
Old Jun 13, 2012, 09:46 AM
juggledad's Avatar
juggledad
 
23,628 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Jun 13, 2012, 10:09 AM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
That worked! Thanks so much, JD!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] change current category menu item text color cway Page & Category Menu Bars 3 Oct 29, 2010 08:39 AM
[SOLVED] Text Alignment - Parent Menu Tabs AtahualpaFan Page & Category Menu Bars 3 Aug 20, 2010 02:34 AM
Vertical alignment of text to images Gnopps Atahualpa 3 Wordpress theme 3 Jul 12, 2010 04:46 AM
[SOLVED] List item vertical spacing in sidebars mlanger Sidebars & Widgets 1 Sep 16, 2009 07:15 AM
Can figure where to change pages vertical alignment bonoix Atahualpa 3 Wordpress theme 3 Jun 23, 2009 07:26 AM


All times are GMT -6. The time now is 04:34 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.