layer logo position

[BlackBeltNinja]

I am working on a website, and I have a table with 3 rows, and 1 colm centered.
I also have a picture of the sites logo, that needs to sit in the first row of the table and sorta overlap a little into the 2nd row. But when I put the image in the 1st row, it makes that row too large height wise. How do I force that first rows height and allow my image to hang over it a bit?

I can't use absolute positioning for the logo image because the table is centered.

[BlackBeltNinja]

here is teh code i'm trying to do.
I need the logo offset about 15px from the top, and 15px from the left and for the top row to be about 115px tall.

[Shard]

do you need the logo centered in the top black area, or over to the left a bit??

[Shard]

You can use absolute positioning to do this regardless of scalability of design because an absolutely positioned element is positioned relative to its holding container (assuming its position is declared relative). So, what does that mean?

If I create an image/div and set its position to absolute - its top and left co-ordinates are based from point 0,0 of the screen drawing area (top left). This occurs even if I place it inside another container (e.g. a table) and move that container somewhere else. This happens because absolute positioning takes an element out of the "drawing process" of the page (e.g. its position does not affect anything around it or vice versa).

To correct this you need to simply specify that the container has "position:relative" - now any elements contained within it - that use absolute positioning - will start their 0,0 corordinates at the containers top left corner instead of the screens.

So in your top table cell add a div that has the attributes ..
width:100%; position:relative; height:115px
and then inside that div add your logo and give it an id with the attribute ..
position:absolute; top:0px; left:0px
or whatever movement pixels you require (remember you can use negative values to move the logo)

Hope that all helps :-)