Wide and tall menu
<!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">
<head>
<!--
Copyright: Denise Mitchinson 2007, http://www.mitchinson.net
License: Released Under the "Creative Commons License",
href="http://creativecommons.org/licenses/by/3.0/">
--><!-- Meta Data -->
<title>*VERDE*</title>
<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
font : 73% "lucida sans", "Trebuchet MS", helvetica, arial, sans-serif;
line-height: 1.7em;
background : #fff url(71_verde-images/pattern_036.gif) repeat;
color : #555;
}
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
border: 0px solid #ccc;
margin: auto;
padding: 10px;
background : #fff;
}
#topbar {
height : 25px;
margin : 0;
padding : 0;
background : #80A173;
color : #666;
}
#banner h1 {
float : right;
margin : 0;
padding : 60px 20px 10px 0;
font-size : 140%;
letter-spacing: 3px;
font-weight: bold;
text-transform : uppercase;
background : transparent;
color : #5F6951;
}
#banner {
padding: 0px;
margin-bottom: 10px;
height: 150px;
background: #BCEDA8 url(71_verde-images/02.jpg) no-repeat;
}
/* LEFTBOX PROPERTIES */
#leftbox {
float : left;
width : 200px;
height: auto;
padding : 0;
margin-top : 0;
font-size : 1em;
background : #fff;
color : #333;
}
/* RIGHTBOX PROPERTIES */
#rightbox {
float : right;
width : 70%;
height: auto;
margin : 0;
padding-top : 20px;
background : #fff;
color : #A4B48B;
}
#content {
padding: 5px;
margin-left: 215px;
background: #fff;
}
#sidebar-a {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0 5px 0 0;
padding: 5px;
background: #fff;
}
/*TOP NAVIGATION */
#menu {
height: 100px;
margin : 0;
padding : 0;
list-style-type : none;
list-style-image : none;
text-transform : lowercase;
background: #5F6951;
}
#menu li {
float : left;
width :10em;
border-right : 1px solid #eee;
}
#menu a {text-decoration: none;
display : block;
height : 70px;
width : 10em;
padding : 30px 0 0 0;
font-weight : bold;
line-height : 30px;
letter-spacing: 3px;
text-align : center;
color : #000;
background : #A4B48B;
}
#menu a:hover {
color : #fff;
background : #969B85 url(71_verde-images/pattern_036.gif) repeat;
}
ul {
list-style : none;
margin : 0;
padding : 0;
}
#footer {
clear: both;
padding: 5px;
margin-top: 5px;
background: #BCC2A6;
color: #eee;
}
.clear {
clear : both;
}
h2 {
margin : 0;
padding: 15px 0 0 15px;
font : bold 140% "Trebuchet MS", "lucida sans", helvetica, arial, sans-serif;
text-transform : uppercase;
line-height: 1.5em;
background : transparent;
color : #A4B48B;
}
h3 {
margin : 0;
font : normal 200% "Trebuchet MS", "lucida sans", helvetica, arial, sans-serif;
text-transform : uppercase;
line-height: 2em;
border-bottom: 1px solid #5F6951;
background : transparent;
color : #5F6951;
}
/*SEARCH BOX*/
legend {
color : #5F6951;
}
input {
background : #eee;
color : #5F6951;
}
a:link, a:visited {
text-decoration : none;
background : inherit;
color : #5F6951;
}
a:hover {
text-decoration : underline;
background : inherit;
color : #666;
}
</style>
</head>
<body>
<div id="container">
<div id="banner"><h1>Your Company Name</h1></div>
<div id="menu">
<ul>
<li><a href="#1" title="Link 1">Home</a></li>
<li><a href="#2" title="Link 2">About</a></li>
<li><a href="#3" title="Link 3">Products</a></li>
<li><a href="#4" title="Link 4">Services</a></li>
<li><a href="#5" title="Link 5">Contact</a></li>
</ul>
</div>
<div id="leftbox">
<img src="71_verde-images/03b.jpg" alt="" title="" />
</div>
<div id="rightbox">
<blockquote><h2>This template has been tested in Mozilla Firefox and IE7 & validates as XHTML 1.0 Transitional using valid CSS. The images used in this template are courtesy of <a href="http://www.sxc.hu/" title="free images">stock xchng</a>. Thanks to <a href="http://www.squidfingers.com/"> Squidfingers</a> for the background pattern.</h2>
<p>This template has been released under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> which basically means you are free to modify them in any way to suit your needs but you must include the link 'Design by www.mitchinson.net' in the footer of the template.</p>
<h2>For <a href="http://www.mitchinson.net" title="Snapp Happy">more FREE CSS templates</a> visit my website.</h2></blockquote>
</div>
<div class="clear"> </div>
<div id="sidebar-a">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget mi. Suspendisse eget neque ac tortor vehicula accumsan. Sed gravida egestas nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget mi. Suspendisse eget neque ac tortor vehicula accumsan. Sed gravida egestas nisi.</p>
<form action="" method="post">
<fieldset>
<legend>Search</legend>
<div>
<span><label for="txtsearch"> <img src="71_verde-images/search.gif" alt="search" /> : Looking for something?</label></span>
<span><input type="text" value="demo only" name="txtsearch" title="Text input: search" id="txtsearch" size="25" /></span>
</div>
</fieldset>
</form>
</div>
<div id="content">
<h3>Introduction</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget mi. Suspendisse eget neque ac tortor vehicula accumsan. Sed gravida egestas nisi. In sit amet nisi vitae arcu volutpat pretium. In eu leo. Aliquam vulputate ligula eu mi. Pellentesque luctus, mi sed fringilla interdum, risus nunc sodales nulla, a tincidunt dolor nisl tincidunt velit. Donec odio. Etiam rutrum ligula. Quisque accumsan sagittis diam. In hac habitasse platea dictumst. Phasellus malesuada mattis ante. Sed sapien tellus, placerat non, egestas et, suscipit id, lorem. Etiam at mauris. Fusce accumsan egestas mauris.</p>
<p>Fusce porttitor lorem nec nunc. Vestibulum blandit nibh ut lectus tristique congue. Quisque pharetra dui at libero. Duis et metus et nisl placerat semper. Nulla facilisi. Nam sit amet mauris. Maecenas nec leo. Sed interdum tempus felis. Cras sed leo ac nisi cursus iaculis. Suspendisse a lorem sit amet tortor dictum ullamcorper.</p>
</div>
<div id="footer"><a href="#">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a><br/>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></div>
</div>
</body>
</html>
Related examples in the same category