<< .. Go to : : HOME : : Exercise 8A : : Demo 8A.1 : : Demo 8A.2 : : Demo 8A.3 : : Demo 8A.4 : : Demo 8A.5 : : Demo 8A.6 : : All Class Demos .. >>

Exercise 8A Demo: Part 4

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:

<aside>
<h3>
More Information:</h3>
<ul>
<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>
</ul>
</aside>


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 */
</style>



Go to Part 5 of Demo 8A.

Go back to the Exercise 8A page.

© Claudia Faulk. Created 7.18.