SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu displays beneath image instead of above

    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. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    you can use z-index to keep you menu on top, so that it does hides

    Code:
    #menu {
    	background:url(../images/menu.png) repeat-x;
    	height:51px; 
    	margin-bottom: 15px;
    	/*margin-top: 15px;*/
    	z-index:9999;
    	position:relative;
    	}
    vineet

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perfect, you're the man. Doez the z-index work only when elements are relative positioned?

  4. #4
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drtanz View Post
    perfect, you're the man. Doez the z-index work only when elements are relative positioned?
    you're welcome.

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

    vineet

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vinpkl View Post
    you're welcome.

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

    vineet
    Fixed (no pun intended )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    just replace z-index value 9999 with value 1

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

  8. #8
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, ignoring the invalid HTML (nesting divs inside spans), on li.show you set z-index:500. So set the dropdown to 501
    Code:
    #upcoming-events ul ul li{position:relative;z-index:501;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great thanks

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,565
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any help on this please?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

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

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <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>
                        <div style="clear:both"></div>
                        <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. #16
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •