industry
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Industry</title>
<style type='text/css'>
body
{
background-color: #202020;
background-image: url(images/bg.gif);
font-family: Verdana, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
padding: 0px;
border-left: 12px solid #666666;
border-right: 12px solid #666666;
}
#nav
{
width: 680px;
height: 25px;
border-bottom: 1px solid white;
color: white;
background-color: #202020;
opacity: 0.8;
-moz-opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
position: fixed;
top: 0px;
margin-left: -340px;
left: 50%;
margin-top: 0px;
padding: 0px;
z-index: 99;
_position: absolute;
_top: expression((dummy = document.documentElement.scrollTop) + "px");
}
#nav li
{
display: block;
float: left;
height: 25px;
width: auto;
text-align: center;
line-height: 25px;
}
#nav li a
{
display: block;
padding-left: 15px;
padding-right: 15px;
line-height: 25px;
color: white;
text-decoration: none;
font-weight: bold;
}
#nav li a:hover
{
background-color: #666666;
}
#main
{
width: 680px;
margin-left: auto;
margin-right: auto;
border-right: 1px solid #666666;
border-left: 1px solid #666666;
}
#hero
{
margin: 0px;
border-bottom: 1px solid white;
width: 680px;
height: 180px;
background-image: url(images/hero.jpg);
}
#header
{
background-image: url(images/header_bg.gif);
height: 79px;
padding-top: 1px;
position: relative;
}
.gear
{
width: 57px;
height: 56px;
margin-top: 16px;
margin-left: 12px;
background-image: url(images/gear.png);
_background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='industry-style/images/gear.png');
}
#header h1
{
position: absolute;
left: 82px;
top: 8px;
color: white;
font-size: 48px;
font-weight: bold;
margin: 0px;
}
#header h1.shad
{
left: 84px;
top: 10px;
color: black;
opacity: 0.7;
-moz-opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
#header em
{
font-style: normal;
text-decoration: underline;
}
#body
{
padding-top: 1px;
background-color: white;
position: relative;
border-right: 200px solid #eeeeee;
}
#sidebar
{
width: 180px;
position: absolute;
right: -200px;
_right: 0px;
top: 0px;
padding: 10px;
}
#sidebar h3
{
font-size: 13px;
border-bottom: 1px solid black;
margin-bottom: 4px;
margin-top: 16px;
clear: both;
}
#sidebar ul
{
margin-left: 1em;
padding-left: 0px;
}
#sidebar p
{
margin-bottom: 8px;
}
#content
{
padding: 20px;
border-right: 1px solid #b0b0b0;
border-left: 1px solid #b0b0b0;
color: #333333;
}
#content h2
{
font-size: 18px;
/* 18px is the default minimum font size for which anti-aliasing will occur. */
margin: 0px;
border-bottom: 1px solid black;
}
#content .date
{
float: right;
}
#content .postedBy
{
float: left;
}
#content .meta
{
height: 1em;
}
#content p
{
text-align: justify;
text-indent: 3em;
line-height: 1.3em;
}
.comments
{
border-top: 1px dotted #666666;
border-bottom: 1px dotted #666666;
padding: 4px;
text-align: right;
margin-bottom: 2em;
background-image: url(images/comment_edit.gif);
background-repeat: no-repeat;
background-position: center left;
}
a
{
color: #666666;
}
.pullout
{
background-color: #eeeeee;
padding: 5px;
float: right;
margin: 8px;
}
.flickr-thumbnail, .flickr-pullout {
float: left;
background: url('images/flickr_shadow.gif') no-repeat bottom right;
margin: 5px 0px 0px 6px;
padding: 0px 0px 0px 0px;
display: block;
width: auto;
_position: relative;
}
.flickr-thumbnail img, .flickr-pullout img {
background-color: #fff;
border: 1px solid #a9a9a9;
display: block;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
}
.flickr-thumbnail img:hover, .flickr-thumbnail:hover img, .flickr-pullout:hover img {
background-color: #ccd;
}
.flickr-pullout
{
margin: 13px 3px 3px 14px;
background-image: url(images/flickr_shadow_white.gif);
}
#footer
{
width: 678px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid #b0b0b0;
background-color: #eeeeee;
color: #b0b0b0;
}
.left
{
float: left;
}
.right
{
float: right;
}
.csskeyword
{
color: blue;
}
.cssvalue
{
color: red;
}
p.caption
{
text-align: center;
}
small.super
{
vertical-align: top;
font-size: 0.75em;
line-height: 1.3em;
}
.nodisplay
{
display: none;
}
</style>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<ul id="nav">
<li><a href="#top">Top of Page</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Weblog</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="main">
<a name="top" class="nodisplay"></a>
<div id="hero"> </div>
<div id="header">
<div class="gear"> </div>
<h1 class="shad"><em>industr</em>y</h1>
<h1><em>industr</em>y</h1>
</div>
<div id="body">
<div id="sidebar">
<h3>Recent Photos</h3>
<a href="#" class="flickr-thumbnail">
<img src="http://images.google.com/images?q=tbn:jmuZz1c1ton1GM:http://home.earthlink.net/~mountfuturama/smFryWallpaper1.jpg" alt="" width="70" height="55" />
</a>
<a href="#" class="flickr-thumbnail">
<img src="http://images.google.com/images?q=tbn:Mb4nSTF51ebxaM:http://www.mathsci.appstate.edu/~sjg/futurama/stringtheory.jpg" alt="" width="70" height="55" />
</a>
<a href="#" class="flickr-thumbnail">
<img src="http://images.google.com/images?q=tbn:nHvOr_XTjxErFM:http://www.nyder.com/cthulhu/graphics/zoidberg.jpg" alt="" width="70" height="55" />
</a>
<a href="#" class="flickr-thumbnail">
<img src="http://images.google.com/images?q=tbn:s8lm4bLUmUz9sM:http://www.englisch.schule.de/wiesmoor/hermes.jpg" alt="" width="70" height="55" />
</a>
<div style="clear: both;"> </div>
<h3>Healthy Links</h3>
<ul>
<li><a href="http://www.oswd.org">OSWD</a></li>
<li><a href="http://www.duckwizard.com">Duckwizard.com</a></li>
<li><a href="http://en.wikipedia.org/wiki/Futurama">Futurama on Wikipedia</a></li>
<li><a href="http://www.alistapart.com">A List Apart</a></li>
<li><a href="http://validator.w3.org/check/referer">Valid XHTML</a></li>
</ul>
<p style="margin-top: 80px">[1] This paragraph is taken from <a href="http://www.wikipedia.org">Wikipedia</a>'s entry on Futurama.</p>
<p style="margin-top: 160px"><strong>Did You Know?</strong> <br />Latin text such as this is often used as a typesetting aid. The text is meaningless, but seems to have been derived from Cicero's De finibus bonorum et malorum (On the Ends of Goods and Evils).</p>
<p style="margin-top: 300px; _margin-top: 380px">[2] Lorem ipsum dolor sit amet, consectetur cras magna ante. Nunc est bibendum.</p>
</div>
<div id="content">
<h2>Yet Another Fixed Layout</h2>
<div class="meta">
<span class="date">February 22, 3006</span>
<span class="postedBy">Posted by <a href="#">Phillip J. Fry</a></span>
</div>
<p>
Here's another centered, fixed layout. All my designs seem to be variations on this kind of structure; I
<a class="flickr-pullout right" href="#">
<img src="http://images.google.com/images?q=tbn:jmuZz1c1ton1GM:http://home.earthlink.net/~mountfuturama/smFryWallpaper1.jpg" alt="" />
</a>
promise I'll do something different next time. This one has a floaty nav bar on top for quick access to
links, as well as the top of the page. I can see some people being annoyed by this, so fortunately it's
easy to change so that it doesn't stay on top of the window. Just change the <code><span class="csskeyword">position</span>: <span class="cssvalue">fixed</span></code> to <code><span class="csskeyword">position</span>: <span class="cssvalue">absolute</span></code> and ditch the IE hack
(or you could change it to auto margins instead, if you want the header image to flow beneath it). One
thing that I included in this layout is a couple handy classes for your Flickr images. See the example
pullouts in the text as well as the thumbnails in the sidebar. In the interest of filling up space, I may
as well tell you that the sidebar has been done in kind of a funny way to make it vertically stretch over
the entire content div. This is impossible to do in a traditional way (including using 100% height in
CSS, which isn't defined the way it should be). Check it out; I thought I was pretty clever to think of
it! You could use the sidebar for annotations, footnotes, links, photos, or whatever you like.
</p>
<p>
Now I'll steal some text from Wikipedia<small class="super">1</small>! Futurama is an American animated television series created by
Matt Groening (creator of The Simpsons) and David X. Cohen (also a writer for The Simpsons). Set in "New
New York City" in the 31st century, it was introduced on the Fox Network and received airplay between
March 28, 1999 and August 10, 2003. It is currently in syndication on the Adult Swim segment of Cartoon
Network in the United States, on Teletoon in Canada, on Channel 4, Sky One and Sky Two in the UK, and on
Fox8 and Network Ten in Australia.
</p>
<div class="comments">
No comments | <a href="#">Leave a comment</a>
</div>
<h2>Good News, Everyone!</h2>
<div class="meta">
<span class="date">February 22, 3006</span>
<span class="postedBy">Posted by <a href="#">Hubert Farnsworth</a></span>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum accumsan, justo non tristique laoreet,
odio nisi fringilla nibh, vitae blandit eros sapien ac mi. Etiam non nisl euismod massa fringilla sagittis.
<a class="flickr-pullout right" href="#"><img src="http://images.google.com/images?q=tbn:Mb4nSTF51ebxaM:http://www.mathsci.appstate.edu/~sjg/futurama/stringtheory.jpg" alt="Good news, everyone!" /></a>
Nunc vestibulum iaculis purus. Vivamus arcu urna, tristique eu, pharetra et, ullamcorper porta, nibh. Nulla
eget dolor sit amet purus aliquam lacinia. Cras eu quam. In id nisl et orci laoreet vulputate. Phasellus quis
est vel libero euismod mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Cras magna ante, sodales eget, commodo ac, molestie ut, velit. Cras quis pede sit amet massa
feugiat imperdiet. Nulla dignissim. Curabitur eleifend, lorem quis dictum varius, elit nunc commodo enim,
iaculis mattis dui felis et urna.
</p>
<p>
Aliquam erat volutpat. Maecenas ut mi ut odio gravida tincidunt. Proin urna urna, dapibus sit amet, eleifend
quis, bibendum et, felis. Ut aliquet. Etiam diam erat, interdum ac, vehicula in, vulputate et, libero. Donec
ut dolor quis leo blandit lobortis. Vestibulum sed tellus. Donec vitae lectus. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nullam mollis aliquam nulla. Mauris pulvinar metus quis urna. Praesent eu turpis
aliquam est mollis aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Vestibulum tempor nibh. Nam quis neque.
</p>
<div class="comments">
<a href="#">8 comments</a> | <a href="#">Leave a comment</a>
</div>
<h2>Surrender Your Mysteries to Zoidberg!</h2>
<p>
Quisque convallis tellus<small class="super">2</small>. Etiam aliquam lobortis erat. Donec gravida tortor a massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et
<a href="#" class="flickr-pullout right">
<img src="http://images.google.com/images?q=tbn:nHvOr_XTjxErFM:http://www.nyder.com/cthulhu/graphics/zoidberg.jpg" alt="" />
</a>
magnis dis parturient montes, nascetur ridiculus mus. Aliquam arcu libero, congue in, iaculis sit amet, dapibus non, ligula. Aliquam erat volutpat. Fusce nisl ante, pretium ac, suscipit sed, feugiat a, sem. Donec sollicitudin leo eu nisl. Donec at dui a urna rhoncus viverra. Curabitur arcu. Quisque vulputate, purus ac ultricies consectetuer, justo neque suscipit nisi, eget tempor nulla nisl vitae tellus. Aenean eget erat. Vestibulum imperdiet viverra metus.
</p>
<p>
Nunc adipiscing hendrerit pede. Vestibulum tempor bibendum libero. Duis consectetuer felis laoreet nibh. Pellentesque lacus libero, sagittis ornare, tempor et, porta in, elit. Donec eu leo. Etiam erat. Sed aliquam odio quis risus. Aliquam arcu. Aenean elementum. Curabitur pellentesque ligula ac risus. Morbi sodales vehicula ipsum.
</p>
<div class="comments">
No comments | <a href="#">Leave a comment</a>
</div>
</div>
</div>
<div id="footer">
Copyright © 2006, Your Name Here, Ltd.
</div>
</div>
</body>
</html>
Related examples in the same category