inbusiness
<!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>[in] Business</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*
This stylesheet is part of the [in] business template downloaded from the oswd.org site
The stylesheet and template where made by Tjobbe Andrews from NOW:design www.now-design.co.uk
*/
html {
width: 100%
}
body {
font-family: "Trebuchet MS", verdana, arial, "Times New Roman";
font-size: 90%;
color: #3D3535;
background-color: #E4E5E0;
margin: 20px;
padding: 0px;
line-height: 140%;
}
/* Wrapper */
.all {
text-align: center;
width: 100%;
}
/* the container */
.box {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
padding: 20px;
text-align: left;
width: 90%;
}
/*holds the tabs at the top*/
.menu {
background-color: #FFFFFF;
text-align: right;
border-bottom: 1px solid #FFFFFF;
}
/*holds the logo and image*/
.header {
background-color: #EDEEEA;
padding: 10px;
margin-top:3px;
height: 95px;
}
/*defines the colours for the tabs, with corner background images*/
.menu a:link, .menu a:active, .menu a:visited {
background: #EDEEEA url(inbusiness-images/corner.gif) no-repeat right top;
color: #3D3535;
text-decoration: none;
padding: 3px 7px 3px 7px;
margin: 0 0 0 4px;
}
.menu a:hover {
background: #D6D8CF url(inbusiness-images/corner2.gif) no-repeat right top;
color: #000000;
text-decoration: none;
padding: 3px 7px 3px 7px;
margin: 0 0 0 4px;
}
/*just a fix, taken from http://www.positioniseverything.net/easyclearing.html*/
.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 */
/*the main text container*/
.content {
margin-right: 255px;
padding: 20px;
}
.content h1 {
font-size: 110%;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 2px solid #A53512;
}
/*this is the right hand bar, news bar, links bar w/e*/
.newsbar {
margin-top: 40px;
width: 245px;
float: right;
}
.newsbar h1 {
background-color: #A53512;
color: #FFFFFF;
padding: 3px;
margin: 0px 0px 0px 0px;
font-size: 100%;
font-weight: normal;
}
/*this just lets you have a "comment" type area in the main content*/
.p1 {
padding: 20px;
background-color: #F7F7F4;
font-size:90%;
}
/*sets the padding for the newsbar text, not the headings*/
.p2 {
padding: 20px;
background-color: #FFFFFF;
font-size: 90%;
list-style-image: url(inbusiness-images/b.gif);
list-style-position: 10px;
}
.p2 ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
/*the footer, with copyright*/
.footer {
clear:both;
background-color: #D6D8CF;
padding: 4px;
font-size: 80%;
text-align: center;
}
/*sets the link colours and style*/
a:link, a:active, a:visited {
color: #A53512;
}
a:hover {
color: #A53512;
text-decoration: none;
}
</style>
<style type="text/css">
<!--
.style1 {color: #A53512}
-->
</style>
</head>
<body>
<div class="all">
<div class="box">
<!-- The menu, tabs -->
<div class="menu"><a href="http://www.free-css.com/">Home</a><a href="http://www.free-css.com/">about</a><a href="http://www.free-css.com/">products</a><a href="http://www.free-css.com/">contact</a></div>
<!-- The header -->
<div class="header"><img alt="" style="float:right; " src="inbusiness-images/www.jpg" width="225" height="95" />
<h1>[<span class="style1">in</span>] Business</h1>
<div class="clearfix"></div>
</div>
<!-- the news bar, or right hand column -->
<div class="newsbar">
<h1>Need help?</h1>
<div class="p2">If you need help customising this design, I am available for
paid work, on small or large projects. I can make custom designs or
tailor most existing designs to suit your company or organisations
image. Visit my <a href="http://www.free-css.com/">company Web site</a> to
get in touch with me.</div>
<h1>Copyright?</h1>
<div class="p2">
<p>I would appreciate it if
you could leave the copyright info intact, so that others can find
the oswd site (and also me). Other than that, feel free to change
colours, layout and any other elements!</p>
</div>
<h1>Links</h1>
<div class="p2">
<ul>
<li><a href="http://www.free-css.com/">OSWD.org</a></li>
<li><a href="http://www.free-css.com/">NOW:design</a></li>
<li><a href="http://www.free-css.com/">FarStyle.com</a></li>
<li><a href="http://www.free-css.com/">W3</a></li>
</ul>
</div>
</div>
<!-- main content area-->
<div class="content">
<h1>[in] Business</h1>
<p>This is my third design for www.oswd.org. My last design
was downloaded so many times that I wanted to make another one
along the same lines. This is another business themed layout that could
just as easily be used for a personal blog site.</p>
<p>This design was made using <acronym title="Cascading Style Sheets">CSS</acronym> and
does not use any tables because it has no tabular data. The site
is valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and
valid <a href="http://validator.w3.org/check?uri=referer">XHTML
1.0 strict</a>.</p>
<div class="p1">Tables are dead, CSS is what is intended for layouts and
design, tables are for containing data. CSS uses less code, meaning
your site loads quicker, which is great for search engines and people
with slow internet connections.</div>
<h1><strong> TESTED IN:</strong></h1>
<ul>
<li>Opera 7.54u1</li>
<li>Internet Explorer 6.0.290..</li>
<li>Firefox 1.0.6</li>
<li>Opera 8.0</li>
</ul>
<p>The design is fluid, with a fixed-width side-bar. The colours, width,
fonts etc can be changed by ammending the attached CSS file.</p>
</div>
<div class="clearfix"></div>
<!-- footer, copyright area - please do not remove!-->
<div class="footer">© 2005, design by <a href="http://www.now-design.co.uk/">NOW:design</a> |
Template from oswd.org </div>
</div>
</div>
</body>
</html>
Related examples in the same category