> -----Original Message-----
> From: [email protected]
> [mailto:[EMAIL PROTECTED] On Behalf Of Richard Czeiger
> Sent: Tuesday, 11 July 2006 10:49 AM
> To: [email protected]
> Subject: [WSG] Alphabetical Listing Buttons
>
> Hi All :o)
>
> Wondering if you can help me solve an issue:
>
> I'd like to have a list of alphabetical buttons at the top of
> the page (you've all seen this kind of navigation).
> What I'd like to do is have them with the following features:
>
> 1. Single pixel border
> 2. Some padding around the letter (to make them look nice)
> 3. A margin around each one that is statically sized
> 3. .. and this is the biggy ... I'd like their width the
> stretch dependent on screen resolution.
>
> Here's a screenshot:
> http://www.grafx.com.au/wip/alphabet.gif
>
> The pale pink of the inside of each button is the bit that
> stretches...
> The space between them is always the same.
> Effectively the whole alphabet should stretch across the top
> in one row.
Hi Richard,
Sorry, I don't have time to try this one out, but the obvious solution for
me would be to try this:
We have got 26 boxes next to each other. If we wanted to float them all next
to each other so that they take up 100% of the browser width, I would
presume each box would have a width of 3.84% (100% / 26 = 3.84).
Wouldn't that work? Something like:
li{margin:0; padding:0; float:left; width:3.84%; background:pink}
Then to get the white boxes to work I would probably play with
background-images (borders with 1px width would stuff up our percentage
calculation).
What do yoou think?
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
