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:
Click here to view code image
1. <header class="container group">
3. <h1 class="logo">...</h1>
5. <h3 class="tagline">...</h3>
7. <nav class=" nav primary-nav">
8. ...
9. </nav>
11. </header>
And our <footer> element will now look like this:
Click here to view code image
1. <footer class="primary-footer container group">
3. <small>...</small>
5. <nav class="nav" >
6. ...
7. </nav>
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