PNG Issue

[zimmo]

I am trying but failing to get this to work. I have used a slider (bxslider)and made some changes to it so that I have my other slides visible.

 

Then I have added a background png so that the right and left images are covered with a transparent png with around 80% opacity.

 

Now the problem I am having is that because I have applied this image to the div it is now stopping the links being active.

 

Can anyone help me get this right, I need the transparent png to be over the main viewport so the right and left images are not fully shown. If you view this url you will see what i mean:

 

http://www.barryzimmerman.co.uk/new/

 

When you see the text for each slide, it should be an active link to the website, but because of the png it is stopping this. I really want to achieve this, so any help much appreciated.

 

The css files are here:

http://www.barryzimmerman.co.uk/new/css/design.css

http://www.barryzimmerman.co.uk/new/css/content.css

 

Please help

[spiderwell]

i think z-index wouldnt be any good as it would then make the image in the view port lay on top of the alpha png file.

 

I think your best bet is to put 2 divs inside the #headergrnd which are floated left and right and simulate the same idea but leaving an actual gap in the view port area . so main container is 100% and floated divs to left and right are like 25% width of their containing div( #headergrnd)

and just apply the background image to the smaller divs.

 

hope that makes sense to you

 

 

 

[zimmo]

Thanks for this, I think this is the only way to acheive this. When you say 25% of the container div how would I do this. I have tried having a div left and right with the background, but when I set it to 25% it does not align correctly. I think this is due to the fact that the main container is not 75% of the window. I use the header 100% just for the background image (which is not working as its over the main view port).

 

The acutal slide is 1030pixels wide (the image).

 

So how would I work this if I have a set size image.

 

Thanks again for your assistance.

[spiderwell]

I was just guesitmating those percentages, just to give you the idea

 

well if you know the width of the container and the viewport, take the smaller from the larger to get a figure of remaining area and divide that by 2 and the left and right div should be that width.

 

i guess the problem is the outer ones need to expand to fill the screen so they cant be fixed. I'm not so sure how to do that really,

 

It might be easier to use a table with 3 columns and use fixed center and * for the other 2 cells. but i hate tables.