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:
<body>
<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...">
</header>
<ul>
<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>
</ul>
...
</body>
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).
