Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Page Menu Nav with background images, need css help


 
Prev Previous Post   Next Post Next
  #1  
Old Mar 16, 2010, 09:52 PM
blueprairie
 
98 posts · Feb 2009
[SOLVED] Page Menu Nav with background images, need css help

I'm working on a site and *almost* have the navigation working the way I want. I'm obviously missing a couple things in my css but I can't seem to see it.

Demo site: http://polkcity.server307.com

On the site, the Hover and the Current Page seem to be working correctly. (Small caps, centered horizontally and vertically, hover graphic displaying)

However, the other states are not pulling the custom CSS inserts. (see below)

1. What do I need to change to make my non-hover, non-current page links format as small caps, centered horizontally and vertically, either with or without a background graphic?

2. There is a strange overlap from the menu onto the logo, seen as approx 20px of dark green. How do I remove that? I'm guessing it has something to do with having dark green loaded on ATA Page Menu Bar background, mainly because I couldn't figure out how to load nothing in that space.

3. Suggestions on how to center the background image when in hover and current page state? Either with CSS or possibly by making the graphic bigger and forcing set, uniform widths on each cell...

4. I'd hoped to format the drop down child-portion of the menu as standard ATA, no extra CSS. Advice on how to get the custom CSS off of these?

And, thank you JuggleDad and the ATA community, I couldn't have gotten this far without your help on the following posts:

http://forum.bytesforall.com/showthread.php?t=4697
http://forum.bytesforall.com/showthread.php?t=5814
http://forum.bytesforall.com/showthread.php?t=6015


Current CSS Insert
/* ================================================== */
/* Menu item */
/* ================================================== */
div#menu1 {
height: 54px;
margin-top:0px;
}

div#menu1 ul.rMenu li a:link {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
-x-system-font:none;
font-variant:small-caps;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
}

div#menu1 ul.rMenu li a:active {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
-x-system-font:none;
font-variant:small-caps;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
}

div#menu1 ul.rMenu li a:hover {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
-x-system-font:none;
font-variant:small-caps;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
background: url(http://polkcity.server307.com/wp-con.../menuhover.jpg) no-repeat !important;
}

div#menu1 ul.rMenu li.current_page_item a:visited {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
font-variant:small-caps;
-x-system-font:none;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
background: url(http://polkcity.server307.com/wp-con.../menuhover.jpg) no-repeat !important;
}

Last edited by juggledad; Mar 17, 2010 at 06:15 AM.
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Active page menu background image css help dixieprosser Page & Category Menu Bars 1 Mar 18, 2010 01:13 PM
[SOLVED] jpg background image for nav menu not showing up in IE7 rinoa3108 Page & Category Menu Bars 4 Dec 29, 2009 07:43 PM
IE ruins aligned images in header & center column, & doesn't size nav menu buttons viewdesigninc Header configuration & styling 0 Dec 11, 2009 01:07 PM
[SOLVED] Help with background images in top menu Poet Page & Category Menu Bars 0 Sep 13, 2009 11:18 PM
How to use background images for menu items instead of text daxryan Page & Category Menu Bars 2 Feb 27, 2009 04:29 PM


All times are GMT -6. The time now is 08:05 AM.


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