Floating Image over table

[Wulfgen]

This may be simple to some but for me its a headache. i have a page with three stacked tables A-B-C all centered to the page (please dont get on me about using tables)

All the tables are 850px wide,
A is 80px tall (intended for the registration form login)
B is 30px tall (intended for the menu)
C is the contents

B has the menu positioned right

Here is the fun part; the logo is a transparent background png file also 80px tall and 330px wide (total area - I'm trying to get the logo to "float" over the left part of the all the tables and have the center of the logo, centered over the menu bar - make sense?

I've been over the web looking for a solution to this but all i could find was css styling to place the image at the bottom/left-right - top/left-right or positioned in the background.

Did I explain this right, I have the styling for the borders and the backgrounds of the tables already down, just need an assist with the logo positioning.

 

[vacunita]

Ignoring the overcomplicated use of the tables. (personally I wouldn't do it that way, but that's just me).

You could look into absolutely positioning the image, and setting its coordinates.

img.x
{
position:absolute;
left:20px;
top:20px;
z-index:1
}

Where X is your image's classname.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Wulfgen]

I am totally willing to try more elegant (css) solution to this - i just dont know how to set one up thats all

:-(

 

[BillyRayPreachersSon]

Also, as an aside... if your PNG has alpha-transparency, then you'll need to use some trickery to get it display properly in IE6 (investigate the AlphaImageLoader filter).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/