<< .. Go to : : HOME : : Exercise 8 : : Demo 8a : : Demo 8b : : Demo 8c : : Demo 8d : : Demo 8e : : Demo 8f : : All Class Demos .. >>

Exercise 8 Demo: Part D

Developing Your Styles for These Elements

Working with the Aside - Using for Secondary Navigation:

The HTML coding used to create the aside. I used the aside for secondary navigation and put the navigation links in an unordered list:

More Information:</h3>
<li> <a href="http://coupleberryfarms.com/" target=_blank">
A Local FARM </a></li>
<li> <a href="cats.html">
About CATS </a></li>
<li> <a href="dogs.html">
About DOGS </a></li>
<li> <a href="turtles.html">
About Red SLIDERS </a></li>
<li> <a href="turtles.html">
About TORTOISES </a></li>

Here are the CSS Document styles that I used to create the and the secondary navigation:

<style type="text/css">
aside {
float: left; width: 190px; margin: 0 0 0 10px; }
/* secondary navigation */
ul, li {
margin: 0; padding: 0;}
aside ul {
list-style: none;
  margin-left: 0; margin-bottom: 15px;
  font-family: Helvetica, sans-serif; letter-spacing: 1px;}
aside li {
width: 185px; margin-left: 0; margin-bottom: 5px;
  border: 2px solid #792d0b; background-color: #cfa865;}
aside li a {
display: block; padding: 7px 0 7px 20px;
  text-decoration: none; font-weight: bold; color: #792d0b;}
aside li a:hover {
background-color: #792d0b; color: #f2ebcd; }
aside h3 {
text-align: center; font-family: 'Lobster Two', cursive;
  font-weight: normal; }
/* end of aside and secondary navigation */

Go to Part E of Demo 8.

Go back to the Exercise 8 page.

© Claudia Faulk. Updated 7.20.