Changing alignment and height of menu bar?
First off, I cannot believe how close I am getting to getting my website configured the way I had it before I switched to Wordpress. This is an AWESOME theme.
(For reference, my site is http://fredsmythe.com.) However, I've got a tiny little thing going on...right now, I'm configuring the menu bar. So far I have added the following code to CSS Inserts to get the background image loaded and to have the inactive items have transparent backgrounds: Code:
/* ================================================ */ 1) Either remove that infernal border (I made it white and solid for testing) entirely or move the whole bar, border and all down 1 pixel so that it's back in line with the background image. (The latter is probably easier, and if we can do a 1 pixel move I am fine with changing the color to make the top and bottom transparent. 2) The height of the image is 33 pixels. I would like the bar to also be 33 pixels high in total, without having to change the height of the text, leaving the text center-left in the resulting cell. Any ideas how I might do this? Thanks very much! -- Chris |
Try this in CSS Inserts and see if it is getting you where you want. You will probably also want to add a background image for the active and hover states.
HTML Code:
div#menu1 ul.rMenu li a:visited, div#menu1 ul.rMenu li a:active { |
Quote:
This is a lot closer, except it's still a pixel too high. Would it just be an easier solution if I "moved" that pixel line to the Header image, and then when there was the one-pixel overrun, it would be right? I'd have to jigger some other settings, I am sure, but not many, and it *would* fix the issue. EDIT: Answer: yes, it's much easier. :) Thanks very much for the help again! You've been very good to me today. :) |
Now add the following to your menu CSS and you should be good to go.
HTML Code:
div#menu1 { |
I tinkered with the images, and I think I'm in really good shape where I am, actually. :)
My urge is to say "Now, how does this whole background-image-on-hover-etc thing work?", but you guys have already been incredibly nice and helpful and I do not want to burn through that goodwill so instead I think I will do a little research first and see if I can't dope it out for myself. :) |
You don't know how much your desire to "do a little research first" is appreciated. Too many people want the answers but don't want to do any work which is really where you learn. Let us know when you get to some specific issues.
|
Quote:
So, if you will humor me, I'd like to think out loud for a second and have someone check my work and see if I really do understand it. Plus I hope that documenting this might be helpful to someone else down the road, as searching the forums here was to me. :) So first I want to go through my CSS inserts and explain what I think is doing what/ Code:
div#menu1 ul.rMenu { Code:
div#menu1 ul.rMenu li { Code:
div#menu1 ul.rMenu li a:visited, div#menu1 ul.rMenu li a:active { (At this point the highlight was still a pixel too high. and Larry did give me some code that he thought would fix it, but for my purposes it was just easier for me to tinker with the header and menu bar images (basically I stole the top two rows of pixels from the latter and slapped them at the bottom of the former) and now everything lines up right nice.) So that brings us to hover images. From Juggledad's post above, again. we've not covered two types of link states: "a:link" (the general, untouched link), and "a:hover", the link with the mouse hovering over it. So a little Paint.NET work this afternoon (hey, slow day at work :)) got me a hover image, and I did this: Code:
div#menu1 ul.rMenu li a:hover { And here's where I ran into trouble: I thought "hey, the only one left is a:link, right?" Well, if I apply the same style to that, everything turns blue. And that makes sense since that's the style for general untouched links. So what I THINK I need to know is what the style declaration is for "the currently selected page." And if I know that, I think I can apply the same style stuff I used in the Hover block to that, and it *should* light the current page up. I see something about "current_page_item" in the page source, but I'm not sure what to do with it. Have I earned a nudge? :) |
Actually, wait, I think I found it! From this post, I've changed the hover block to:
Code:
div#menu1 ul.rMenu li.current_page_item a:link, |
the use of '>' in CSS is a Child Selector which will not select all descendents, only direct children.
|
All times are GMT -6. The time now is 05:26 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.