| I've always been taken with the way that the BBC | | | | } * html #index li { |
| styles their A-Z index using a simple list and CSS. | | | | margin: 0.2em 0.2em; |
| However, because they use pixels to set the | | | | }#index a:link, #index a:visited { |
| dimensions of each list item, the design breaks when | | | | background: #fff; |
| you increase the text size.It's always been important | | | | color: navy; |
| to me not to break the browser's ability to resize | | | | display: block; |
| text and so I thought I'd have a go at creating an A | | | | height: 2em; |
| to Z index along the same lines that doesn't break | | | | padding: 0.75em 0 0 0; |
| when you resize your text.The code is actually | | | | text-align: center; |
| pretty straight forward. Here's the CSS first: | | | | text-decoration: none; |
| #azindex { | | | | width: 3em; |
| background: #75B9D0; | | | | }#index a:hover { |
| float: left; | | | | background: #93D1E4; |
| margin: 5px 0 20px 10px; | | | | color: #fff; |
| padding: 0px 5px 15px 5px; | | | | text-decoration: underline; |
| width: 520px; | | | | }And here's the HTML:< div id="azindex"> |
| } * html #azindex { | | | | |
| padding: 5px 5px 10px 5px; | | | | < a href ="#a"> A |
| width: 490px; | | | | < a href ="#b"> B |
| }#index { | | | | < a href ="#c"> C |
| font: bold 100% Verdana, Helvetica, sans-serif; | | | | < a href ="#"> etc |
| margin: 0; | | | | < a href ="#z"> Z |
| padding: 0; | | | | |
| }#index li { | | | | And there you have it - an easy way to add a nice |
| float: left; | | | | design to what would otherwise have been a boring |
| height: 2em; | | | | list. You can find a link to an example in the resource |
| list-style-type: none; | | | | box below.Christian Watson is a web designer. You |
| margin: 0.65em 0.3em; | | | | can find an example of the above technique on his |
| padding: 0; | | | | blog. |
| width: 3em; | | | | |