Question

I’m not sure if what i want is possible but i’m using a Mootools image gallery which you can see an example of here:

</script> 
    function startGallery() {
        var myGallery = new gallery($('myGallery'), {
            timed: true,
            showArrows: false,
            showCarousel: false
        });
    }
    window.addEvent('domready', startGallery);
</script> 

The gallery rotation is above but what i’d like to achieve, ideally, is the second text element (with the white background) to be wider than the top text element, so it looks more like the picture underneath.

There’s a lot of Javascript involved so i don’t know what i should post here to enable people to help, but just let me know what i should put in here and i’ll come back and edit.

Or, if some knows of somethign similar in jQuery which would allow me to get the same effect, but not require too much JS coding, i’d be much obliged.

Thanks in advance as always,
Dan

Answer 1

Try this css and see if its what your after.

.slideInfoZone {
    position: absolute;
    z-index: 10;
    width: 100%;
    margin: 0px;
    left: 0;
    top:40px;
    color: #FFF;
    text-indent: 0;
    overflow: hidden;
    padding: 10px 0 0 20px;
    height: 70px;
}

.slideInfoZone h3{
    background: #000; 
    width: 200px; 
    padding: 30px; 
    margin-left: -30px; 
    display:inline;
}

.slideInfoZone p {
    position: absolute;
    bottom: 0;
    background: #FFF;
    font-size: 14px;
    color: #000;
    margin: 20px 0 0 -20px;
    padding: 10px 0 10px 20px;
    width: 50%;
}

Basically what I did was remove your background color for the containing element, then I gave the p tag a bg color, and modified the padding/margin for the h3. Im not too happy with what I had to do with the h3 but without changing the markup at all it works.