Image and text alignment

607 views
Skip to first unread message

Natanael Øigaard Nelson

unread,
Nov 15, 2017, 4:14:00 PM11/15/17
to TiddlyWiki


Hello everybody!

I am new to the wonderful world of TiddlyWiki, but I'm slowly but surely setting up my notetaking wiki for med school.

I'd like the launching Tiddler to have the same layout as on the wonderful http://tesis.tiddlyspot.com, with the image to the left and the text to the right:




However, when I try to copy the code and make my own Tiddler, I get this:






Does anybody have any idea of how to get the image to the left and the text centered to the right of the image?


Auto Generated Inline Image 1
Auto Generated Inline Image 2
Auto Generated Inline Image 3

Mat

unread,
Nov 15, 2017, 4:35:06 PM11/15/17
to TiddlyWiki
maybe you can try @@text-align:center;display:inline-block;

If that doesn't work, I'd put it all in a two cell wide html table and style the borders to not be seen.

<table class="noborders">
<tr>
<td>image</td><td>text</td>
</tr>
</table>

...then define the noborders class.

<:-)

Birthe C

unread,
Nov 15, 2017, 7:52:35 PM11/15/17
to TiddlyWiki
I just testet it and got the same result as Alberto if I used his stylesheet "$:/_CSS/image".

The line:
image-left { float: left; padding: 0em 5em 10em 0em; }

The image has to float left to make room for the text on the right.


Birthe

Natanael

unread,
Nov 16, 2017, 2:34:25 AM11/16/17
to TiddlyWiki
Strange, it still doesn't work for me.

I added the stylesheet:


But still the text doesn't want to sit next to the image:





I've cropped the image so that there are no white borders around it. I wonder what I'm doing wrong here...
Auto Generated Inline Image 1
Auto Generated Inline Image 2
Auto Generated Inline Image 3

PMario

unread,
Nov 16, 2017, 5:15:06 AM11/16/17
to TiddlyWiki
Hi,

I did make a small bundle some time ago. It's attached here. You can download it, and drag and drop import it to tiddlywiki.com to play with it.

have fun!
mario
floating-images-plugin.json

Natanael

unread,
Nov 16, 2017, 5:26:09 AM11/16/17
to TiddlyWiki
This worked like a charm! Many thanks!
Reply all
Reply to author
Forward
0 new messages