Jump to Main Content

Creating a CSS Layout

Formatting our menu

We have definitely saved the best part for last, styling our menu to simulate button behavior. We need to do the following:

  • Remove default indentation
  • Remove bullets
  • Provide a width for our list items
  • Make them simulate buttons
  • Center them in our left column

 Let’s get to it!

Remove default indentation

List items by default have indentation applied to them. We write the following rule to turn this indentation off:

ul#navigation{
 margin:0;
 padding:0;
}

Padding set to zero satisfies Internet Explorer and Opera, while margin set to zero satisfies Mozilla. Before previewing your file, add the ID of navigation to your unordered list:

<ul id="navigation">
<li><a href="javascript:;">menu one</a>
<li><a href="javascript:;">menu one</a>
<li><a href="javascript:;">menu one</a>
<li><a href="javascript:;">menu  one</a>
</ul>

Save your file and preview the results.

Remove list item indentation

Remove bullets

List items by default have bullets. We don’t want these if we simulate buttons, so we turn these off with the following rule:

ul#navigation li{
 list-style-type:none;
}

Save your file and preview the results.

Removing list item bullets

Create our buttons

In order for our link text to simulate a button, we need to declare a global selector on our anchor tag inside our unordered list:

ul#navigation li a{
display:block;
width:180px;
margin:12px  auto;
padding:4px;
text-align:center;
background-color:#CC9900;
color:#000000;
border:1px  solid #000;
font-size:.8em;
}

This rule is so massive it must do something important, and it most certainly does. The property-values are:

  • Display:
    • Set to block will make the entire link text clickable or “hot”
  • Width:
    • Sets each link button to a fixed width of 180 pixels
  • Margin:
    • Top and bottom set to a fixed width of 12 pixels to provide vertical off-set between each link button
    • Left and right set to auto will center our link buttons in our left column
  • Padding:
    • Set to a fixed width of 4 pixels to provide space inside our link button text

The remaining property-values are straight forward. Save your file and preview.

Link button

Creating our link states

In order for CSS to simulate button behavior and rollover effects without the use of JavaScript we need to create the four states to our buttons as follows:

ul#navigation a:link{
 background-color:#CC9900;
 color:#000000;
}
ul#navigation a:visited{
 background-color:#990000;
 color:#ffffff;
}
ul#navigation a:hover, ul#navigation  a:active{
 background-color:#CCCCCC;
 color:#000000;
}

We provide appropriate background color and a foreground color to suit our layout. Save your file and preview the results.

Link button states

Create a “you are here” marker

Most websites today provide a visual indicator to their visitor as to which page they’re currently viewing. Adding this to our web page is a cinch with the following addition:

ul#navigation li a.current{
 background-color:#990000;
 color:#ffffff;
}

We create a class named current, which is nested inside both a list item and an unordered tag. Before previewing, add the class to the first list item button:

<ul id="navigation">
<li><a href="javascript:;" class="current">menu  one</a>
<li><a  href="javascript:;">menu one</a>
<li><a  href="javascript:;">menu one</a>
<li><a  href="javascript:;">menu one</a>
</ul>

Save your file and preview the results.

You are here marker

Summary

In this article you learned how to create and design a web page using CSS. You also learned:

  • How to create our layout in Fireworks
  • How to optimize our individual graphics in Fireworks
  • How to export our graphics to be used in our website
  • Create a logical structure for our web page using DIVs
  • Simulate equalizing columns
  • Position columns using floats
  • Box Model Calculation
  • Make our footer extend to the bottom of our page
  • Format various elements our page
  • Create and simulate buttons using an unordered list
  • Create a you are here marker to indicate to our visitor what page they’re currently visiting

After this article, you have learned the fundamentals relating to creating a layout in Fireworks and then using CSS to create your web page. Take the knowledge acquired in this article to create and design any layout of your imagination!

If you have questions, contact me.

top of page