topical media & game development
basic-css-14-Exercises-exercise14-2.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<style type="text/css">
* {
font-family: sans-serif;
color: white;
}
body {
margin: 0;
}
h1, h2 {
margin: 0;
background: gray;
}
h1 {
font-size: 1.6em;
padding: 0.3em;
border-bottom: 5px solid black;
letter-spacing: -0.08em;
}
div {
background: lightgrey;
padding: 0.7em;
clear: left;
}
h2 {
font-size: 1em;
padding: 0.2em;
}
ul#navigation {
list-style: none;
background: gray;
margin: 0.1em;
padding: 0;
}
ul#navigation li {
float: left;
margin: 0.4em;
}
ul#navigation li a {
padding: 0.3em;
}
ul#navigation li a:link {
background: gray;
}
ul#navigation li a:active {
background: orange;
}
ul#navigation li a:visited {
background: black;
}
ul#navigation li a:hover, li a:focus {
background: white;
color: black;
}
/* Dynamic link descriptions */
ul#navigation div {
position: absolute;
right: 0;
top: 0;
background: gray;
display: none;
}
ul#navigation li:hover > div {
display: block;
}
/* Watermark */
div#watermark {
position: fixed;
bottom: 10px;
right: 10px;
font-size: 4em;
padding: 0.1em;
background: white;
color: gray;
opacity: 0.5;
}
div#watermark a {
color: black;
text-decoration: none;
}
ul#top {
color: black;
}
h3, p {
color: black;
}
p {
border: 0.05em solid black;
padding: 0.8em;
}
h3:target {
color: yellow;
background: red;
}
ul#top li a {
color: black;
}
</style>
<title>FAQ - Widgets and What's-its</title>
</head>
<body>
<h1>Widgets and What's-its</h1>
<ul id='navigation'>
<li>
<a href=''>home</a>
<div>Go to the Widgets and What's-its home page.</div>
</li>
<li>
<a href=''>contact us</a>
<div>Widgets and What's-its contact information.</div>
</li>
<li>
<a href=''>products</a>
<div>Browse our complete line of Widgets and What's-its.</div>
</li>
<li>
<a href=''>services</a>
<div>Quality Widgets and What's-its service and support.</div>
</li>
<li>
<a href=''>faq</a>
<div>Frequently asked questions about our Widgets and What's-its.</div>
</li>
</ul>
<div>
<h2>faq</h2>
<ul id='top'>
<li><a href='#widgets'>Q. What are widgets?</a></li>
<li><a href='#why'>Q. Why should I buy a widget?</a></li>
<li><a href='#where'>Q. Where do widgets come from?</a></li>
<li><a href='#what'>Q. What are widgets made of?</a></li>
<li><a href='#how'>Q. How do I use my widget?</a></li>
<li><a href='#who'>Q. Who uses widgets?</a></li>
</ul>
<h3 id='widgets'>Q. What are widgets? <a href='#top'>top</a></h3>
<p>
A. Widgets are a smaller, more compact version of what's its.
</p>
<h3 id='why'>Q. Why should I buy a widget? <a href='#top'>top</a></h3>
<p>
A. Because widgets will solve all of you problems.
</p>
<h3 id='where'>Q. Where do widgets come from? <a href='#top'>top</a></h3>
<p>
A. Widgets are harvested from the Amazon rain forest by
little green gnomes.
</p>
<h3 id='what'>Q. What are widgets made of? <a href='#top'>top</a></h3>
<p>
A. Widgets are made of primordial, esoteric matter, and as
such could cause your head to explode into one of seven
fun-filled colors.
</p>
<h3 id='how'>Q. How do I use my widget? <a href='#top'>top</a></h3>
<p>
A. You must summon a troll using our proprietary magic wand and
book of spells who will teach you everything you need to know
about your widget.
</p>
<h3 id='who'>Q. Who uses widgets? <a href='#top'>top</a></h3>
<p>
A. Day traders and postal workers, primarily.
</p>
</div>
<div id='watermark'>
<a href=''>W</a>
</div>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
