Table of Contents
|
All Slides
|
Link List
|
Examples
|
CSCI E-75
<< previous
|
next >>
Lists as Navigation
Default styling:
As navigation:
Example 10.53
Example 10.53 Source:
<div id="navlhs" > <ul> <li><a href="http://www.baylor.edu/" shape="rect" >Baylor</a></li> <li><a href="http://www.cu.edu/" shape="rect" >Colorado</a></li> <li><a href="http://www.iastate.edu/" shape="rect" >Iowa State</a></li> <li><a href="http://www.ku.edu/" shape="rect" >Kansas</a></li> <li><a href="http://www.ksu.edu/" shape="rect" >Kansas State</a></li> <li><a href="http://www.missouri.edu/" shape="rect" >Missouri</a></li> <li><a href="http://www.unl.edu/" shape="rect" >Nebraska</a></li> <li><a href="http://www.ou.edu/" shape="rect" >Oklahoma</a></li> <li><a href="http://www.okstate.edu/" shape="rect" >Oklahoma State</a></li> <li><a href="http://www.utexas.edu/" shape="rect" >Texas</a></li> <li><a href="http://www.tamu.edu/" shape="rect" >Texas A&M</a></li> <li><a href="http://www.ttu.edu/" shape="rect" >Texas Tech</a></li> </ul> </div>
In
example53.css
#navlhs { font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold; font-size: 0.7em; width: 15em; border-right: 1px solid #333; margin-bottom: 1em; background-color: #ddd; color: #900; } #navlhs ul { list-style: none; margin: 0; padding: 0; } #navlhs ul li { margin: 0; border-top: 1px solid #333; } #navlhs ul li a { display: block; background-color: #ddd; border-top: 1px solid #333; border-left: 5px solid #333; text-decoration: none; padding: 2px 2px 2px 0.5em; } #navlhs a:link, #navlhs a:visited { color: #900; } #navlhs a:hover { color: #fff; background-color: #900; }
In
head
element:
<link rel="stylesheet" type="text/css" href="example53.css"/>
Example 10.53 Rendered:
With Styles
Without Styles
Inspired by:
CSS Cookbook
by Christopher Schmitt
Table of Contents
|
All Slides
|
Link List
|
Examples
|
CSCI E-75
<< previous
|
next >>
