Re: FN-FORUM: CSS menu with images

date posted 12th November 2007 13:11

Faster method still.

Make the heigh of the graphic twice as big (height: 56px).

then use this method

Weddings

style:
a.weddingslink
{
text-indent: -9009px; width: 115px; height: 28px; display: block;
background: transparent url(images/link_weddings.gif) no-repeat;
}
a.weddingslink:link,
a.weddingslink:visited
{
background-position:0px 0px;
}
a.weddingslink:hover,
a.weddingslink:active
{
background-position:0px -28px;
}

Only 1 image to download per button. The mosueover or active will flip
the image and vice versa.

> Something like this would be your best bet. Quick and clean, seo
> friendly, accessible and most importantly you'd be keeping the layout
> and structure separate to the content.
>
> Weddings
>
> style:
> a.weddingslink:link,
> a.weddingslink:visited
> {
> text-indent: -9009px; width: 115px; height: 28px; display: block;
> background: transparent url(images/link_weddings_off.gif) no-repeat;
> }
> a.weddingslink:hover,
> a.weddingslink:active
> { background: transparent url(images/link_weddings_on.gif') no-repeat; }
>
> Hope that makes sense. I use that method on my own website.
> www.KieranBowler.co.uk but without the rollover state.
>
> On 12 Nov 2007 12:22:27 -0000, Paul Cooper [EMAIL REMOVED] wrote:
>>
>> After doing a nice list item menu for a site my client has decided
>> they want to use images for the text because they've used an unusual
>> font that can't be the same in HTML as their design. The last time I
>> did this I used to use something like this with a preloader:
>>
>> > src="images/link_weddings_off.gif"
>> onMouseOver="this.src='images/link_weddings_on.gif'"
>> onMouseOut="this.src='images/link_weddings_off.gif'">
>>
>> Is there a newer way to do this so the image file names etc. are all
>> in the CSS? IDs for the different links I guess. I'd just want to
>> see something best practice so I know I'm doing it right.
>>
>> TIA
>> Paul
>>
>> --
>> Freelancers, contractors earn more with Prosperity4
>> Call 0870 870 4414 or visit www.prosperity4.com
>> and benefit from Inland Revenue approved expenses today.
>>
>> To advertise here: http://www.freelancers.net/advertising.html
>>
>>
> --
> Freelancers, contractors earn more with Prosperity4
> Call 0870 870 4414 or visit www.prosperity4.com
> and benefit from Inland Revenue approved expenses today.
>
> To advertise here: http://www.freelancers.net/advertising.html
>
>