Overlapping getting messed up by Javascript?

I'm an intern and am actually looking for someone to help me work this entire project, I mean if the forum is willing to do it for free that's excellent, but I could offer some form of compensation (for doing my job haha)


Essentially my goal was to create a changing image on the index, and have an overlapping semi transparent bar on the right. The image and the bar/text/link all need to change simultaneously, and I have (thus far) gotten the image to change using the following;

http://jonraasch.com/blog/a-simple-jquery-slideshow

So, I use all their javascript etc.

How exactly can I get a div box over the image?

http://i52.tinypic.com/ouv3ex.jpg

The city image is position absolute, and the z-index doesn't work worth jack to get another one over it. Or perhaps that's caused by the changing nature of the code. (the transitions)

I also tried using a float & relative positioning with a left: -px, that wouldn't work, but I may have done something wrong...

NOTES:
I need an additional image overtop (the title "Unrivaled Strategy")
The "[read more]" needs to be the only clickable portion.

2 Possibilities:
A)The box is simply a transparent portion of the city image, the text overlaps on the right.
B)The box is the second div and has a semi transparent background....

All the Coding is Available here,

HTML Java Inscribe:

<script type="text/javascript">

function slideSwitch() {
var $active = $('#slideshow DIV.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});

</script>

HTML Div:

<div id="slideshow">
<div class="active">
<a href="google.com/"><img src="OPF/BG/b1.jpg" alt="Slideshow Image 1" /></a>
</div>

<div>
<a href="google.com/"><img src="OPF/BG/b2.jpg" alt="Slideshow Image 2" /></a>
</div>



CSS Controls:
#slideshow {
position:relative;
height:484px;
margin-left:10px;
}

#slideshow DIV {
position:absolute;
top:0px;
left:0px;
z-index:8;
opacity:0.0;
height: 484px;
background-color: #FFF;
}

#slideshow DIV.active {
z-index:10;
opacity:1.0;
}

#slideshow DIV.last-active {
z-index:9;
}

#slideshow DIV IMG {
height: 484x;
display: block;
border: 0;
}


Thank you so much in advance! Let me know if you want to work with me also.

Bring
Up
My
Post

So, I guess the reason is because I can't put a div within a div given the current cycling of the divs, is this correct?

I really need help...

Bring
Up
My
Post

So, I guess the reason is because I can't put a div within a div given the current cycling of the divs, is this correct?

I really need help...

i think the problem is in how you worded your first post... i read it and immediately moved on... i am more willing to help you now bc it seems like you are trying to do it yourself, but in the FP you essentially asked for other ppl to do your work and you are getting paid for it... this is simply not the forum for hiring freelance work (so no post's back bc of that) and this forum overall (entire site) does not take to well with ppl asking other ppl to do their work for them... especially when it is a learning xp... i would suggest working through it in here (and by your "bump" you may get more responses now- again seems like you are trying to do something)... i think paying someone else to do it will defeat the purpose of an internship and will (in the long run) hurt you... looking at code now... will get back to you as to ideas... but one thing i did see as i scanned was that in #slideshow DIV IMG {styling} you set a height of 400somethingx instead of px... it might be something as simple as that...
thinking*** :)

Well what's funny is I would prefer to do it myself I just offered that because I felt like it was a hefty amount of work to help on.

I have succeeded in my task, by the way, but adding even more animation and making it more simple, I decided to use:

http://www.serie3.info/s3slider/demonstration.html

So I guess I can delete this now.

Unless we want to discuss problems with this system as well...

I can't seem to change opacity of the text without changing the opacity of the block. I want the writing to be extremely easy to read, the singular control for opacity of text/black bar is not helping...