HTML and CSS Reference
In-Depth Information
<h3>Flight Training</h3>
<h3>Airline Food</h3>
<h3>Baggage (these squirrels have lots of it...)</h3>
</section>
<section ID=
”cats”
>
<header>
<h2>Care and Handling of Cats</h2>
</header>
<h3>Kitty Basket</h3>
<h3>Scratching Post</h3>
<h3>Litter Box</h3>
<h3>Cat Food</h3>
<h3>Toy Mouse and Catnip</h3>
</section>
<section ID=
”dogs”
>
<header>
<h2>Care and Handling of Dogs</h2>
</header>
<h3>Dog House</h3>
<h3>Walks</h3>
<h3>House Breaking</h3>
<h3>Dog Food</h3>
<h3>Chew Toys and Balls</h3>
</section>
<footer>
<nav><a href=
”#fsquirrel”
>Flying Squirrels</a> | <a href=
”#cats”
>Cats</
a> | <a href=
”#dogs”
>Dogs</a></nav>
</footer>
</body>
</html>
139
When using CSS3 IDs for anchors on mobile devices, you'll i nd that your design is not quite
as constrained for the small screen sizes. As you can see in Figure 7-5, anchors make it easy to
navigate a page on a mobile device.
In Figure 7-5, the screen on the let is the initial page on an Opera Mini browser. When the
Dogs link is tapped (or clicked on a non-mobile device), the page jumps down to the dog
information. Notice that the menu is both at the top and bottom of the page. Generally
speaking, if your page is long enough to require IDs for moving around the page, you should
have a top and bottom menu. If the page is very long, you can give the
nav
element an ID and
then have each section link to the menu.
If you want to set up a link directly to an ID or anchor, you simply add
#name
to the URL.
For example, if somewhere else on your site (or even another site), you want a direct link to
the material about cats. You'd simply create the following link:
<
a href
=
”http://my.domain.com/AnchorsID.html#cats”
>
