Stylesheets - css: vertical align text to a background image in a link

Author

css: vertical align text to a background image in a link

chris_culley@yahoo.com

2005-11-24, 6:29 pm

Hi,

I'm fairly new to using css, and have been using it to format a
vertical navigation bar on my website, producing a load of buttons on
top of each other, each with a (151 * 33 px) gif as the background.

I've customised the <a> tag as follows:

a.menu {
font-weight:bold;
display:block;
width:151px;
height:33px;
text-align:center;
text-decoration:none;
background-image:url('images/buttondark.gif');
}

then using this in my html as follows:

<body>

<a class="menu" href="button_one.htm" target="_top">
Button one </a>
<a class="menu" href="button_two.htm" target="_top"> Button two </a>
</body>

This is all cool except that the text isn't vertically aligned within
the gif - it sits in line with the top of the image. I've tired using
vertical-align:middle within the css but this doesn't make any
difference....

Help would be very greatfully received :D

Cheers

Chris

Els

2005-11-24, 6:29 pm

chris_culley@yahoo.com wrote:

> I'm fairly new to using css, and have been using it to format a
> vertical navigation bar on my website, producing a load of buttons on
> top of each other, each with a (151 * 33 px) gif as the background.
>
> I've customised the <a> tag as follows:
>
> a.menu {
> font-weight:bold;
> display:block;
> width:151px;
> height:33px;
> text-align:center;
> text-decoration:none;
> background-image:url('images/buttondark.gif');
> }
....
> <a class="menu" href="button_one.htm" target="_top"> Button one </a>
....
> This is all cool except that the text isn't vertically aligned within
> the gif - it sits in line with the top of the image. I've tired using
> vertical-align:middle within the css but this doesn't make any
> difference....

line-height:33px;

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Buggles - Video Killed the Radio Star

chris_culley@yahoo.com

2005-11-24, 6:29 pm

Many thanks :D