Aligning images with text

Discuss macro implementations, ask for macro help (to share your creations, see User Creations, probably either Campaign Frameworks or Drop-in Resources).

Moderators: dorpond, trevor, Azhrei, giliath, jay, Mr.Ice

Post Reply
Isaan
Kobold
Posts: 9
Joined: Thu Aug 30, 2018 12:05 pm

Aligning images with text

Post by Isaan »

Hey everybody,

I got a bit frustrated during the last 2 hours trying to align an table image with text in a html table.

What I try to do is something like this:

Code: Select all

<table border="0" cellspacing="2" cellpadding="0">
	<tr style="background-color:#FFFFFF">
		<td style="border-bottom: 1px solid #00AEEF;border-top: 1px solid #00AEEF;border-right: 1px solid #00AEEF;border-left: 1px solid #00AEEF;">
			<font style="background-color:#00AEEF;color:#FFFFFF"> --- Text before image --- <img src='[r:tableImage("Bilder", 17)]' height='14' height='14' border='0'></font>
			<font style="background-color:#FFFFFF;color:#000000" align="left">[r,if(json.get(Zustand,"Angst")),CODE:{&nbsp;Angsterf&uuml;llt&nbsp;};{}]
			--- Some more text that should follow in the same line ---
			</font>
		</td>
	</tr>
</table>
Everything works as expected, with one exception. The image is always out of line (see attachment). It's alwas 3 pix to high.
If I use a 2nd html table the image aligns with the text easily, but Maptool creates a new line after the table and I want to proceed with additional text in the same line.
Can somebody tell me why this happens and how I can get rid of it?

Btw: At the end there shall also be an macro link on the image. This works fine if I wrap it in a href, but the position stays the same.
Attachments
Image not aligned.png
Image not aligned.png (1.74 KiB) Viewed 610 times

User avatar
metatheurgist
Dragon
Posts: 350
Joined: Mon Oct 26, 2009 5:51 am

Re: Aligning images with text

Post by metatheurgist »

Code: Select all

<table border="0" cellspacing="2" cellpadding="0">
  <tr style="background-color:#FFFFFF">
   <td style="border-bottom: 1px solid #00AEEF;border-top: 1px solid #00AEEF;border-right: 1px solid #00AEEF;border-left: 1px solid #00AEEF;">
    <font style="background-color:#00AEEF;color:#FFFFFF">Text before image<img src='[r:getTokenImage()]' height='14' height='14' border='0'></font>
    <font style="background-color:#FFFFFF;color:#000000" align="left">Text After Image</font>
    </td>
  </tr>
</table>
This works for me in 1.4.0.5

Isaan
Kobold
Posts: 9
Joined: Thu Aug 30, 2018 12:05 pm

Re: Aligning images with text

Post by Isaan »

When I try your code, I get same offset as before. (see attached Test2.png)

I'm using 1.4.1.8, but it doesn't seem as a version issue, coz I get the same in older Maptool versions.

Maybe it's unclear, but what I want it to look like as in attached Test3.png (created with MS Paint).
Attachments
Test3.png
Test3.png (1.86 KiB) Viewed 587 times
Test2.png
Test2.png (1.21 KiB) Viewed 587 times

User avatar
aliasmask
Deity
Posts: 8667
Joined: Tue Nov 10, 2009 6:11 pm
Location: Bay Area

Re: Aligning images with text

Post by aliasmask »

I suggest using valign.

Phergus
Deity
Posts: 7132
Joined: Fri May 12, 2006 8:56 pm
Location: Middle of Nowhere, NM
Contact:

Re: Aligning images with text

Post by Phergus »

Using Metatheurgist code:
MapTool 1.4.0.5
MapTool 1.4.0.5
Screenshot 2019-09-10 13.52.16.png (7.89 KiB) Viewed 580 times
MapTool 1.4.1.8
MapTool 1.4.1.8
Screenshot 2019-09-10 13.52.50.png (7.92 KiB) Viewed 580 times
MapTool 1.5.5
MapTool 1.5.5
Screenshot 2019-09-10 13.53.33.png (7.91 KiB) Viewed 580 times

Post Reply

Return to “Macros”