text beside an image?

[Dave Parker]

Is there a way to have text beside an image in a tiddler instead of
just above and below?

Dave Parker

[Dave Parker]

Nevermind,
I looked up Tears of the Sun:

http://lewcid.googlepages.com/tots.html#Introduction

and found this:

{{left{
[img[tots.jpg]]}}}

I don't know what it means, but it allows the text after it to appear
to the right of the image.

[FND]

> {{left{
> [img[tots.jpg]]}}}
> I don't know what it means, but it allows the text after it to appear
> to the right of the image.

That uses floating:
.left {
float: left;
margin-right: 1em;
}
This means that the following text (as well as other elements) will wrap
around this floated element.

In the TotS presentation, that class is defined in [[MyStyles]]:
http://lewcid.googlepages.com/tots.html#MyStyles

-- F.

[Eric Shulman]

> This means that the following text (as well as other elements) will wrap
> around this floated element.
>
> In the TotS presentation, that class is defined in [[MyStyles]]:
> http://lewcid.googlepages.com/tots.html#MyStyles

You can also do this without the custom class, using native TW image
syntax:

[<img[foo.jpg]] for "float image left"

and

[>img[foo.jpg]] for "float image right"

-e
Eric Shulman
TiddlyTools / ELS Design Studios

[schilke]

> You can also do this without the custom class, using native TW image
> syntax:
>
> [<img[foo.jpg]] for "float image left"
>
> and
>
> [>img[foo.jpg]] for "float image right"

awesome...

[Morris Gray]

I've found that this method

> > [<img[foo.jpg]] for "float image left"

Doesn't give a very pleasant effect. You can see what I mean here

http://twhelp.tiddlyspot.com/#Images

Morris Gray
http://twhelp.tiddlyspot.com
A TiddlyWiki help file for beginners

[schilke]

> I've found that this method
>
> > > [<img[foo.jpg]] for "float image left"
>
> Doesn't give a very pleasant effect. You can see what I mean here
>
> http://twhelp.tiddlyspot.com/#Images

Yeah, but FOA it's really the quick&dirty method and without using a
link it's definitely less ugly. In CSS you normally would float the
link which inherits the image (or another element which wraps both) -
this method floats the image only. As a workaround you could consider
giving it a global

img {
/* img.content */
padding:3px;
/* margin: 3px; */
}

or the like to make it look nicer. Plus: text justify always messes
with floats, that's not a combination to trust in (CSS) - besides the
fact that justified text is evil (usability).

--
schilke

[David]

schilke,

Great suggestion! Now, in presentation mode wouldn't it be
better to use a Table to basically keep the Nav buttons in the same
place? Any excellent sample out there? Anyway to put a CR in a
table? A line break(s) in a |image|text| gave me fits, the text with
a line break would have looked better such as Name and below Name like
"Born 2010"!
Quick and dirty or easy would be nice!

David

On Aug 31, 3:59 pm, schilke <googlegroups.tt.ch...@xoxy.net> wrote:
> > I've found that this method
>
> > > > [<img[foo.jpg]] for "float image left"
>
> > Doesn't give a very pleasant effect. You can see what I mean here
>
> >http://twhelp.tiddlyspot.com/#Images
>
> Yeah, but FOA it's really the quick&dirty method and without using a
> link it's definitely less ugly. In CSS you normally would float the
> link which inherits the image (or another element which wraps both) -
> this method floats the image only. As a workaround you could consider
> giving it a global
>
> img{

> /*img.content */

[schilke]

> Now, in presentation mode wouldn't it be better to use a Table to
> basically keep the Nav buttons in the same place?

short: no.
long: a) tables for content are fine, tables for layout are - evil
(even more than justified text...)
b) CSS is always better for positioning than tables are - in some
cases even webstandards evangelists may tend to use a table if there
are problems to get things onto the right place - but: it mostly turns
out that there are more/other problems if positioning doesn't work as
intended. It's always a good idea to fiddle out where the problem is.
This might avoid a lot of cross browser/ cross operation system
issues.

Linebreaks could be forced by CSS, too. There are several ways to do
that: you could style an element as "block" instead of "inline", you
could force a line break before an element or after another (or both)
etc.

--
schilke