1
jfmoore
Image spacing, text wrap?
  • 2008/1/3 4:16

  • jfmoore

  • Quite a regular

  • Posts: 360

  • Since: 2004/6/6 5


This is regarding how to embed an image, have text wrap around the image, and have space between the image and the text? I did a search and saw several threads on this subject but no real answer. The answers I saw seemed to fix it in one place but break something else.

What I got from reading all of this is that, if you put it in the theme style.css, then it either applies to things you do not want it to - like smilies - or it doesn't apply to all that you do want it to. So, and correct me if I am wrong, I am left with the conclusion that padding (or border or margin) should be applied to each image when embedded and not globally. So, let me ask it this way:

If, say, I want to embed an image in a SmartSection (or News) article, or in block content, have the text wrap around the image, have the image aligned to the left, and have 10px spacing between the right side of the image and the text, how would this be done? Would you use the [img] tag or html tag, and how would it be formatted?

Jere
...

2
script_fu
Re: Image spacing, text wrap?

Make your own class called textwrap or something and put it into your style sheet. Where ever you need to use this layout in your website use that class.

3
joninzar
Re: Image spacing, text wrap?
  • 2008/1/3 8:45

  • joninzar

  • Just popping in

  • Posts: 12

  • Since: 2006/11/7


The Script_fu's answer very good, too

If I have understood well (my English isn't enough good), you question how to do, too, if you want to embed an image, once for example, in a block, article, etc?

Quote:
I want to embed an image in a SmartSection (or News) article, or in block content, have the text wrap around the image, have the image aligned to the left, and have 10px spacing between the right side of the image and the text, how would this be done? Would you use the [img] tag or html tag, and how would it be formatted?


Yes. You can use this code for it:

style="float: left;margin-right: 10px">

(And enable HTML tags)

With float (left or right) you can put your image at left or right, embeded in around text.

margin-right: 10px gives you a 10 pixels blank space between the image and text.
If you want to do the same above and top:
style="margin-right: 10px; margin-top: 10px; margin-bottom: 10px"

Regards

4
jfmoore
Re: Image spacing, text wrap?
  • 2008/1/3 16:40

  • jfmoore

  • Quite a regular

  • Posts: 360

  • Since: 2004/6/6 5


@joninzar
Thanks. Your answer was on target.

@script_fu
This is interesting. I think I can figure out the class part, ( I guess .textwrap img {...} )but how do you invoke it so as to apply it where you want and not where you don't want?

This really should be in the FAQ or somewhere easily accessed.

Jere
...

5
jfmoore
Re: Image spacing, text wrap?
  • 2008/1/23 19:55

  • jfmoore

  • Quite a regular

  • Posts: 360

  • Since: 2004/6/6 5


A gentle little "bump".
...

6
kris_fr
Re: Image spacing, text wrap?
  • 2008/1/23 20:12

  • kris_fr

  • Theme Designer

  • Posts: 1009

  • Since: 2005/12/31


hi,

theme name ?

@++

Login

Who's Online

247 user(s) are online (169 user(s) are browsing Support Forums)


Members: 0


Guests: 247


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