daring_du Posted December 7, 2009 Share Posted December 7, 2009 Hi again,I've pasted in a css flyout menu and then stacked an image over the top of it so that the image looks a bit like a border around the menu.I did this using z-index.The image is in a containing div and the menu elements are inside that div.The container for the content of the page has a z-index of -500. The menu container has a z-index of -20 and the sub container to set the image on the menu has no z-index. This set up shows the elements in the way I described above, with the menu stacked between the background of the main content div and the sub container with the image that I want placed over the menu.However, with this set up the a:hovers on the menu are not working. I think I remember something about images affecting a:hovers in this way and that there is a solution, but I can't recall where I saw that information now. Any clues? Here is the code for the relevant bits and pieces.I'm hoping thistle be enough information without people needing to actually see the images cause I'm in a rush and it's a hassle to upload it right now. Hopefully it's a common problem with a very common answer... #containerINDEX { position:relative; width:882px; height:1617px; margin-right:auto; margin-left:auto; background-image:url(plainINDEXj.jpg); background-repeat:no-repeat; border:1px solid transparent; z-index:-500; } .menu {font-family: arial, sans-serif; width:106px; height:150px; position:absolute; margin-left:40px;top:180px; font-size:11px;z-index:-20}.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:114px; height:20px; padding-right:10px; text-align:right; border:1px solid black; background:#c9c9a7; line-height:19px; font-size:11px;}.menu ul {padding:0; margin:0;list-style-type: none; }.menu ul li {float:left; margin-right:1px; position:relative;}.menu ul li ul {display: none;}/* specific to non IE browsers */.menu ul li:hover a {color:red; background:#b3ab79;}.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}.menu ul li:hover ul li ul {display: none;}.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px; height:110px; margin-top:10px; margin-left:10px;padding:10px;}.menu ul li:hover ul li a:hover {background:#dfc184; color:#000; height:110px;}#flycontainer { position:absolute; height:335px; width:420px; margin-top:70px; padding:0px; background-image:url(flyoutart1.png); background-repeat:no-repeat; } Link to comment Share on other sites More sharing options...
thescientist Posted December 7, 2009 Share Posted December 7, 2009 i think we need the HTML too. Is the point of the image to give a border? Can you just give the hover border properties? Link to comment Share on other sites More sharing options...
daring_du Posted December 7, 2009 Author Share Posted December 7, 2009 i think we need the HTML too. Is the point of the image to give a border? Can you just give the hover border properties?haha good ole' faithful scientist. thanks for replying. Even though I only have minutes left I went ahead and decided to upload the code so that you can see what I'm talkin about. Once I get an #ID stuck into my head it's hard to let go...I'm sure there is an answer to this! the dweebsite in questionsBTW the topic in question is located at the bottom left of the rounded rectangle containing all the content on the home page.BTW.2: I've adopted the strict doctype (as suggested) so I hope that makes some difference but even still, if anyone looks at this in IE it's gonna be messed up...BTW.3: please note I only just put this together today so I've not yet had time to change the color scheme of the menu to look more *pallet/able: (/*spelling hack*/) to the website in general; (I copied the code from cssplay!) but if anyone wants to suggest hex codes I'm happy to give them a try. :)Anyway, the HTML looks like this; It's at the very bottom of the page...UPDATE: since loading the code onto the website it seems that the issue of non-working a's has affected all the lists on the page (the 5 buttons on the top as well as the buttons to the right, which all use <ul>).<div id="flycontainer"><div class="menu"><ul><li><a class="hide" href="../menu/index.html">W3Schools</a><!--[if lte IE 6]><a href="../menu/index.html">DEMOS<table><tr><td><![endif]--><ul><li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">A great site with all kinds of tutorials and references. If you want to know something about computer languages and web design, you should definitely go here.</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a class="hide" href="index.html">CSSplay</a><ul><li><a href="spies.html" title="a coded list of spies">A HUGE variety of css code; some very simple, some very practical; and some very amazing, but ALL very cool.</a></li></ul></li><li><a class="hide" href="../layouts/index.html">Perishible press</a><ul><li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Heaps of practical info on all kinds of useful computer stuff. Cheers to Jeff Starr for all his hard work and great tutorials.</a></li></ul></li><li><a class="hide" href="../boxes/index.html">110mb.com</a><ul><li><a href="spies.html" title="a coded list of spies">Thanks to 110mb for the free hosting. Be sure to look at the forum as well. Thanks to the posters who contributed feedback on the development of this site.</a></li></ul></li><li><a class="hide" href="../mozilla/index.html">statcounter.com</a><ul><li><a href="../mozilla/dropdown.html" title="A drop down menu">A comprehensive website for gathering practical info about web traffic, and it's free (but please do be sure to give credit to the creators at some point, as well!</a></li></ul></li></ul></div></div> BTW.4 the statcounter isn't up yet but I'm working on it. (well it's a long story but it's up and it ain't up...) Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.