irregular wrapping

[gerkintrigg]

Hi everyone,

 

I want to use CSS to wrap around an irregular shape (kinda like I've tried to do here: http://theperilouspostman.co.uk/index.php)

 

I have had a look at some of the experimental CSS exclusions and stuff but I wondered whether there's a robust way of ensuring that people see it as I want them to, regardless of whether they have the latest browser and settings. After all, many of the audience for this site might access it from schools - and they're not well known for having the latest technology anyway.

 

Can I do it using blank PNG files like I have here? if so, how do I make it actually work?

Are there tutorials online? I've had a search and can't find what I need.

 

Neil

[kicken]

You don't need a blank PNG, just a bunch of divs with set width's and height's, for example:

http://cssdesk.com/tcn9s

<style>
.wrap { float: left; clear: left; }
</style>
<div>
    <div class="wrap" style="width: 0px;height: 40px;"></div>
    <div class="wrap" style="width: 30px;height: 19px"></div>
    <div class="wrap" style="width: 80px;height: 15px;"></div>
    <div class="wrap" style="width: 70px;height: 40px;"></div>
    <div class="wrap" style="width: 172px;height: 16px;"></div>
    <div class="wrap" style="width: 202px;height: 16px;"></div>
    <p>test test test test test test test test test test test test test test 
    test test test test test test test test test test test test test test 
    test test test test test test test test test test test test test test 
    test test test test test test test test test test test test test test 
    ...
    </p>
</div>

Alternatively, you can slice up your image into a bunch of variable width images and float them, as described here

[gerkintrigg]

fantastic! thanks for that:

http://theperilouspostman.co.uk/index.php

[gerkintrigg]

One tiny niggle...

I have sorted the homepage like this: http://theperilouspostman.co.uk/index.php

But the author page, I want the author's picture to sit on the right at the top, with text wrapping around it. I can't do this in the template. The only way I worked out how to (sort of) do it is by putting the floating image code before the wrap tags, but even that isn't ideal. Any suggestions? 

Example: http://theperilouspostman.co.uk/meet_the_author.php