cultureshock
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Culture Shock</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
culture shock: voodoo dolly v1.0
pogy366: http://www.raykdesign.net
Oct. 2005
*/
/* general page structure and layout */
body {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#000000;
margin:20px 0 0 0;
padding:0 0 0 0;
background:#ffffff;
text-align:center;
}
.top {
margin:0 auto;
padding:0 0 0 0;
width:780px;
height:9px;
background:#ffffff url(cultureshock-img/page_top.jpg) no-repeat;
}
.page_wrap {
/* includes the header, main body content and the footer */
margin:0 auto;
padding:0 0 0 0;
width:780px;
background:#ffffff url(cultureshock-img/body_bg.jpg) repeat-y;
text-align:center;
}
.header {
position:relative;
margin:0 0 0 0 !important;
margin:-7px 0 0 0;
padding:0 0 0 ;
width:780px !important;
width:742px;
height:125px;
background:#ffffff url(cultureshock-img/header_bg.jpg);
text-align:left;
}
.header_block {
position:relative;
margin:0 20px 0 20px;
padding:0 0 0 0;
width:740px;
background:transparent;
text-align:left;
color:#eeeeee;
}
.logo {
position:relative;
float:left;
margin:0 20px 0 0;
padding:0 0 0 0;
}
.navbar {
position:relative;
margin:0 0 0 0;
padding:0 0 0 0;
width:780px !important;
width:742px;
height:39px;
background:#ffffff url(cultureshock-img/nav_bg.jpg);
text-align:left;
color:#000000;
font-size:.9em;
}
.container {
position:relative;
margin:10px 0 0 10px;
padding:0 0 0 0;
width:760px !important;
width:742px;
background:transparent;
text-align:left;
}
.left_column {
position:absolute;
left:0;
width:140px;
margin:0 0 0 0;
padding:0 4px 0 0;
background:transparent;
font-size:.9em;
color:#6E312A;
}
.center_column {
position:relative;
width:595px;
margin:0 0 0 151px;
padding:0 0 0 10px;
border-left:1px solid #999999;
}
.box_right {
position:relative;
float:right;
width:150px;
margin:0 0 3px 10px !important;
margin:0 5px 3px 10px;
padding:2px 5px 2px 10px;
background:#eeeeee;
border:1px solid #cccccc;
text-align:left;
color:#616161;
font-size:.9em;
}
.footer {
position:relative;
margin:0 0 0 0;
padding:10px 0 0 0;
width:780px;
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#6E312A;
background:transparent;
text-align:right;
}
.footer_logo {
position:relative;
float:right;
margin:0 0 0 15px;
padding:0 0 0 0;
}
#footer {
/* aligns the text to the middle of the footer, in relation to the logo */
vertical-align:-250%;
}
.bottom {
margin:0 auto;
padding:0 0 0 0;
width:780px;
height:11px;
background:#ffffff url(cultureshock-img/page_bottom.jpg) no-repeat top;
}
/* navigation bar */
#nav ul{
padding:0 0 0 0;
margin: 0 0 0 1.5em;
white-space: nowrap;
font-size:1.1em;
color:#ffffff;
float:left;
width:100%;
height:39px;
background:transparent;
list-style:none;
}
#nav ul li{
display:inline;
list-style:none;
}
#nav ul li a{
margin: .8em 0 0 0;
padding: .4em 1em .46em 1em;
color:#ffffff;
text-decoration:none;
float: left;
border-left:1px solid #999999;
background:transparent;
}
#nav ul li a:hover{
color:#000000;
text-decoration:none;
border-left:1px solid #999999;
}
/* fonts and colors */
h1 {
color:#eeeeee;
font-size:2em;
letter-spacing:.1em;
text-transform:capitalize;
margin:0 0 0 0;
padding:20px 0 0 0;
}
h2 {
color:#000000;
font-size:1.2em;
text-transform:capitalize;
font-weight:bold;
padding:0 0 0 0;
margin:0 0 -6px 0;
}
h2:after {
color: #000000;
content: "\0020 \00BB";
}
h3 {
color:#000000;
font-size:1.1em;
text-transform:capitalize;
font-weight:bold;
padding:0 0 0 0;
margin:0 0 -8px 0;
}
h3:after {
color: #000000;
content: "\0020 \00BB";
}
.box_right h3 {
color:#6E312A;
margin:2px 0 -10px 0;
}
.box_right h3:after {
color: #6E312A;
content: "\0020 \00BB";
}
a {
color:#6E312A;
text-decoration:underline;
}
a:hover {
color:#999999;
text-decoration:none;
}
.left_column a {
color:#000000;
text-decoration:underline;
}
.left_column a:hover {
color:#999999;
text-decoration:none;
}
/* images */
img {
border:none;
}
.left {
float:left;
margin:0 0 0 0;
padding:0 0 0 0;
}
.right {
float:right;
margin:0 0 0 0;
padding:0 0 0 0;
}
/* workarounds and hacks */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />
</head>
<body>
<div class="top"></div>
<div class="page_wrap clearfix">
<div class="header">
<div class="header_block">
<div class="logo"><img alt="logo" src="cultureshock-img/pc_logo.jpg" /></div>
<h1>culture shock</h1>
Voodoo Dolly in an Awkward Office Environment Coffee Clutch </div>
</div>
<div class="navbar" id="nav">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Forum</a></li>
<li><a href="http://www.free-css.com/">Design</a></li>
<li><a href="http://www.free-css.com/">Info</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div class="container clearfix">
<div class="left_column">
<h3>Left Column</h3>
<p>Secondary links, news updates, pointless rants or images can fill this
column.</p>
<p>The border to the right is assigned to the <a href="http://www.free-css.com/">center</a> column
and will expand with content over there. You can move it to this colum
or give it the axe. Decisions, decisions. </p>
<h3>Style Sheets</h3>
<p>Seperate style sheets for both print and handheld devices are included
with this design, so you'd be covered if/when someone visits your site
on their cell phone or what-not.</p>
</div>
<div class="center_column">
<div class="box_right">
<h3>Faux Column</h3>
<p>This isn't a column but a handy little text box with a float:right
slapped on it.</p>
<p>Could be used for a profile, secondary links or what ever else rocks
your world.</p>
<h3>Damn You IE!</h3>
<p>Is common sense dead? And if it is, was Microsoft the ones that killed
it? It never fails, learning about CSS is also learning about just
how much of a pain in the ass IE can be.</p>
<p>This is the first time that I used the "!important" tag
and it couldn't have come at a better time.</p>
<p>Is it too much to ask that someday web designers won't have to rely
on hacks so much? Damn I hope not.</p>
</div>
<h2>Voodoo Dolly (v1.0)</h2>
<p>What can i say? A two-column layout with fixed dimensions. Sure it's
nothing that will take over the world or get women to talk to you, but
it can serve as either a personal or commercial web site.</p>
<p>Of course, out-of-the-box, this design can be applied to a site that
has something to do with computers but by removing both the upper and
lower logos, it can be used for anything really.</p>
<p>The image below gives you an idea what the "bones" of this design looks
like.</p>
<p><img width="361" height="373" alt="" src="cultureshock-img/layout.gif" /></p>
<h2>Web Geek Stuff</h2>
<p><em>Voodoo Dolly (v1.0)</em> was tested in Windows with Firefox1.0.7,
IE6.0, Netscape7.2 and Opera7.54 with valid css and xhtml 1.0-strict.</p>
<p>As is, download time for 56k is 5.76 seconds; ISDN 128K at 1.90 seconds;
T1 at .35 seconds.</p>
<p>All images weigh in at 19.5KB.</p>
<h2>Better Living Through Open Source Design</h2>
<p>This is an open source design originally developed for the OSWD community
and is free to be used and adpated as such. If you need help figuring
things out or have questions about customizing this design, you can contact
me through OSWD or
visiting www.raykdesign.net.</p>
<p>If you use this design, please drop me a line so that I can see it in
action. Thanks and good luck!</p>
</div>
</div>
<div class="footer">
<div class="footer_logo"><img alt="" src="cultureshock-img/footer_logo.jpg" /></div>
<span id="footer">Copyright, 2005 (Your Site Name) • Design
by <a href="http://www.dbfnetwork.info/rayk/index.html">pogy366</a> for
OSWD • <a href="http://validator.w3.org/check?uri=referer">Valid
XHTML</a> • <a href="http://jigsaw.w3.org/css-validator/">Valid
CSS</a></span> </div>
</div>
<div class="bottom"></div>
</body>
</html>
Related examples in the same category