Text wrapping

[Greiggy]

Hi all,

I want to start a new "prayer focus" section for worldwide and national prayer points.

The way we present this in the congregation is with a visual consisting of a couple of paras or a few bullet points wrapped round a picture -- we find that is a good way to connect and people remember it better.

Lots of news reports (newspaper sites etc) and html email marketing use text wrapping to good effect. Can anyone tell me a simple way of doing it (I don't want to spend a lot of time building tables and dividing the text into sections if I can avoid it).

Of course I can simply put the picture at the top with the text underneath, but wrapping seems more "immediate" to me

IanG

[mrbelfry]

Hi Ian

Not sure I entirely know what you mean but I think that the css float rule will work for you. Try something like this:
<p>
<img src="myimage.jpg" style="float: left" />
Here is my text. Hopefully this should appear to the right of the image!
</p>

Of course I may have understood what you wanted to do - if you could show us an example maybe I can get a better understanding

Thanks

[Greiggy]

mrbelfry --

I threw this together quickly this morning from material we used yesterday.

http://www.shinfield-baptist.org.uk/PRAYER%20FOCUS/Prayer_Focus_Aug05.htm

Gives you an idea of the need for improvement!

Will try your idea, thanks

IanG

[Greiggy]

mrbelfry --

It works! (well, almost -- see same link where I have experimented at the bottom of the page).

Now a little issue with the bullets of the ul.

Also I would like to get a good spacing between the bullet points -- at the moment I have a choice of completely closed up or too widely spaced.

Thanks for your help (is it raining in Manchester ;8-)

IanG

[mrbelfry]

lol - was throwing it down this morning but now it is gloriously sunny - unfortunately as my office is not air conditioned I much prefer the rain!

I have to shoot home now (my wife is outside waiting!) but I'll look at the problem in the morning unless someone else manages to solve it - (your bullet points are missing because of the css you used - i'll do some testing tomorrow and see if I can get a solution.

[Greiggy]

It's like Manchester down here today (but not as friendly :8-)

Thanks for your help so far. I should get more competent with html. Using Dreamweaver you just get lazy ?

IanG

[mrbelfry]

Hi there

I think I have a solution now! The bullets don't actually disappear they are just hidden underneath the image - so this problem would only occur when they image is on the left of the text. There are a couple of solutions to this problem.

1) You could fake the bullets by putting an image at the front of your list item that looks like a bullet point. Or even fake the list itself doing this. However your html syntax would then be all wrong and HTML snobs will shout at you and call you names.

2) You could just change the margin-left property of the list using css margin-left). If you add about 20px onto the width of your image and use that as your basic setting then you could fine tune to get the bullets were you want them eg. suppose your image was 100px wide:<p>
<img src="mypic.jpg" style="float: left"/>Text text</p>
<ul style="margin-left: 120px"><li>List 1</li><li>List 2</li></ul>

3) Solution 2 is the easiest to understand but has lots of problems - for instance if your picture is longer than your text then the text bunches up. If I was writing this page here is how I'd do it. It is a litte more complicated but only a bit and the result is much better! I would wrap each prayer point in a div and set the css rule 'clear' to both - that way you avoid the bunching up of text. Instead of adding the margin rule to the list I'd wrap all the text up in a div with the margin set to the width of the image. This will give you much more control of the individual elements margins within that div.<div style="clear: both">
<img src="mypic.jpg" style="float: left"/>
<div style="margin-left: 75px;">
<p>Text text</p> <ul><li>List 1</li><li>List 2</li></ul>
</div>
<div>
Remember that when you want your image on the right you need to change the margin-left property of the div to margin-right.

I hope this makes sense - if not feel free to moan at me. I'm not sure what you meant by the spacing between your bullets but if you add a padding-left rule to your li tags then you might get what you are after.

and it is still not raining in manchester :-)

[David Gillaspey]

Also I would like to get a good spacing between the bullet points -- at the moment I have a choice of completely closed up or too widely spaced.Hi Greiggy,

It seems to me that redefining (via CSS) the <LI> tag to include the margin-bottom or padding-bottom attribute might be the answer to this problem. (E.g., margin-bottom: 6px; )

Also, mrbelfry has suggested adding margin-left (or margin-right) to the bulleted text, but it seems to me it might be better to apply margin-left or margin-right (or try padding-left or padding-right) to the image instead.

I created a test document to demonstrate this. This CSS stylesheet, at the top of my test HTML document:

<style type="text/css">
<!--
li {
margin-bottom: 9px;
list-style-position: outside;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
}
-->
</style>

along with

<img src="art/FLORIDA/FLA_central_christian.jpg" width="250" height="168" style="float: left; margin-right: 24px;"> (screen shot of a church home page chosen at random from my database)

produced this result:

http://www.greatchurchwebsites.org/art/UL_image_test.jpg

Hope this helps.

Sincerely,

David Gillaspey
President
Great Church Websites

[mrbelfry]

d'oh! I knew there must have been an easier way than mine! My solution still depended on knowing the width of the image which makes things unneceessarily complicated - took me ages to type my reply as well ;-)