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:
<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 E of Demo 8.
Go back to the Exercise 8 page.
© Claudia Faulk. Updated 7.20.