- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi Chaps
Long time reader first time poster here.
I’m having some issues with a javascipt drop down menu and slideshow.
I have the drop down menu sitting on top of my slideshow using code below, however intermittently the drop menu is falling behing the slide show. When I refresh the browser window the drop down returns on top of the slideshow as desired, however after a while it will fall behind again. Obviously this is not ideal.
The code I have used is as follows:
the drop down menu
.navHeader
{float:left; width:930px; height:45px; text-align:center; background-image: url(http://images.itc-uk.com/websiteimages/classics2010/css/nav-new.jpg); background-repeat: no-repeat; margin: 0px 0 0 0; font-family: Century Gothic, Sans-Serif; padding: 0 0 0 20px; position: relative; z-index: 100;}
the javascript slideshow
.slideshow
{float: left; width: 950px; height: 350px; z-index: 1; margin: 0px 0 0 0}
It has been suggested that it could be a cacheing issue.
Any advice gratefully received.
Thanks
Gavin
Welcome to the forums :)
Try add ‘position: relative’ to ‘.slideshow’
Thanks Jamy_za
That seems to have it sorted.
Cheers
Gavin
For people returning to this post for reference and wondering why the magic-one-liner that jamy_za provided works;
The z-index property only effects positioned elements.
You can position an element without moving it out of its place in the normal flow of your html document by adding position: relative – because the relative value means; move the element relative to its current placement. So, if you do not actually move it anywhere – it basicly just enables the z-index property.
Links for reference:
position property: http://www.w3schools.com/Css/pr_class_position.asp
z-index property: http://www.w3schools.com/Css/pr_pos_z-index.asp