HTML and CSS Reference
In-Depth Information
Completing the navigation
Now place the navigation right into your HTML. Do that by
inserting it just below the header in the “blog.html” file:
<header class="top">
<img id="headerLogo"
src="images/headerLogo.gif" alt="Starbuzz Coffee header logo image">
<img id="headerSlogan"
src="images/headerSlogan.gif" alt="Providing all the caffeine...">
<li><a href="index.html"> HOME </a></li>
<li class="selected"><a href="blog.html"> BLOG </a></li>
<li><a href=""> INVENTIONS </a></li>
<li><a href=""> RECIPES </a></li>
<li><a href=""> LOCATIONS </a></li>
Adding the navigation CSS
You can try that HTML if you want, but you won't be satisfied that it feels
anything like “navigation.” So, before you try it, let's add some CSS:
ul {
background-color: #efe5d0;
margin: 10px 10px 0px 10px;
list-style-type: none;
padding: 5px 0px 5px 0px;
ul li {
display: inline;
padding: 5px 10px 5px 10px;
ul li a:link, ul li a:visited {
color: #954b4b;
border-bottom: none;
font-weight: bold;
ul li.selected {
background-color: #c8b99c;
We're adding a backg round color, and some margins and padding.
Notice that the bott om margin is 0 becau se the table display
already has a 10px b order-spacing at the top.
Here, we're cha nging the display of e ach list item from “bl ock”
to “inline”, so n ow the list items won 't have a carriage ret urn
before and aft er; they'll all flow int o one line on the page like
regular inline e lements do.
We want the links in the navigation list t o look a bit different from
the rest of the links in the page, so we o verride the other rules for <a>
(above t his rule in the CSS) with a rule t hat sets properties for both
the links and the visited state of the lin ks (so they look the same).
Search WWH ::

Custom Search