Re: FN-FORUM: CSS menu with images

date posted 12th November 2007 17:23

You can put all your images in one GIF at different positions. Doing that
will save your page several HTTP requests because you only need 1 request
for all menu images - as per pp 12-13 of steve souders recent book [High
Performance Web Sites, O'Reilly]. You can get ebook access to by joining
safari books online. He had a page on his web-site
(http://stevesouders.com/) but it has gone now. Maybe, google: css menu
sprites. Surely you must have a free online subscription, loads of
publishers of computer books carry these 6-week introductory subs to
safari - not just O'Reilly.


----- Original Message -----
From: "Kieran Bowler" [EMAIL REMOVED]
To: [EMAIL REMOVED]
Sent: Monday, November 12, 2007 1:11 PM
Subject: Re: FN-FORUM: CSS menu with images


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