HTML and CSS Reference
In-Depth Information
Breadcrumbs are easy to create. he technique eBay uses is just a simple
list of links, with the items displayed inline. he “arrows” separating the
“crumbs” are the greater-than character (>) coded with the HTML character
entity >
. Example 5.2 shows how to duplicate eBay's breadcrumbs with
HTML and CSS. Figure 5.2 shows how this appears in a browser.
example 5.2: html and CSS coding for breadcrumbs
<!DOCTYPE html>
<html>
<head>
<title>Example 5.2</title>
<style type="text/css">
ul.bcrumbs li { display: inline; font: large verdana,sans-serif; }
ul.bcrumbs li a { text-decoration: none; }
</style>
</head>
<body>
<ul class="bcrumbs">
<li><a href="/">
Home
</a> ></li>
<li><a href="/buy/">
Buy
</a> ></li>
<li><a href="/buy/music/">
Music
</a> ></li>
<li><a href="/buy/music/cds/">
CDs
</a> ></li>
<li><b>
Search results
</b></li>
</ul>
<hr/>
</body>
</html>
Figure 5.2: Breadcrumbs show the way back home
