I’d put the eight little icons that are in the left corner into one vertical sprite (transparent gif) and also include one whole round box on the same sprite (unless you are willing to use border-radius for IE9+ and let the rest have square boxes).
If the text is always “Latest News” then I’d draw that on the image itself and use the gilder/levin technique to supply the content in the html.
If the text changes for each icon then I’d place html text on top of the image but with the realisation that it may break out if text is resized. If that’s an issue then i’d also include the text in the sprite.
I’d prefer to keep the html simple so I wouldn’t add millions of elements just to slice those little round boxes and would keep them as one image - unless you wanted them to expand with various amounts of text and then its back to the old round corner techniques with multiple elements.
It’s not really a heading so lose the h3. It’s just a list of links.
Paul O’B，your ways is great. but i don’t know how to make the eight little icons into one vertical sprite .
the text are different. it’s a sub-navigation of a site.
you’re right. it not a heading. but when if a text is not a heading. which html label you often using to around the text? thank you.
Do you have an image editor like Photoshop? Place all those icons into one file and save for web. Measure their positions carefully, so that it’s easy and predictable to work out how to position the image for each LI.
which html label you often using to around the text?
Inside a list item, you really don’t need anything around the text.
To elaborate— there already are TWO tags around the text – LI and A… and since you’d have multiple “subnavs” you should probably use class instead of ID – NOT that you should need to target them with a class/ID at all.
To me, those images are presentational, and have no business in the markup…