Overlap

[jdogg]

Hello everyone.

#edit# I use IE8!

I’m trying to engineer a (dare I say it) quite complicated layout in css, and in particular am having trouble overlapping an image (the logo) over another section of the page. Because the section it overlaps will eventually be a javascript code to randomise what is displayed in that section – I cannot use sliced images (I do not think) to overcome this.

Here is what happens. I have put the logo in a div (green border added for clarity) on the title ‘row’ (I am not using tables, this is simply the row of divs that are between the orange bar and the featured picture row). When I set the overlap here as hidden (see first picture), it behaves as I’d expect, effectively cropping the image to within the div area. However, when I set overlap to visible (see second picture), while it ‘overlaps’ correctly at the top and left side, it stretches the div box down and right instead of overlapping, messing up the layout.

I’m pretty sure this shouldn’t happen. So I can’t see where I went wrong.

Here is the css for the ‘row’ in question:

Code:

#titlerow
{
width:100%;
max-height: 70px;
margin: 0em;
padding: 0em;
color: #333;
background-color: #ffffff;
padding-bottom: 0em;
text-align: left;
}

#headerlogo {
width: 20px;
height: 70px;
background-color: #ffffff;
text-align:left;
float: left;
padding: 0;
overflow:visible;

}

img.logo
{
position: relative;
left: -30;
top: 40;
z-index:100;}

#headertitle {
max-height: 70px;
background-color: #ffffff;
text-align:left;
height: 70px;
float: left;
width: 215px;
padding-top:8px;
padding-bottom:8px;
padding-right:15px;
padding-left:85px;
vertical-align: middle;

}

#headertext
{
max-height: 70px;
background-color: #ffffff;
text-align:left;
height: 70px;
float: left;
width: 320px;
padding-top:.8em;
padding-bottom:8px;
padding-right:15px;
padding-left:.5em;
vertical-align: middle;

}

Now here is the html

Code:

TRANSFORM YOUR PHOTOS INTO PERSONALISED CUSTOM POP ART MASTERPIECES AND DISPLAY THEM ON CANVAS. A UNIQUE AND ORIGINAL GIFT IDEA.

Any help would be massively appreciated- it’s driving me mad.

[attachment=1]hidden.png[/attachment]
[attachment=0]visible.png[/attachment]

[jdogg]

Thanks apostrophe – that did work actually.

I had shied away from using absolute positioning completely due to the fact I thought a browser window resize would mess everything up. Anchoring the absolute positioning to a different layout element solved that so thanks.

In case anyone sees this and has a similar problem – I’d say persevere with the second link above.

Thanks again – now to randomise the content of one of the sections!

[Author]

Posts