Two line top menu bar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Aqueous</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
body {
font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
word-spacing:2px;
color:#444;
margin:20px;
background:url(aqueous-images//body.jpg) #f6f6f6;
}
* {
margin:0;
padding:0;
}
#wrapper {
background:#fff;
border:3px solid #f1f1f1;
max-width:1200px;
width:expression(this.width > 320 ? "320px" : this.width);
min-width:760px;
margin:0 auto;
}
* html #wrapper
{
w\idth: expression(document.documentElement.clientWidth > 1200 ? "1200px" : "auto");
}
#innerwrapper {
margin:1px;
background:url(aqueous-images//innerwrapper.jpg) top repeat-x;
padding:20px;
}
#header input {
width:150px;
padding:5px;
background:#fff;
border:2px solid #f6f6f6;
font:150% Arial;
color:#999;
}
#header input:hover {
border:2px solid #ccc;
}
#header input:focus {
border:2px solid #79B5D6;
color:#555;
}
#header form {
padding:27px 25px 20px 25px;
float:right;
background:#fff;
width:160px;
margin:-20px -20px 0 0 !important;
margin:-20px -10px 0 0;
border:none;
}
#header h1 {
float:left;
font:250% Arial;
color:#333;
padding:5px 20px 5px 5px;
border-right:1px solid #ccc;
margin:0 20px 0 0;
}
#header h1 a {
color:#333;
text-decoration:none;
border-bottom:2px solid #f6f6f6;
}
#header h1 a:hover {
color:#111;
border-bottom:2px solid #79B5D6;
}
#header h2 {
font:150% Arial;
color:#666;
padding:16px 0 0 0;
border:none;
}
#header h2 a {
color:#444;
text-decoration:none;
border-bottom:2px solid #f6f6f6;
}
#header h2 a:hover {
border-bottom:2px solid #79B5D6;
}
#header #nav {
clear:both;
background:url(aqueous-images//nav.jpg) top repeat-x #4F9EC9;
border-bottom:2px solid #4F9EC9;
border-top:2px solid #388CBA;
border-left:2px solid #388CBA;
border-right:2px solid #388CBA;
padding:10px 10px 10px 0 !important;
padding:4px 10px 10px 0;
}
#header a em {
font-style:normal;
text-decoration:underline;
}
#header #nav a {
color:#fff;
font:140% Trebuchet MS;
text-decoration:none;
padding:10px;
}
#header #nav a:hover {
background:#4F9EC9;
}
#header #nav a.active {
background:#4F9EC9;
}
#header #nav li {
display:inline;
list-style:none;
margin:0 1px 0 0;
}
#header #subnav {
background:#4F9EC9;
padding:5px 7px 7px 7px;
font:90% Verdana;
color:#DEEDF5;
border-bottom:2px solid #388CBA;
border-left:2px solid #388CBA;
border-right:2px solid #388CBA;
}
#header #subnav li {
list-style:none;
display:inline;
}
#header #subnav a {
color:#DEEDF5;
text-decoration:none;
font:100% Verdana;
padding:5px;
border-bottom:2px solid #4F9EC9;
}
#header #subnav a:hover {
border-bottom:2px solid #388CBA;
color:#fff;
}
#header #subnav a.active {
border-bottom:2px solid #388CBA;
color:#fff;
}
#sidebar {
background:#333;
width:200px;
padding:10px 20px 20px 20px;
float:left;
color:#666;
border-top:2px solid #000;
border-bottom:10px solid #000;
}
#sidebar h2 {
font:160% Arial;
color:#999;
margin:10px 0 10px 0;
background:url(aqueous-images//sidebarh2.jpg) right no-repeat;
border:none;
}
#sidebar h3 {
color:#FF8040;
font:90% Verdana;
font-weight:bold;
letter-spacing:2px;
}
#sidebar p {
margin:15px 0;
}
#sidebar p.news {
background:#323232;
}
#sidebar p.news a.more {
color:#ccc;
display:block;
text-align:right;
font:80% Verdana;
text-transform:uppercase;
letter-spacing:1px;
text-decoration:none;
padding:10px 0;
}
#sidebar p.news a:hover {
color:#98D158;
}
#sidebar .subnav {
border-top:1px solid #2C2C2C;
}
#sidebar .subnav li {
list-style:none;
padding:5px;
border-bottom:1px solid #2C2C2C;
}
#sidebar .subnav li a {
color:#ccc;
text-decoration:none;
display:block;
}
#sidebar .subnav li a:hover {
color:#98D158;
}
#sidebar .subnav li a b {
float:right;
display:none;
color:#666;
}
#sidebar .subnav li a:hover b {
display:inline;
}
#sidebar input {
padding:4px;
background:#2c2c2c;
border:1px solid #222222;
color:#ccc;
font:90% Verdana;
width:190px;
}
#sidebarright {
width:170px;
float:right;
padding:10px 0 0 20px;
background:url(aqueous-images//sidebarright.jpg) top left no-repeat;
}
#sidebarright p {
font:90% Verdana;
color:#777;
line-height:20px;
margin:10px 0;
}
#sidebarright h2 {
font:140% Arial;
color:#333;
margin:10px 0;
border:none;
}
#sidebarright ul {
margin:10px 0 10px 15px;
font:90% Verdana;
}
#sidebarright ul li {
margin:5px 0;
}
#sidebarright a {
border-bottom:1px dotted #eee;
color:#444;
text-decoration:none;
}
#sidebarright a:hover {
border-bottom:1px solid #ccc;
}
#content {
margin:0 210px 0 240px;
background:url(aqueous-images//content.jpg) top left no-repeat;
padding:20px 0 0 20px;
}
#contentnorightbar {
margin:0 0 0 240px;
background:url(aqueous-images//content.jpg) top left no-repeat;
padding:20px 0 0 20px;
}
p {
margin:15px 0;
line-height:22px;
}
h2 {
font:190% Arial;
color:#79B933;
border-bottom:2px solid #f6f6f6;
}
h2 a {
color:#79B933;
text-decoration:none;
}
h2 a:hover {
color:#5F9128;
}
#footer {
clear:both;
border-top:1px solid #eee;
padding:10px;
margin:30px 0 0;
}
a {
color:#222;
}
a:hover {
text-decoration:none;
}
h3 {
font:140% Trebuchet MS;
margin:10px 0;
}
#content ul {
margin:15px 0 15px 0;
line-height:25px;
padding:15px 0 15px 15px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
color:#79B933;
}
#content ul span {
color:#444;
}
#contentnorightbar ul {
margin:15px 0 15px 20px;
line-height:25px;
padding:15px 0;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
color:#79B933;
}
#contentnorightbar ul span {
color:#444;
}
img {
padding:1px;
background:#ccc;
border:4px solid #f6f6f6;
}
form {
padding:10px;
border:1px solid #f6f6f6;
}
label {
display:block;
font-weight:bold;
color:#444;
margin:5px 0;
}
input {
width:300px;
padding:4px;
border:none;
border-bottom:1px dotted #ccc;
font:90% Verdana;
color:#777;
}
textarea {
width:400px;
padding:4px;
font:90% Verdana;
border:1px solid #eee;
height:200px;
display:block;
color:#777;
}
p img {
float:left;
margin:0 10px 0 0;
}
blockquote p {
font:160% Georgia;
color:#aaa;
padding:0 10% 0 0;
line-height:30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<form action="">
<input value="Search" />
</form>
<h1><a href="">Aqueous</a></h1>
<h2> A liquid layout by Six Shooter Media</h2>
<ul id="nav">
<li><a href="" accesskey="3" class="active"><em>3</em> Columns</a></li>
<li><a href="twocolumns.html" accesskey="2"><em>2</em> Columns</a></li>
<li><a href=""><em>H</em>ome</a></li>
<li><a href=""><em>A</em>bout</a></li>
<li><a href=""><em>E</em>xamples</a></li>
<li><a href=""><em>C</em>ontact</a></li>
</ul>
<ul id="subnav">
<li>Subnav:</li>
<li><a href="" accesskey="3" class="active"><em>3</em> Columns</a></li>
<li><a href="twocolumns.html" accesskey="2"><em>2</em> Columns</a></li>
<li><a href=""><em>H</em>ome</a></li>
<li><a href=""><em>A</em>bout</a></li>
<li><a href=""><em>E</em>xamples</a></li>
<li><a href=""><em>C</em>ontact</a></li>
</ul>
</div>
<div id="sidebar">
<h2>Latest News</h2>
<h3>News Title</h3>
<p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="" class="more">Read More »</a> </p>
<h3>News Title</h3>
<p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="" class="more">Read More »</a> </p>
<h3>News Title</h3>
<p class="news"> An example of a "latest news" type text area. Here would be the excerpt of the article. You can of course put anything you like here. <a href="" class="more">Read More »</a> </p>
<h2>Sub Navigation</h2>
<ul class="subnav">
<li><a href=""><b>»</b>Link Here</a></li>
<li><a href=""><b>»</b>Link Here</a></li>
<li><a href=""><b>»</b>Link Here</a></li>
<li><a href=""><b>»</b>Link Here</a></li>
</ul>
<h2>Search</h2>
<input name="" type="text" value="Search" />
</div>
<div id="sidebarright">
<h2>Another Sidebar</h2>
<p> Sure, why not?! With all this width we have room for an additional sidebar if you should so need one. </p>
<p> Of course, if you happen to not want this additional sidebar, a standard 2 column layout is available which you can view by <a href="twocolumns.html">clicking here</a>! </p>
<h2>More Links</h2>
<ul>
<li>Six Shooter Media</li>
<li><a href="">free templates</a></li>
<li><a href="">Buy a Button</a></li>
<li><a href="">Transfer Speculation</a></li>
</ul>
</div>
<div id="content">
<h2 id="Intro"><a href="">Introduction</a></h2>
<p> Hello and welcome to Aqueous, a liquid template created by Six Shooter Media. The template itself is designed for higher resolutions, 1024x768 and up, however with it being liquid, it will work in any resolution you can throw at it. It's written in XHTML and CSS and displays consistently on various web browsers. </p>
<h2 id="About"><a href="">About the Author</a></h2>
<p>Hi! My names Jay and I'm a 20 year old web designer from England. My main projects are conducted through my website Six Shooter Media, but I (obviously) also enjoy creating Open Source web templates for general use! You can keep a check on my free templates here which is probably a link worth bookmarking as my templates appear there a couple of weeks before OWD/OSWD due to the design queues. </p>
<p> Another site of mine that you might find interesting if you're setting up a site with a free template like Buy a Button.net. There, for a great price you can purchase a link to your site in the form of a button. This link will obviously provide you site with some additional traffic which is always nice! </p>
<p> If you want more of my free templates, they can be found here! </p>
<h2 id="Examples"><a href="">Some Examples</a></h2>
<p> OK, here I'll just put some example html elements that you will most probably be using in your blog. </p>
<h3>Blockquote Example</h3>
<blockquote>
<p> Here's your blockquote text jfds jkndskf ndsknf sldnfjk sdnf jdsbf hdsbf jbsdjfk bdskj bdsjfb dsk bds bfsdj bfsjk bfsjdbf sbjd fjsbdk fsdbf sdb fksbd sb </p>
</blockquote>
<h3>List Example</h3>
<ul>
<li><span>Here</span></li>
<li><span>Is our friend</span></li>
<li><span>The list!</span></li>
</ul>
<h2 id="Contact"><a href="">Contact</a></h2>
<p> If you decide to use this template please drop me a line to let me know! Don't hesitiate to get in touch if your interested in a custom template or just in any of my services in general. I look forward to hearing from you! </p>
<h3>Example Contact Form</h3>
<form action="">
<label>Name</label>
<input value="Your Name" />
<label>Email</label>
<input value="Your Email" />
<label>You Comments</label>
<textarea rows="5" cols="5"></textarea>
<input type="submit" />
</form>
</div>
<div id="footer">
<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
All your copyright information here.</p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category