HTML and CSS Reference
In-Depth Information
5.
We'd also like our navigation menus, both in the
<header>
and
<footer>
ele-
ments, to sit flush right. Because both the
<header>
and
<footer>
elements
have child elements that are floated to the
left
, we can use the same approach as
we did with our tagline.
The floated elements within the
<header>
and
<footer>
elements are taken
out of the normal flow of the page, and this causes other elements to wrap around
them. In this specific case, our navigation menus are the elements wrapping around
the floated elements.
Because we'll be sharing the same styles across both navigation menus, we'll give
them each the class of
nav
. Our
<header>
element will now look like this:
1.
<header class="container group">
2.
3.
<h1 class="logo">...</h1>
4.
5.
<h3 class="tagline">...</h3>
6.
7.
<nav class="
nav
primary-nav">
8.
...
9.
</nav>
10.
11.
</header>
And our
<footer>
element will now look like this:
1.
<footer class="primary-footer container group">
2.
3.
<small>...</small>
4.
5.
<nav
class="nav"
>
6.
...
7.
</nav>
8.
9.
</footer>
Let's not forget, changes to our
<header>
and
<footer>
elements need to be
made on every page.
6.
With the
nav
class in place on both navigation menus, let's create a new section
within our
main.css
file to add shared navigation styles. We'll begin by adding
the
text-align
property with a value of
right
to a
nav
class rule set. We'll
expand these styles later on, but this will serve as a great foundation.
Search WWH ::
Custom Search