Topic: CSS version of a Menu

I want to develop a CSS version of the large image changer on mouse over on the http://www.sun.com site and wondering if anyone could give me a few pointers.

I can handle a little CSS and a background image change for a div is no problem but can i change the background properties of 2 divs from just one mouseover event?

if anyone knows of any examples of something similar i would appreciate it.

Cheers

FR

Paul O'Brien has a whole section on "disjointed rollovers" at pmob.co.uk, the one closest to your example:

http://www.pmob.co.uk/temp/disjointedcssrollover.htm

Thanks Jason,

pointer was a good one - i'll have a play

Cheers

ben

You might want to have a look at something like jQuery at jquery.com it is designed to be a super simple javascript library and will make things like what you are trying to do a breeze. Follow the tutorials! 15 days of JQuery is a great resourse.

Dan @ Code Town

quote:

---

http://www.pmob.co.uk/temp/disjointedcssrollover.htm

---

is there anyway of making this float rather than use absolute positioning?

I need it contained within a div as the browser text size stting alters the possition - spent 3 hours and ended up considering using a table version using DW swap_image... please dont make me do it!

Ben

(Edited by FatRod on 07-11-2006 15:34)

As long as the attributes for the relevant span and div are the same, there should be no problem at all...

Perhaps if you posted a link to your implementation?

quote:

---

Perhaps if you posted a link to your implementation?

---

This, and using IDs and Classes should do the trick.

You might not have to float your divs (in this example, I don't think it is the best solution), just use relative positioning.

sure http://www.cerebra.co.uk/test/testUIold.htm

This is the industry selector menu on its own.

the page i want it integrated with has its containing divs and fonts specified in ems and will be positioned in the middle of the page (see home page) therefore i cannot absolutely position.

Cheers

Ben

Ben Corke | IT Recruitment Consultant | ben@cerebra.co.uk | www.cerebra.co.uk

So what is the actual problem that you are having? The example you posted doesn't help identify what the problem is, or what will need to be done to make it work in the environment you need it to work in.

As I said, however, as long as you apply the same attributes to both boxes, allowing for the influsnce of the containing <a> tag for the span, you should have no problems making this work (ie: same float, same margins, same display mode, etc...)

If you can post this in action within the actual page, and let us know what aspect is not working out, it would be a lot easier to help...

quote:

---

Cerebra specialise in Information Technology & Telecoms and Building Services Recruitment and have a team

---

"Have" should be 'has.'

___________________________________________________________________________
You'll never have to think outside the box if you don't get in the damn box in the first place.

Ok try the link now -

nojive - copy (and formating) is draft but changed anyway - thanks tho

http://www.cerebra.co.uk/test/testUIold.htm

Ben

Ben Corke | IT Recruitment Consultant | ben@cerebra.co.uk | www.cerebra.co.uk

ok so as you can see the absolutely positioned span is absolutely positioned, i tried changing this to relative positioning but of course it doesn't work.

the span is positioned off the screen until the a:hover repositions it. I keep thinking there must be a logical solution.

any thoughts?

thanks.

Ben Corke | IT Recruitment Consultant | ben@cerebra.co.uk | www.cerebra.co.uk

I tried wrapping the absolute positioned div in a relatively positioned div as apparently the absolute div will respect the containing relative div but nay joy.

Ben Corke | IT Recruitment Consultant | ben@cerebra.co.uk | www.cerebra.co.uk

still stuck on this - tables it is.

Hum, I don't see anything like the sun.com menu at your link.

I am referring to the large picture changer / *menu* at the top of the page. i.e. mouse over a button highlights it and changes an adjacent image.

Sorry if i was not too clear in my description. Maybe why i have no solution

thanks

FR

(Edited by FatRod on 07-28-2006 10:34)

Ah, there were some things over it so I didn't see it the first time.