topical media & game development
lib-present-style-bullet-chapter5-index.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
indestructible box(es)
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Chapter 5: Indestructible Boxes</title>
style(s)
<style type="text/css" media="screen">
body {
font-family: Arial, sans-serif;
font-size: small;
}
a {
color: #00458B;
}
netflix box / class
/* Netflix box */
.box {
width: 273px;
background: url(lib-present-style-bullet-chapter5-img-div-bottom.gif) no-repeat bottom left;
}
netflix box / header(s)
.box h3 {
margin: 0;
padding: 6px 8px 4px 10px;
font-size: 130%;
color: #333;
border-bottom: 1px solid #E0CFAB;
background: url(lib-present-style-bullet-chapter5-img-h3-bg.gif) no-repeat top left;
}
netflix box / list(s)
.box ul {
margin: 0;
padding: 14px 10px 14px 10px;
list-style: none;
}
.box li {
margin: 0 0 6px;
padding: 0;
}
/*@ box -- indestructible container / class -->
/* Indestrucible box */
.container {
float: left;
margin: 20px 0;
padding: 0;
color: #666;
background: url(lib-present-style-bullet-chapter5-img-rounded-right.gif) top right no-repeat;
}
description / class
.desc {
margin: 0;
padding: 9px 9px 0 9px;
background: url(lib-present-style-bullet-chapter5-img-rounded-left.gif) top left no-repeat;
}
link / class
.link {
margin: 0;
padding: 0 0 0 9px;
background: url(lib-present-style-bullet-chapter5-img-rounded-left.gif) bottom left no-repeat;
}
link / em
.link em {
display: block;
padding: 0 9px 9px 0;
font-style: normal;
background: url(lib-present-style-bullet-chapter5-img-rounded-right.gif) bottom right no-repeat;
}
container / link(s)
.container a {
font-size: 130%;
color: #e70;
}
</style>
</head>
body / box
<body>
<div class="box">
<h3>Gifts and Special Offers</h3>
<ul>
<li><a href="/purchase/">Purchase Gift Subscription</a></li>
<li><a href="/redeem/">Redeem Gift Subscription</a></li>
<li><a href="/view/">View Purchase History</a></li>
</ul>
</div>
container
<div class="container">
<p class="desc">This box is:</p>
<p class="link"><em><a href="/browsers/firefox/" class="firefox">Indestructible!</a></em></p>
</div>
</body>
</html>
(C) Æliens
04/09/2009
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.