Foundation Fireworks CS4

13.4. Writing the CSS

There are many, many ways to create the CSS for our page, but we've decided to go with an image replacement technique that will hide the HTML text and replace it with selected portions of our exported nav.png bitmap. This technique involves displacing the text with a negative text-indent value that will force the text off of the web page without causing horizontal scrollbars. With the text safely hidden from sight, we can replace the blank anchor tag with a background image. Here's what the CSS looks like:

<style type="text/css">
#nav,#nav li {
margin: 0;
padding: 0;
list-style: none;
}

#nav li { text-indent: −9999px; } #nav a { margin: 0 20px 0 0; background: url(nav.png); width: 100px; height: 28px; display: block; float: ...