So you think you're ready to hop on the CSS styling bandwagon? Many people are finding the decreased page load time and quick site-wide changes to be attractive draws, and they're making the leap. The enhancements in Dreamweaver MX 2004 now make this an even more viable option. No, you can't stay in design view the whole time (who'd want to?) but you can preview something close to what you'll actually see in a browser. In this tutorial I'll cover different ways to style simple CSS buttons with no graphics. We'll look at creating the navigation both vertically and horizontally.

Using a List
There are a variety of different approaches to creating CSS buttons. What I've settled on, for accessibility reasons, is using an unordered list for the navigation. A list of links is an organized way to present the information to any type of assistive technology. It also degrades quite nicely in Netscape 4 but you will have to decide how much time you put into that ancient browser. The styling can be totally hidden from NN4 in favor of a plain list of links if neccessary.

Create an HTML (or XHTML) document. If you want to work on these buttons in an HTML page, you can play with the completed files I created for this project (the files have headers and text in a sample HTML document since I can't stand to just put buttons on a blank page). They're available for download at: www.communitymx.com/mxdevissue2.

The basic HTML code used for the buttons is shown in Code I. This code shows the unordered list placed into a div with the ID of menu. The placement of the buttons is controlled through the menu div. All selectors used to define these buttons will begin with the menu ID (#menu) and then continue with the element inside the div that you are defining. By taking advantage of the cascade order like this, you are instructing the browser to apply any selector beginning with #menu only to the elements inside the menu div. This keeps all your other lists "safe" from being rendered with the menu styles. A list in your main content area will not receive the styling you're applying to the buttons. Each selector will be defined like this:

#menu elementname {
property: value;
}

Simple Beveled Button Style
When you're creating a button with CSS, you're working within a two-dimensional space. You don't have the ability to "cheat" and use the bevel effect in Fireworks to fake the three-dimensional look. You have to rely on your ability to create the illusion of 3D through properly defined code. Remember - the same rules apply in art as in Web pages (or even dressing yourself). Light brings things forward. Dark makes them recede. Thus, in our first example you could create a simple button with four borders of the same color and it will look flat. Or you can make it appear beveled by using lighter colors for the left and top borders and darker colors for the right and bottom borders. This will make it appear that the light source is coming into the page from the top-left.

Image I is the look we're creating for the first set of buttons. These buttons will appear to be depressed, or pressed down, on rollover or on tab through. Remember that not everyone will use a mouse to navigate your pages. For accessibility reasons you can add a simple selector (a:focus) that will give the button the same look when it's tabbed over as it has when it's hovered over with a mouse (in the browsers that support it). This gives people a visual cue showing where they are on your page.

 

These buttons begin with the unordered list code given above. Each link has the null "javascript:;" applied so that it will appear in its link style. This is where Dreamweaver MX 2004's new CSS abilities really shine. Previously I had to preview in a browser (F12) to view the effects my style rules were actually having. Image II illustrates the way MX renders this button style (on the left) and the new rendering by 2004 (on the right).

 

Placing the List on the Page
Now the fun begins. You can do most of your work using the Dreamweaver CSS Styles panel. Either create an external CSS document or simply place these styles into the head of your HTML document and move them later. You will need to go into the CSS and hand code if you will be supporting Netscape 4. If you haven't used the CSS Styles panel before, read through my tutorial, "Using the CSS Styles Panel" at CommunityMX to learn the basics (www.communitymx.com/ abstract.cfm?cid=A1FFDC2ED5D7F133).

Since the positioning of the #menu div controls the overall placement of the buttons on the page, you can adjust it to suit your own pages. I find it more attractive if these buttons don't start flush with the left side of the browser chrome, so I set the absolutely positioned div to left: 20px. The top isn't given a setting, thus it comes after the element that it follows (the default is "auto"). You'll come up with a slightly different button that looks nice on your pages later. At that point, you can adjust the width, padding, and left div placement to better fit your page and style. Here's what you'll place on this page:

#menu {
position: absolute;
width: 130px;
left: 20px;
padding-top: 15px;
}

