How can i accomplish this design?

[billy_111]

Hey everyone,

I need to add an image to the following website:

http://www.glofamily.com/inner/

I need to add a weird curved image but i have to make it appear on top of the content, see the attached jpeg in the footer..

How can i accomplish this?

Thanks

[MJ7]

Have you tried absolute positioning, z-indexing and then using negative margins?

For example - the top picture should have a lower z-index than the content block below and both should be absolutely positioned within their container. This will give you a gap which needs closing so on the bottom container put something like this in your CSS:

margin-top:-30px;

That should then close the gap and allow the top image to overlap.

If you use 32bit PNG files you can even have transparency or semi-transparency in your image.

Any help?

[billy_111]

Hey,

Thanks, check the site out now :-)

I didn't think it would work

Thanks again

[MJ7]

Looking good to me - well done.

MJ7

[billy_111]

Hey, just one problem, it doesn't look right in IE7,

Is there something i can do for a quick fix?

[MJ7]

I would use IE conditional comments and use a separate IE7 stylesheet - I don't have the code here but you can google conditional comments.

[billy_111]

I figured it out :-)

Thanks