|
#1
May 31, 2010, 03:32 PM
|
|
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:
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:
Quote:
$page_menu_bar .= '<li><img src="/nixel.gif" width="265"></img></li><li><img src="/icons/16/twitter.png"> </img><img src="/nixel.gif" width="10"><img src="/icons/16/linkedin.png"> </img><img src="/nixel.gif" width="10"><img src="/icons/16/rss.png"></img><img src="/nixel.gif" width="10"><img src="/icons/16/email.png"></li></ul></div>'
|
Thank you guys, final steps in my page!!
(btw, live example of how it behaves on http://www.marced.com)
|
#2
May 31, 2010, 05:43 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
add a class="foobar" to each of the li's then you can use it in CSS to reset those LI's
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#3
Jun 1, 2010, 05:09 AM
|
|
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)
|
#4
Jun 1, 2010, 07:23 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
do a google search using 'css hover pseudo' and read about it at w3schools.com
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#5
Jun 1, 2010, 09:45 AM
|
|
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.
Last edited by marced; Jun 1, 2010 at 10:00 AM.
|
#6
Jun 1, 2010, 12:01 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
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
HTML Code:
<li class="foobar">
<a href="http://address_of_where_you_want_to_link_to">
<img src="/icons/16/twitter.png" />
</a>
</li>
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;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#7
Jun 1, 2010, 02:42 PM
|
|
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...
Last edited by marced; Jun 1, 2010 at 02:44 PM.
|
#8
Jun 1, 2010, 02:58 PM
|
|
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?
|
#9
Jun 1, 2010, 03:33 PM
|
|
Solved it!!!!!
I actually referred to my page menu styling more specifically by adding page_item to li, so it became:
Code:
div#menu1 ul#rmenu2 li.page_item a
Then I added this code to CSS to refer to the icons on the right:
Code:
div#menu1 ul#rmenu2 li.foobar
{
background: #E4ECF4;
margin: 0px 0px 2px -3px;
}
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!
|
#10
Jun 1, 2010, 03:57 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Well...your not quite there, the last two icons are on the next line in Safari. Get rid of the
HTML Code:
<img src="http://www.marced.com/nixel.gif" width="302" class="menuimg"></li>
and add 'float:right;' to your 'div#menu1 ul#rmenu2 li.foobar '
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#11
Jun 2, 2010, 03:00 AM
|
|
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!
|
|