HTML and CSS Reference
In-Depth Information
22.
.navigation li:first-child a {
23.
border-radius: 4px 0 0 4px;
24.
}
25.
.navigation li:last-child a {
26.
border-right: 0;
27.
border-radius: 0 4px 4px 0;
28.
}
In Practice
Now that we know how to build lists within HTML and CSS, let's loop back to our Styles
Conference website and see where we might be able to use lists.
1.
Currently the navigation menus within the
<header>
and
<footer>
elements
on our pages consist of a handful of anchor elements. These anchor elements could
be better organized in an unordered list.
Using an unordered list (via the
<ul>
element) and list items (via the
<li>
ele-
ment) will give structure to our navigation menus. These new elements, however,
will display our navigation menus vertically.
We're going to want to change the
display
value of our
<li>
elements to
inline-block
to get all of them to align in a horizontal row. When we do that,
though, we'll also need to account for the blank space left between each
<li>
ele-
ment. Thinking back to
Lesson 5
,
“
Positioning Content
,
” we know that opening an
HTML comment at the end of a
<li>
element and closing an HTML comment at
the beginning of a
<li>
element will remove this space.
Keeping this in mind, the markup for the navigation menu within our
<header>
element will now look like this:
1.
<nav class="nav primary-nav">
2.
<ul>
3.
<li>
<a href="index.html">Home</a>
</li><!--
4.
--><li>
<a href="speakers.html">Speakers</a>
</li><!--
5.
--><li>
<a href="schedule.html">Schedule</a>
</li><!--
6.
--><li>
<a href="venue.html">Venue</a>
</li><!--
7.
--><li>
<a href="register.html">Register</a>
</li>
8.
</ul>
9.
</nav>
Along these same lines, the markup for the navigation menu within our
<foot-
er>
element will now look like this:
Search WWH ::
Custom Search