[SOLVED] Almost there but stuck.. Page menu bar icons on side
 

What I wanted is add social icons on the right in the page menu bar, because it's a spacesaver and great spot. The result is like this:
http://www.marced.com/socialpagemenu.png

I like it this way. Only problem is it lights up with the same background color as my page menu items, because the code is within <li> items, otherwise it wouldn't work.

How can I solve this? So the image is just like it is and doesn't change bgcolor when hovering? Or how can I avoid LI maybe? I included the used code within bfa_header_config below:

Thank you guys, final steps in my page!!

(btw, live example of how it behaves on http://www.marced.com)

add a class="foobar" to each of the li's then you can use it in CSS to reset those LI's

Hi JD (again :)), thnx for your help again. I added the class but now I don't know how to refer to the li and class and refer to hoover in CSS, got some basic knowledge on CSS but this goes a step too far. Can you tell me how to edit the hoover color for this LI class?

Thnx again (and again)

do a google search using 'css hover pseudo' and read about it at w3schools.com

I did some research, of course I want to look into it myself, but I see no effect in my page uptill now.

I tried a lot. And I referred to background color, background etc.

No effect. The referral to .foobar seems right when I look at explanation, I think something is wroing with li:hover, or maybe the variable but that's a Atahualpa thing how it is arranged.

I already have a CSS thing that IS working:
"div#menu1 ul#rmenu2 li a: hover"

But now I need to refer to this li with the class specifically, and it's an image not a link (so no 'a').
I understand you can't teach everyone CSS and you're not here for that, but I know you got the expertise ;)

Appreciate it if someone could help.

Donation no problem.

your code won't work - all you have is the images. I assume that you want to be able to click on an image and link to twitter of face book or what ever, In that case your code must be
note: the class 'foobar' can be anything but should be meaningfull so 'menu_social_icons' might be a better name that 'foobar'

With this you can now code your CSS
.foobar a:hover {background: #000000;}

JD,

I understand what you are saying, I know my html (done quitte a bit of tuning and adding) and I know I need to add <a href=""></a> links around the images to get it to link to the RSS feed. I just left them away because of the length of the code and because it´s work for later.

When I add an a i can refer to that, that worked (although it messes up my layout).

BUT, i need the image in between (with width="265px") to get the icons to the right. I don't want to make that a link (so no <a>). It should be possible to refer to an image or an LI hover without having a link in there, shouldn't it?
What about that?

Best way I guess should be that it should be possible to end the page menu bar somewhere, and start a new div or table on the same height to the right. Would that be easier? At least I would avoid all the page menu behaviour...

Had a breakthrough. I used this code

div#menu1 ul#rmenu2 li.foobar
{
background: #E4ECF4;
}


And now when hovering over the images nothing background doesn´t become white like the normal menu, but stays the same color as background!

So that´s ok now.

Only thing now left is when I add <a href=""></a> around the images, it links and all, but the images get all messed up, because they get the same layout as the rest of the menu-items, and all the images after this go to the next line :S

Next problem.. (in the end, we'll get there I hope). Should I still consider closing page menu bar and start new area on same height or is that not possible?

Solved it!!!!!

I actually referred to my page menu styling more specifically by adding page_item to li, so it became:
Then I added this code to CSS to refer to the icons on the right:
Then I made separate LI's around all the icons (images) and links, with class "foobar", and this has done the trick!! All working fine now, can´t test it in chrome and mozilla here but I think it´s fine!

result at http://www.marced.com.

You guys like it?

Rewarding this! Thnx JD for giving me the right thoughts and challenging me!

Well...your not quite there, the last two icons are on the next line in Safari. Get rid of the
and add 'float:right;' to your 'div#menu1 ul#rmenu2 li.foobar '

Didn't test it in Safari but you're right (again), thanks! Deleted the image, added the float (funny how it changes the sequence, changed it back), works great now, also in Safari.

Your help is the last 10% I am missing all the time ;) Made a donation!