Layout Sample #2

essential 0 182 Views

A two columned fixed layout with vertical navigation sample. Now all it needs is your great imagination. Hope you find this useful, and help you all the way in your web activities. Enjoy...

<!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>Layout Sample #2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html, body { margin: 0; padding: 0; }
body {
     background: #000;
     color: #696969;
     font: normal 80%/1.5em Verdana, Helvetica, Arial, sans-serif;
     text-align: center;
}
#wrapper {
     width: 800px;
     margin: 0 auto;
     text-align: left;
     padding: 0;
}
#header {
     background: SlateBlue;
     width: 548px;
     height: 130px;
     margin: 0;
     float: left;
     padding: 0;
     padding-right: 20px;
}
#logo {
     border: thin solid #444;
     width: 556px;
     height: auto;
     margin: 5px 0 10px 5px;
     float: left;
     clear: both;
     padding: 0;
     background: #EAEAEA;
     position: relative;
} 
#logo h1 {
     margin: 5px 0 0 15px;
     padding: 0;
     float: left;
}
p { 
margin: 50px 5px 2px 20px;
}
#side-bar {
     float: right;
     position: relative;
     width: 230px;
     height: 600px;
     margin: 0;
     background: #fff;
}
#wrap {
     width: 546px;
     margin: 0;
     padding: 0;
     float: left;
     overflow: visible;
}
#side-block {
     width: 30px;
     height: 468px;
     float: left;
     position: relative;
     margin: 0;
     padding: 0;
     background: SlateBlue;
     border-right: 2px solid #000;
}
#side-block a:link, #side-block a:visited {
     margin: 0;
     padding: 0;
     color: SlateBlue;
     text-decoration: none;
     font: bold 12px Arial, sans-serif;
}
#side-block a:active, #side-block a:hover, #side-block a.current {
     margin: 0;
     padding: 0;
     color: #fff;
     text-decoration: none;
     font: bold 12px Arial, sans-serif;
}
#side-block span {
     float: left;
     text-align: center;
     display: block;
     margin: 1px 0 1px 2px;
     padding: 3px 0 3px 0;
     width: 26px;
     background: #000;
}
#footer {
     width: 800px;
     height: 30px;
     float: left;
     magin: 0;
     padding: 0;
     position: relative;
     background: SlateBlue;
}
#footer p {
     margin: 0;
     padding: 7px 5px 0 30px;
     color: #eee;
     font: 500 12px Arial;
}
#content {
     width: 520px;
     height: 468px;
     overflow: hidden;
     float: left;
     margin: 0;
     padding: 0;
     background-color: transparent;
}
/* Additional Classes */
.mini-nav {
     width: 0 auto;
     position: absolute;
     right: 10px;
     top: 5px;
     margin: 0 auto;
}
.mini-nav a:link, .mini-nav a:visited {
     text-decoration: none;
     font: bold 10px Arial, sans-serif;
     color: MediumSlateBlue;
     text-transform: capitalize;
}
.mini-nav a:active, .mini-nav a:hover, .mini-nav a.current {
    text-decoration: none;
     font: bold 10px Arial, sans-serif;
     color: #708090;
     text-transform: capitalize;
}
.mini-nav p {
      position: relative;
}
.nav {    
     background: #E9E9E9;
     border-top: 2px solid #000;
     border-right: 2px solid #000;
     width: 568px;
     height: 468px;
     margin: 0;
     float: left;
     padding: 0;
}
.nav #content h3 {
     color: Midnightblue;
     margin: 7px 0 7px 17px;
}
.nav #content p {
     margin: 4px 0 3px 17px;
}
-->
</style>
<script type="text/javascript">
<!--
/* Remove this script when applying this template. */
var filler = ['You are welcome to modify this template.', ' Layout sample #2 by essential -', 'if you have comments or suggestions, don\'t hesitate to drop-in a mail over my inbox!', 'Template #2/ released: 11-19-2008 -'];
var filler2 = ['This is just a sample layout!', 'All contents must be filled according to you!', 'Time to bring out those great ideas!', 'Links waiting to be filled!']
function textFiller(preloaded, message)
{ for ( var x = 0; x < message; x++ ) 
{ document.write( preloaded[Math.floor(Math.random() * 4)] + ' ' ); }
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<div id="side-bar">
<!--Mini Nav Sample-->
<div class="mini-nav"> 
<a href="#" class="current">Home</a> | <a href="#">About</a> | <a href="#">Site Map</a> 
</div><!--mini-nav-->
<p><script type="text/javascript">textFiller(filler2,23);</script></p>
</div><!--#side-bar-->
<div id="wrap">
<div id="header">
<div id="logo"><h1> W E L C O M E ! </h1></div>
</div><!--#header-->
<div class="nav">
<div id="side-block">
<!--Sample Navigation-->
<span><a href="#" class="current">H<br />O<br />M<br />E</a></span><span><a href="#">M<br />U<br />S<br />I<br />C</a></span>  <span><a href="#">M<br />O<br />V<br />I<br />E<br />S</a></span> 
</div>
<div id="content">
<h3>Feel free to ask!</h3>
<p><script type="text/javascript">textFiller(filler,11);</script></p> </div>
</div>
</div>
<div id="footer"><p>&copy; 2008 yourdomain.com</p></div>
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview