Menu displays beneath image instead of above

HTML & CSS
1

In my site http://tinyurl.com/ybdodnw the drop down menu in the ‘About’ option from the main menu is displaying beneath an image further down in the site, I would like it to display above it, how can i fix this? thanks

2

in the what’s on section, the popup when you hoever on one of the events conflicts with the text beneath it, i would like to fix it.

also in the gallery page, you can see that the gallery entitled Zebbug is on the right hand side. I would like it to appear on a totally separate row beneath the row above it, and therefore on the left side of the page. the only way i have managed to do this is to give them a fixed height, but its not the best as when the caption contains only one word there will be a big gap to the row beneath. is there a better solution? thanks

3

you can use z-index to keep you menu on top, so that it does hides


#menu {
	background:url(../images/menu.png) repeat-x;
	height:51px; 
	margin-bottom: 15px;
	/*margin-top: 15px;*/
[COLOR="Red"]	z-index:9999;
	position:relative;
[/COLOR]	}

vineet

4

perfect, you’re the man. Doez the z-index work only when elements are relative positioned?

5

you’re welcome.

z-index works only if the element’s position is defined whether relative or absolute.

vineet

6

Fixed (no pun intended ;))

7

im seeing that this fix now creates a problem in my gallery page http://tinyurl.com/yaggcdh as the menu doesnt fade like the rest of the content and appears above the image. you need to click on an image to see this.

8

just replace z-index value 9999 with value 1


#menu {
	background:url(../images/menu.png) repeat-x;
	height:51px; 
	margin-bottom: 15px;
	[COLOR="Red"]z-index: 1;[/COLOR] /* earlier it was 9999 */
	position: relative;
	}

vineet

9

ok got that, the final problem im having with this (i hope) is that when on the main page once clicks on the What’s on items on the left sidebar, the box that displays as a pop up displays beneath the rotating image, would like it to go above that.

10

Hi, ignoring the invalid HTML (nesting divs inside spans), on li.show you set z-index:500. So set the dropdown to 501 :slight_smile:

#upcoming-events ul ul li{position:relative;z-index:501;}
11

great thanks

12

You’re welcome :).

13

any help on this please?

14

Hi,

For the overlap in the what’s on section try this:


#content-wrap #upcoming-events ul li{ position:static}
15

To get the zebbug photo on a new line you would need to insert a clearing div to force the next row down.

e.g.


<div class="ngg-album-compact">
                        <div class="ngg-album-compactbox">
                            <div class="ngg-album-link"> <a class="Link" href="/gallery/?album=2&amp;gallery=12"> <img class="Thumb" alt="Gudja Race" src="http://www.pembrokeathleta.com/wp-content/gallery/gudja-race/thumbs/thumbs_dpp_0054.jpg"/> </a> </div>
                        </div>
                        <h4><a class="ngg-album-desc" title="Gudja Race" href="/gallery/?album=2&amp;gallery=12" >Gudja Race</a></h4>
                        <p><strong>3</strong> Photos</p>
                    </div>
                  [B]  <div style="clear:both"></div>[/B]
                    <div class="ngg-album-compact">
                        <div class="ngg-album-compactbox">
                            <div class="ngg-album-link"> <a class="Link" href="/gallery/?album=2&amp;gallery=15"> <img class="Thumb" alt="Zebbug" src="http://www.pembrokeathleta.com/wp-content/gallery/zebbug/thumbs/thumbs_dpp_0073.jpg"/> </a> </div>
                        </div>
                        <h4><a class="ngg-album-desc" title="Zebbug" href="/gallery/?album=2&amp;gallery=15" >Zebbug</a></h4>
                        <p><strong>2</strong> Photos</p>
                    </div>

If you wanted an automatic method then you would either have to fix the height for all the floated elements so that they are the same height and then they wouldn’t snag. Or alternatively change the method from floating to using display:inline-block instead but you would need to add some fixed for ie7 and ie6 as shown in the above link.

16

thanks!