cssway:
my blog about cascading stylesheets, web standards,
and Freeway 4 Pro.
Fake Overlapping Text and Graphics (with Runarounds)
As a designer, I like the idea of overlapping images and text, and in such cases the text should wrap around the images. We all know this is easily achieved with CSS by adding a margin around inline images but what about images that aren’t inline? You know — images that lay partly over a block of text and partly outside of it… is there a way to make html text runaround in that situation? The short answer is no… but with a small amount of devious CSS we can create the appearance of overlapping items and keep the inline runaround we need.
First we set up the basic structure – a layered div/box with some text in it. Next we insert an image into the flow of text at whatever vertical level we want the final image to reside at, then size it and set the alignment to float left. Finally we give it a little margin on the top, right, and bottom edges so the text will flow around it.
To make the image seem to overlap the box of text we need to apply a negative left margin. Since Freeway won’t let us do that the 'normal' way (via the Inspector) then we will try applying it as a class style. We can’t do that “normally” either as Freeway won’t let us apply a class style to images. *Sigh*
So to move things along we select our inline image and choose the menu »Item »Extended… and add the class attribute in the <img> pane there.
Now go to the Edit Style window and create the style for the class declaration we just added to the image. Enter img.minus94 in the tag field (minus94 being the name of the class we added to the <img> tag) and create the margin-left attribute with an appropriate negative number.
This should be sufficient to achieve our intended results in pretty much every modern browser, but once again Internet Explorer needs some coercing. Fortunately the fix is simple: create a position:relative attribute for our image class style… because the image is floated, all IE needs is to be reminded how to treat parent-child items with special needs.
Here is an actual example.
30.04.2007. 02:52
This article hasn't been commented yet.