Styling the List Elements
The principles behind styling the unordered list on all vertical button examples begin in the same way. In fact, the redefinition of the <ul> element is identical each time. You will set the font family and size, the margin and padding to zero, and the list-style-type to none. All redefinitions of the <li> element begin the same way as well. The margin and padding are given a value of zero. Code II is the beginning styling of each example button

Due to the cascade, you won't need to set the font in any of the other button selectors. This code will effectively zero out the normal list spacing and remove the bullet so you can have a true button look. You may choose to use font sizing that is more scalable using ems or percents. Since I have no way of knowing what other styles are on your page, I'm setting this at 12px to keep it consistent.

Styling the Link Element
The styling for the basic button structure is all in the <a> element. The code we just added is what all our vertical buttons will have in common. The code below is where the differences come in. For this first button, we'll define a background color and two different colored borders. We'll also set the padding to keep the text away from the edges of the button. Since the #menu div itself will have a set width (applied in a moment), we'll set the width of this button to 100% and give it a "display: block". These last two values will make the entire button width clickable, not just the link text itself. This is important if you want it to act like a real graphical button. Add the following code to your CSS:

#menu a {
margin: 0;
padding: 3px 3px 3px 10px;
width: 100%;
display: block;
color: #000000;
}

Now we'll add the color but we'll hide it from that old gal Netscape 4. She's simply too geriatric for me to worry about. She'll receive the basic placement and the rest of the styling in Code III will be hidden. It will render a nice, organized list of accessible links. I've used the Caio Hack on Code III to hide it from NN4. You'll have to hand code the hack if you're going to use it. (For an explanation of the Caio Hack, avail yourself of the article by John Gallant and Holly Bergevin at www.communitymx.com/abstract.cfm?ci d=A3E04D26B481EAB6.)

Notice that the borders are defined in two sets of colors to give the button depth. The border colors reverse on the hover style and the background color gets deeper or greyed down, as if it were pressed in. The a:focus is set to be the same as the a:hover for tabbing accessibility.

Preview the page in your target browsers to be sure you've created a button that is appealing in all of them. Once you're happy with the results, move on to the next button.

Styling with Creative Borders
In this button style, we're not going to worry about making the button three dimensional. We'll use the borders to give it a nice decorative style. When completed it will look like Image III.

 

Since the HTML portion of this project is identical each time, you'll reuse it. Simply make a few simple changes to the CSS document you just completed to create a new button style (you'll likely want to save a copy of it to go back to).

Let's look only at the portions that will change. Begin with the same unordered list for the HTML portion. Use the identical redefinition of the <ul> element. The <li> styling remains the same with the margin and padding zeroed out. Add a one pixel bottom border to the <li> selector to create the line that separates each button.

#menu li {
border-bottom: 1px solid #000;
margin: 0;
padding: 0;
}

Style the link to create the button look. As you did previously, hide the styling from Netscape 4. To keep the text from sitting right on the left border, you'll give the links padding. You'll also set the right border to 12px for a decorative border. You'll designate display: block, but this time, instead of setting the width to 100%, we'll set it to 118 pixels. The math behind this is simple. The #menu div width will shortly be set to 140px. From that, you'll subtract the left padding and right border (10 and 12 pixels, respectively). This brings you to the 118px width. If you choose a different width for the link, you'll have a space at the end of the bottom border of the <li> that will be white, and/or extra white space to the right of the decorative border. Experiment with this since it can have interesting effects that we don't have room to explore here. The above steps will create Code IV.

Previously in Dreamweaver MX, you saw what is displayed on the left side of Image IV. In Dreamweaver MX 2004, you'll see a button list almost identical to your browser's (right side of Image IV).

 

Finally, let's give the button its hover and focus styling:

