PDA

Click to See Complete Forum and Search --> : data beside image

oo7ml
08-03-2007, 01:20 PM
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
WebJoel
08-03-2007, 01:34 PM
<body>
<table>
<tr>
<td><img src="images/example.jpg" align="middle" style="width:55px; height:55px; background-color:yellow;">4.5</td>
</tr>
</td>
</table>

</body> This?
oo7ml
08-03-2007, 01:44 PM
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
Ferret
08-03-2007, 02:30 PM
Default alignment is exactly that in a table cell:



<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>


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

edit: noticed a mistake. >_>
kasey
08-03-2007, 02:34 PM
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
oo7ml
08-03-2007, 02:35 PM
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...
Ferret
08-03-2007, 02:38 PM
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...


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. :P 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.
ray326
08-03-2007, 02:52 PM
Joel was close. It's valign="middle".
Ferret
08-03-2007, 02:56 PM
Joel was close. It's valign="middle".

I tried that, and Firefox wasn't happy with it... not sure why, so I suggested the second table cell. :P
oo7ml
08-03-2007, 03:18 PM
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
ray326
08-03-2007, 11:13 PM
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.