SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transparant Overlay onto NivoSlider - help!?

    Hi All,

    First post here so be gentle!

    Am trying to build my friends pub website for him and have run into a bit of a mountain. I am using NivoSlider for the slideshow and want to float a div over it with a transparent background. For now I am just using a block colour background and slideshow next to each other, but its just ugly!

    Example:

    http://deadspacedesign.co.uk/warwick/


    When I managed to float the div over thefull width slideshow in this page http://deadspacedesign.co.uk/warwick/gallery.html after each transition, the div would dissapear and fade in with the next slide. I think it may have something to do with the z-index but my limited knowledge has got me nowhere!

    Any help would be greatly appreciated

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi sho0sh, welcome to SitePoint!

    To be honest, I haven't a clue what you are trying to do. Unless I'm missing something, you haven't said what the overlay div is meant to do?

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Thanks for your reply, this is a mockup of what I am trying to do...

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Ah, I see.

    Keep the images full width and try something like this:

    Code CSS:
    #Splitter {
    	border:1px solid #666666;
    	position:relative;
    	height: 458px;
    }
     
    #Content {
    	padding:20px;
            position:absolute;
            right:0;
            top:0;
    	font-size: 1em;
    	height:418px;
    	width:240px;
    	color: #fff;
            background:rgba(0,0,0,0.3);
    }

    The last rule uses a partially transparent background color, but it won't work in all browsers, so you could instead use a semi-transparent image for the background.

  5. #5
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Major progress!! Thank you so much.

    http://deadspacedesign.co.uk/warwick/about.html

    Just need to sort the positioning out now, absolute positioning isnt working with this as the rest of the site moves when the window is resized, any ideas?

    Thanks for previous input hugely!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That's just the way absolute positioning works . Your best bet would be to remove the absolute positioning (I haven't take na look at the site to see if it's neccessary, but most of the time it isn't.)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys, managed a bit of a botched workaround in the end with help from my friend.

    www.deadspacedesign.co.uk/warwick


Tags for this Thread

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
  •