Image margins

[richardz]

I'm using tp 9.7 with smf 1.1.1 and i have a question about the margin for images witch are used in articles. As you see in the attached screenshot the text is a bit to near to the image. Has someone an idea how i can create some margin around the images?

[Zetan]

Try these two links:

http://www.ironspider.ca/graphics/alignment.htm

http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

[Lesmond]

Try it with tables, some thing like this..

Code Select Expand

<div style="line-height: 1.3em;"><font face="Arial"></font><h4><font face="Arial">Hoi, welkom op onze website</font></h4>
<font face="Arial"><br>
<font face="Arial">Leuk dat je onze website bezoekt. Je vindt hier informatie
over het jongerenwerk in de gemeente Dinkelland. Het is onderdeel van
Trimaran, een organisatie voor sociaal cultureel werk. Naast de info over de
jongerencentra en hun activiteiten vind je hier van alles over de
Jongerenbus en alle info die je ook in de Jongerenbus kunt krijgen.&nbsp;<br>
&nbsp;</font></font>
<table border="0" width="100%" id="table1" cellspacing="1">
<tr>
<td><font face="Arial">
<img alt="centra" src="http://www.jongerenwerk.org/img/centrawelkom.gif" align="left"></font></td>
<td>&nbsp;</td>
<td><font face="Arial"><strong>&nbsp;Jongerencentra</strong> ââ,¬â€ Er
zijn 3 jongerencentra in de gemeente Dinkelland. Different in
Denekamp, 'n Emter in Ootmarsum en de Schöppe in Weerselo. Op
diverse momenten in de week zijn ze geopend voor diverse
bezoekersgroepen. Elders op deze website vindt je meer informatie
over programma's en openingstijden.&nbsp;</font></td>
</tr>
</table>
<p><font face="Arial">
<br>
<strong><img alt="Jongerenbus als infopunt" src="http://www.jongerenwerk.org/img/buswelkom.gif" align="right">Jongeren
Informatiepunt</strong> ââ,¬â€ In de gemeente Dinkelland vind je op diverse
plaatsen het Jongeren Informatiepunt. Het is een mobiel infopunt; de
Jongerenbus. Verschillende dagdelen is de bus te vinden op de bekende
standplaatsen. Voor actuele rijtijden zie het prikbord. In de rechterbalk
vind je onze folders over allerlei onderwerpen, verzorgd door de jongerenbus.&nbsp;</font></p>
<table border="0" width="100%" id="table2" cellspacing="1">
<tr>
<td>

<strong><font face="Arial"><img alt="forum" src="http://www.jongerenwerk.org/img/pbwelkom.gif" align="left"></font></strong></td>
<td>&nbsp;</td>
<td><font face="Arial"><strong>Het Forum</strong>ââ,¬â€ Wil je op hoogte blijven van het laatste nieuws? Meepraten over activiteiten en programma's of misschien wel een vraag droppen over een of ander onderwerp.....dat kan allemaal op het Forum. Ook vind je er regelmatig nieuwe foto's over activiteiten. Wil je zelf meehelpen aan het forum? Dat kan..meld het even bij een van de medewerkers.</font></td>
</tr>
</table>
<p><font face="Arial">
<br>
<strong><img alt="meidenwerk" src="http://www.jongerenwerk.org/img/meidenwelkom.gif" align="right">Meidenwerk in Dinkelland</strong> ââ,¬â€ Het meidenwerk is er om meiden vanaf 12 jaar een plek te bieden waar ze zichzelf kunnen zijn. Een ontmoetingsplek voor leeftijdsgenoten voor een praatje en een drankje. Uit sportieve, spannende, muzikale, informatieve, modieuze en creatieve activiteiten wordt er door de meiden een gevarieerd programma samengesteld. Naast deze activiteiten wordt er veel gekletst over wat meiden bezig houdt. Er zijn meidenactiviteiten in Ootmarsum, Denekamp en Weerselo. <br>
</font></p>
<p><font face="Arial"><font face="Arial">&nbsp;</font></font></p>
<font face="Arial"><font face="Arial"> </font></font></div>

I like the idea from your links Zetan, just add this to the end of img code vspace="20"
so it looks like this

Code Select Expand

<img alt="centra" src="http://www.jongerenwerk.org/img/centrawelkom.gif" align="left" vspace="20">

[Nokonium]

Try these two links:

http://www.ironspider.ca/graphics/alignment.htm

http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

Good links there  :up:

For some strange reason I was drawn to "The text flow stops here!" on the second one. 

[Lesmond]

For some strange reason I was drawn to "The text flow stops here!" on the second one. 

Think we better "nip that in the bud" before we start
sorry couldn't help myself

[Zetan]

For some strange reason I was drawn to "The text flow stops here!" on the second one. 

Think we better "nip that in the bud" before we start

hahahah.....ahhhhhh... if you look to the right of the page in the second link, you can clearly see Lesmonds Buds... well, they were buds when I first looked... Fully Bloomed now! 

[richardz]

thanks for the answers. I know the basics off using tables and HTML. I have already over 50 pages with text and images. So I was looking for a simple hint in maybe CSS or something like that. To edit over 50 pages with the given hints is a bit overdone.Before i used TP i was using SBlog at the front of my site. With CSS the margins could be defined like the example

Code Select Expand

.sblog_post_text img {
   float: left;
  padding: 8px;
}
I was hoping for a possibility like this. The SMF themes don't profide this possibility, so i was hoping that somewhere in TP this could be done.

[G6Cad]

Why TP V.097 and SMF 1.1.1 when you have an update TP V.0983 and SMF 1.1.2 with a lot of fixes to a lot of things ?
Most of the times the support for older versions stops as soon as a new update is released.

[richardz]

oke thnx....