Text Structure

Get Started
1

Hi All,

I have a little problem with my HTML page.

Say you have a text-link (see below) next to a picture. Due to the table setup they are both the top in the table. However, the text-link is not totally at the top due to the picture next to it. It is actually aligned with bottom of the picture. Is there a way of lifting the text a little higher so it could be one or two pixels higher?

I tried it with <div> and ‘style’ but didn’t manage.

See below current setup.

</td>
<td colspan=“3” align=“right” valign=“top” width=“282” bgcolor=“#ffffff”>
<a href=“contact.html”>Contact</a><img src=“img/contact.png” width=“25” height=“25” alt=“” title=“” border=“0”>
</td>
</tr>

Please to hear any ideas!
Tks.
Mark

2

I would make another column like this: <tr><td valign=“top”>text link</td><td align=“center”>img</td></tr>

Hope this helps.

3

Hi Markune. Welcome to the forums. :slight_smile:

Try adding this to your CSS:

td img {vertical-align: middle;}
4

One very quick way to move the link up is with its “vertical-align” property in CSS:


a { vertical-align:top }

(You’ll probably want to use a different selector; that will affect every link on the page!)

It’s not terribly elegant, however. You asked for just a couple of pixels. This aligns the link to the very top of the image, rather than the bottom. It looked fine in my quick-n-dirty test page with default font styles, but your mileage may vary.

I’m sure the real experts around here can come up with other ways to accomplish this :wink:

5

Wow! Thank you very much for all your comments!

@signupmoney, tks but there is no skope for extending the table.

@aufshebung, worked but it’s a bit high… but I quite like it. It’s different. :wink:

@ralph.m, tried it but didn’t work see below. Don’t know what I did wrong in my CSS…

.outs { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #fc951f; text-decoration: none; vertical-align: middle;}
a.outs:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #ff3300; text-decoration: none}

6

That CSS cites a class called “outs” that doesn’t appear in your HTML above, so we can’t really comment.

BTW, in your :hover styles, you don’t need to re-declare anything that’s the same, such as font families, font size, color etc. Just declare anything that’s different. :slight_smile:

7

Thank you very much ralph.m! Much appreciated!

8