Re: FN-FORUM: CSS menu with images

date posted 12th November 2007 13:16

Forgot to mention to place both buttons into 1 image of a height 56px.

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