Jump to Main Content

Creating a CSS Table Layout

Create a “you are here” marker

Most websites today use some sort of visual indicator which informs the visitor which page they’re currently viewing. Adding this functionality to our page is a cinch and is done by adding the following CSS rule:

ul#navigation li a.current{
background-image:url(images/home_over.jpg);
width:190px;
height:20px;
}

We create a class named current, which is specific to anchor tags, inside a list item, in an unordered list with an ID of navigation. We simply assign our hover image for the currently page. Lastly, locate the first menu item and add the class to the anchor:

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

Save your file and preview the results.

You are here marker

Summary

In this article you learned how create a stable and practical layout using a table. You also learned how to control the layout and formatting using CSS. You also learned a bit about:

  • Controlling the layout with CSS
  • Formatting the appearance of our page with CSS
  • Formatting images inside an unordered list with CSS
  • Create image rollovers with CSS and unordered lists
  • Create a custom class selector to indicate a “you are here” marker

From this article, you should come to the understanding that creating a table and using CSS to control the layout and formatting is still a valid and stable approach in some instances for websites, no matter what the CSS experts say.

If you have questions, contact me.

top of page