PDA

View Full Version : CSS issue with flash menu not lapping image slider



ratinakage
Jan 25th, 2010, 11:43 PM
Hi all,

I am creating a new site with a jquery slider and a flash menu. Its built on blueprint but that shouldn't really affect anything. You can see how it works nicely here. Roll over the top menu links and see how they overlay the slider correctly.

http://www.africanwebscience.co.za/buildingblocks/contact.html

The client was not happy with the Easy Slider and asked me to change to the Anything Slider. Its movements are a bit smoother.

Here's my implementation:

http://www.africanwebscience.co.za/buildingblocks/contact2.html

Problem is, for some reason the Flash menu links don't overlap the pictures when you hover over them in this one. I have no idea why but I'm guessing its a CSS issue. My only css changes are when switching were to: style.css

I've been fighting with this for a couple of days. Any help would be very greatly appreciated!! :thumbsup:

Thanks...

jenius
Jan 26th, 2010, 12:14 AM
Any overlapping issues I've seen can be solved using either the z-index property or by layering the divs in a different order.

In this case, using z-index would probably do the trick. Go into the styles for "anything slider" in your stylesheet and add the property "z-index: -1" - see if that helps. It appears as if the slider is absolute positioned, so this should do the trick, it's just a question of where to add it (go for the largest wrapper).

In addition, from a web designer's viewpoint, I would say that you should scrap the slider, or make major modifications. The movement is very disorienting and distracting, and the user cannot control or stop it. If anything I would change it from a quick and jerky movement to a soft dissolve, and allow more time in between switches, or give the user control over it using arrows. The auto movement though is too quick and really distracting from the website

Excavator
Jan 26th, 2010, 03:35 AM
Hello ratinacage,
I guess it's up to the client but I certainly prefer the first slider over the one your switching to!
You may be able to solve your problem with some study on wmode (http://www.google.com/search?q=wmode&sourceid=ie7&rls=com.microsoft:en-us:IE-SearchBox&ie=&oe=).

ratinakage
Jan 26th, 2010, 07:04 AM
Any overlapping issues I've seen can be solved using either the z-index property or by layering the divs in a different order.

In this case, using z-index would probably do the trick. Go into the styles for "anything slider" in your stylesheet and add the property "z-index: -1" - see if that helps. It appears as if the slider is absolute positioned, so this should do the trick, it's just a question of where to add it (go for the largest wrapper).

In addition, from a web designer's viewpoint, I would say that you should scrap the slider, or make major modifications. The movement is very disorienting and distracting, and the user cannot control or stop it. If anything I would change it from a quick and jerky movement to a soft dissolve, and allow more time in between switches, or give the user control over it using arrows. The auto movement though is too quick and really distracting from the website

Thanks for your reply!!

z-index fixed my problem! :D

I investigated and at slower speeds, the anything slider does move a lot smoother than the easy slider. I hadn't yet configured the speed but it is controlled in the code. I agree though about the slider. A fade would have worked better but in this case its what the client wants...

Thanks!

jenius
Jan 26th, 2010, 08:18 AM
No problem - I'm glad that fixed the problem :D

Sometimes clients drive me crazy that way... You hire a designer because they know how to design a site. The number of stories I have about my last client's retarded things she told me to do... ridiculous.

You should strongly advise them to think about that slider though. I think one like this (http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/index.html) (tutorial and files (http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html)) would work best for this kind of site - it doesn't move quickly or automatically, has nice titles, and is user controlled. Idn, just my 2 cents.

Good luck with finishing up the site!

ilkerduran
Apr 7th, 2010, 09:24 PM
Any overlapping issues I've seen can be solved using either the z-index property or by layering the divs in a different order.

In this case, using z-index would probably do the trick. Go into the styles for "anything slider" in your stylesheet and add the property "z-index: -1" - see if that helps. It appears as if the slider is absolute positioned, so this should do the trick, it's just a question of where to add it (go for the largest wrapper).

In addition, from a web designer's viewpoint, I would say that you should scrap the slider, or make major modifications. The movement is very disorienting and distracting, and the user cannot control or stop it. If anything I would change it from a quick and jerky movement to a soft dissolve, and allow more time in between switches, or give the user control over it using arrows. The auto movement though is too quick and really distracting from the website

Thanks for your great answer :)
It really fixed my problem.
May the force be with you ...

ilker