# October 14, 2009 at 9:36 pm
#edit# I use IE8!
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
Now here is the htmlCode:
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=0]visible.png[/attachment]# October 15, 2009 at 4:29 am
This reply has been reported for inappropriate content.
Take the logo out of the flow and use absolute positioning. Check out Rob’s article here http://tutshelf.com/the-art-of-css-positioning/ and Chris’s article here http://css-tricks.com/absolute-positioning-inside-relative-positioning/# October 15, 2009 at 6:31 pm
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!
You must be logged in to reply to this topic.