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>
<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; }
<ul class="bcrumbs">
<li><a href="/"> Home </a> &gt;</li>
<li><a href="/buy/"> Buy </a> &gt;</li>
<li><a href="/buy/music/"> Music </a> &gt;</li>
<li><a href="/buy/music/cds/"> CDs </a> &gt;</li>
<li><b> Search results </b></li>
Figure 5.2: Breadcrumbs show the way back home
Search WWH ::

Custom Search