Results 1 to 4 of 4

Thread: CSS & Javascript problem

  1. #1
    Join Date
    Jan 2011
    Location
    Cornwall, England
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default CSS & Javascript problem

    I have a work in progress website for a Pre-School and am having difficulties adding the gallery photo's. When you click on thumbnail they open up to the larger image UNDER navigation bar, yet the navigation bar is in the top section and the photo's are in the main content section. I would be most grateful if anyone can solve this mystery for me? Just need it to open above everything.
    The link is: http://www.fowey-preschool.co.uk/gallery.html

    Thank you for your time. Susie

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Using a text only editor like NotePad, in the engine/css/visuallightbox.css file change the highlighted as shown:

    Code:
    #overlay{
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 1000;
    	width: 100%;
    	height: auto;
    	background-color: #FFF;
    }
    
    #lightbox{
    	position: absolute;
    	top: 20px;
    	left: 0;
    	width: 100%;
    	z-index: 1001;
    	text-align: center;
    	color:#151410;
    	line-height:0;
    }
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2011
    Location
    Cornwall, England
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default CSS Problem

    Thank you so very much, I thought it would be something simple.
    Although I don't understand the z-index section.

    Thank you again John,

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, when you have relative, absolute, or fixed position as both the menu and the lightbox do, you have three other things you can set:

    left or right - the x-axis, how from the left or right it will be
    top or bottom - the y-axis, how far from the top or bottom it will be
    z-index - the z-axis, the stacking index for when two items are in the same general or overlapping x and y axis locations.

    The higher z-index will cover the lower one. The menu has 999, so I figured 1000 for the overly and 1001 for the lightbox.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •