XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Community Support forums / 
  3. XOOPS general usage questions 
  4.  / Wrapping Text Around an Image?
Register
1
tedsmith
Wrapping Text Around an Image?

  • 2004/10/30 19:23

  • tedsmith

  • Home away from home

  • Posts: 1151

  • Since: 2004/6/2 1


This will be really quick for anyone who knows that they're on about....

When I insert an image file into my text, I want the text to wrap round the picture leaving a small white border around the picture. In the old html days you could use vspace and hspace to set vertical and horizontal text wrapping.

How do I achive this with Xoops?

Currently, I'm writing my text, then leaving a space and using the Resized Image method, but that just leaves a huge white gap to the right or left of the picture.

If you go to my home page and scroll down to the bit about the RSPCA trying to find a home for a Bull Terrier you will see what I mean.

Thanks

Ted
2
tedsmith
Re: Wrapping Text Around an Image?

  • 2004/10/30 19:37

  • tedsmith

  • Home away from home

  • Posts: 1151

  • Since: 2004/6/2 1


Sussed it out now - did not realise that if I just set the positioning attribute to either left or right and then add it to the end of a paragraph, as opposed to creating a paragraph of its own, XOOPS nicely appends it to the end of the sentance, and wraps the rest of the text around it.

I'd still be interested to know how to achive vspace and hspace though? As you will see, the text runs uncomfortably close to the graphics.

Also, how do I add a border? Using HTML only I can add "border=1" or something to the , but I like by blocks to be auto php with smilies etc enabled, which does not appear to use the border property? Any thoughts?
3
Stewdio
Re: Wrapping Text Around an Image?

  • 2004/10/30 19:41

  • Stewdio

  • Community Support Member

  • Posts: 1560

  • Since: 2003/5/7 1


img.floatLeft { float: left;
margin: 4px; }

img.floatRight { float: right;
margin: 4px; }

The float attribute in CSS is what will wrap your text. There are many references on the net that you can googlize (is that a new word?).

CSS image wrap, or CSS float are good starters for some comprehensive searches. Some realy interesting stuff out there, like wrapping text to follow the edge of a curve, like a ball for instance.
4
tedsmith
Re: Wrapping Text Around an Image?

  • 2004/10/30 19:55

  • tedsmith

  • Home away from home

  • Posts: 1151

  • Since: 2004/6/2 1


Thanks Stewdio - ever helpful as always...

Just one thing - where do I add that little bit of code you give? Do I just add it next to the img..../img link or do I have to put it in my style.css file residing in my theme folder? If so, where abouts in that do I put?

I'm sorry - I'm really rubbish when it comes to code and stuff.
5
Stewdio
Re: Wrapping Text Around an Image?

  • 2004/11/1 5:20

  • Stewdio

  • Community Support Member

  • Posts: 1560

  • Since: 2003/5/7 1


This would go into your .css file and when you place an image in your site html, you would assign the class name to the image, so that your html file will read that line or two of .css in order for it to know what to do with it. You don't have to use the class names I provided, you can make up your own so long as the class used in your html is the same as the class defined in your .css and is not duplicating an existing entry in your .css

I'm not a .css expert yet, and others would be better suited to give you a code snip of what to do with your img tags.

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

266 user(s) are online (181 user(s) are browsing Support Forums)

Members: 0

Guests: 266

more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits