/    Sign up×
Community /Pin to ProfileBookmark

data beside image

Copy linkTweet thisAlerts:
Aug 03.2007

I have an image in a cell on a table. I have a figure beside that image but i can’t get it to be inline with my image

<td><img src=”images/example.jpg”>4.5</td>

It shows up like this

||||||||
||||||||
|||||||| 4.5

but i want it like this

|||||||
||||||| 4.5
|||||||

How do i ammend the code above to fix this

to post a comment
HTML

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelAug 03.2007 — <body>

<table>

<tr>

<td><img src="images/example.jpg" [B]align="middle"[/B] style="width:55px; height:55px; background-color:yellow;">4.5</td>

</tr>

</td>

</table>

</body>[/QUOTE] This?
Copy linkTweet thisAlerts:
@oo7mlauthorAug 03.2007 — No, that just makes it like this

|||||||| 4.5

||||||||

||||||||

Any other idea what i could try. I can't actually believe i never found a solution to this yet
Copy linkTweet thisAlerts:
@FerretAug 03.2007 — Default alignment is exactly that in a table cell:

[code=html]

<table>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin mattis rutrum dolor. Sed malesuada orci non nibh. Nulla quis urna. Sed faucibus, eros quis auctor tristique, justo arcu ornare ligula, eu gravida mi magna nec diam. In hac habitasse platea dictumst. Aenean ut neque. Nunc hendrerit. Phasellus porttitor ultrices turpis. Donec nunc ipsum, iaculis vel, rhoncus auctor, elementum in, justo. Etiam leo. Fusce nunc urna, rutrum non, euismod non, tempor id, diam.

Sed bibendum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus id quam eget massa dapibus eleifend. Phasellus non justo cursus quam sollicitudin varius. Donec ultrices sapien eu nunc. Curabitur sagittis. In sed enim. Vivamus in leo in diam pharetra interdum. Phasellus nonummy neque id arcu. Suspendisse potenti. Nulla tortor lacus, pharetra ut, molestie eget, porttitor lacinia, dui. Integer lorem magna, vehicula non, molestie quis, tincidunt sed, pede. In diam nulla, gravida sed, eleifend et, semper non, turpis.
</td>
<td>
<img src="images/example.jpg" style="width:55px; height:55px; background-color:yellow;">
</td>
</tr>
</table>
[/code]

Separate the text from the image to two cells and you're set.

edit: noticed a mistake. >_>
Copy linkTweet thisAlerts:
@kaseyAug 03.2007 — what size is your image? it may just look like it's not in the middle if it's a small image

align="middle" makes the baseline of the text align with the centre of the image

align="absmiddle" makes the center of the text align with the centre of the image
Copy linkTweet thisAlerts:
@oo7mlauthorAug 03.2007 — I can not add another cell. It will mess up my layout. However i could set the image as a background and then use a div to position the number in the cell, that should work yeah...
Copy linkTweet thisAlerts:
@FerretAug 03.2007 — I can not add another cell. It will mess up my layout. However i could set the image as a background and then use a div to position the number in the cell, that should work yeah...[/QUOTE]


Precisely why tables should not be used for layout! You actually could add another cell if you were to add <td colspan="2"> to every other cell in that column. ? That would add nothing but width to the column as all the cells above and below would align to the two cells containing the text and image you have.
Copy linkTweet thisAlerts:
@ray326Aug 03.2007 — Joel was close. It's valign="middle".
Copy linkTweet thisAlerts:
@FerretAug 03.2007 — Joel was close. It's valign="middle".[/QUOTE]

I tried that, and Firefox wasn't happy with it... not sure why, so I suggested the second table cell. ?
Copy linkTweet thisAlerts:
@oo7mlauthorAug 03.2007 — Ah well, i set the image to the background and used a div to position the number - looks / works perfect. I have tried to stay away from tables when designing my layout but i can never seem to satisfy every browser with DIVs... thanks guys
Copy linkTweet thisAlerts:
@ray326Aug 04.2007 — Sorry. Joel's should have worked. I wasn't paying close enough attention to where that attribute was so valign was a bogus comment. Mea culpa.
×

Success!

Help @oo7ml spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...