At 5/17/2007 02:25 AM, Paul Collins wrote:
I recently had to add numerical bullet point graphics to an OL. This
meant I had to add an individual class and style to each bullet point
for each image, which can add up when you've got 20 bullets. I was
wondering, does anyone know more clever way of doing this in some kind
of a CSS loop, without using Jscript?!
Example:
CSS
li.bullet1 {background:url(images/bullet1.gif} no-repeat;}
li.bullet2 {background:url(images/bullet2.gif} no-repeat;}
HTML
<li class="bullet1">lorem ipsum</li>
<li class="bullet2">lorem ipsum</li>
Quoting Breton Slivka <[EMAIL PROTECTED]>:
This might seem obvious, but have you considered combining them into a
single image, and adding them as a single background to the OL instead?
At 5/17/2007 02:58 AM, Patrick H. Lauke wrote:
That would break apart as soon as the user changed text size, or the
amount of content in each LI is variable.
Yes, but what would make sense would be to combine all the numbers
into a single image and then apply them to the list items with
staggered positions, rather than applying a separate image to each list item.
Here's a real-world example:
http://marthagrenon.com/TheBringingOfTheBones/journey_tirana-1.html
The page menu at the right is one large image combining all buttons
in three states:
http://marthagrenon.com/TheBringingOfTheBones/images/page_buttons.jpg
Each menu item/state takes up a 42px square of the overall menu
image. Here's an excerpt from the CSS:
div#pageMenu li a
{
background: url("images/page_buttons.jpg") left top no-repeat;
}
/* normal state */
div#pageMenu li.page1 a { background-position: 0px -42px; }
div#pageMenu li.page2 a { background-position: 0px -76px; }
div#pageMenu li.page3 a { background-position: 0px -110px; }
/* hover state */
div#pageMenu li.next a:hover { background-position: -43px 0px; }
div#pageMenu li.page1 a:hover { background-position: -43px -42px; }
div#pageMenu li.page2 a:hover { background-position: -43px -76px; }
div#pageMenu li.page3 a:hover { background-position: -43px -110px; }
This is a variation on "CSS sprites" (q.v.). Its efficiency is based
on the principle that every image file has its own header as
overhead, therefore combining many similar images into one file makes
for less weight to download than all the images separately. All the
images appear at once, and in a case such as the Bringing of the
Bones site the hover & active states are combined in the same image
so there's no download delay when mousing over the menu and no need
to pre-load images with javascript etc.
This is a somewhat different application than what you're doing
because in this case the images ARE the menu items, but the principle
can still apply to image markers for text list items if done properly.
Regards,
Paul
__________________________
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