#menu a:hover, #menu a:focus {
background: #DBF8D8;
border-right: 12px solid #333;
}

styling, we'll add a top and right border to the menu div so that the buttons look completely boxed in. Adjust the margin-top to align the buttons on your page.

#menu {
position: absolute;
width: 140px;
border-top: 1px solid #000;
border-right: 1px solid #000;
margin-top: 18px;
}

Preview the style in your browser. Tweak it as desired. You're done!

Going Horizontal
Since lists are vertical by nature, styling them as buttons is easy. But if you want horizontal navigation, you've got to use images, right? Wrong. With CSS, lists can be horizontal as well. It's just a simple little property value called "inline" that makes the switch. Let's look at the last vertical button set you created. With a few changes in the CSS, it can be horizontal (remember to save a copy of the CSS before you make these changes) (see Image V).

 

The first change is to remove the absolute positioning from the #menu div to keep it in the flow of the document, right under the top banner of the page. Set the top padding and zero out the rest, like this:

#menu {
margin: 0;
padding: 3px 0 0;
}

We'll also use the <ul> element to make a fun little stripe across the top of the page behind the buttons. Keep all the code from the #menu ul selector and add these three declarations to that rule:

border: 1px solid #000;
text-align: center;
background-color: #9B9ED7;

Since the #menu a selector is the one that forms the buttons, very little change is required. Simply remove the display: block and the width: 118px. (You will be placing the display:inline; into the #menu li selector and this would override it.) If you're using the Caio Hack for Netscape 4, you'll change the borders of the #menu a just slightly inside the hack. Replace those padding and border declarations to contain the following:

padding: 3px 5px 1px 10px;
border-right: 5px solid #759C74;

Make sure you also change the size of the #menu a:hover, #menu a:focus selector's right border size to be 5px as well. Otherwise, when you roll over the button the border will get larger and everything will jump.

Finally, the changes to the #menu li itself will take your list into the horizontal realm. This is the only selector where all the declarations will change. Remember that on the vertical button list, we placed a bottom border on the <li> to differentiate the buttons. On the horizontal button list, we'll move that to the right side instead. I've also placed a right-side margin to put a little space between the buttons; finally, the magical display:inline is applied.

#menu li {
margin: 0 5px 0 0;
display: inline;
border-right: 1px solid #4D664C;
}

Image VI shows the true power of Dreamweaver MX 2004. Notice the top portion of the image. This is what you will see in design view if you're still using Dreamweaver MX. If you're using MX, you'll have to do a constant F12 (preview) if you want to have any idea of how your buttons will actually render. The lower portion of the image shows the same page in Dreamweaver MX 2004. If you compare it to the earlier image of the completed project, you'll see that it is nearly identical. Obviously, you will always have to preview in many browsers to check your code for bugs and browser differences, but having a nice rendering in Dreamweaver itself is an obvious advantage.

 

That concludes the changes to your CSS code. There's one final little tweak that must be made in order to squash a white-space bug that exists in Internet Explorer 6 PC. Go into the HTML document and make your list code "ugly". Strange, eh? It's a simple process really and there are two ways to get the same results. Essentially, there can be no space between the closing </li> and the opening of the next <li>. Thus, you can either place your cursor in front of the opening <li> and hit backspace until it's snugged up to the </li> in front of it, or you can move the closing brocket (yes, that's the proper name for the "greater than or lesser than" signs we all use to enclose our code) of the </li above down to the right in front of the ><li> below. I tend to like the first method and just run them all together. Following is an example of the second method.

<ul
><li><a href="javacript:;">Button
One</a></li
><li><a href="javacript:;">Button
Two</a></li
><li> etc...

You've just learned three methods of styling lists as buttons with CSS. Have fun and play with the colors and sizes. Remove the styling from the #menu ul to make it invisible. Try putting the beveled edges on the buttons or use another styling method. You'll have a great time making something unique to match your style and your Web sites.