Single column layout with top menu bar
<!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" lang="en">
<!-- this template was designed by http://www.tristarwebdesign.co.uk - please visit for more templates & information - thank you. -->
<head>
<meta http-equiv="Content-Language" content="en-gb" />
<title>enter page title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type='text/css'>
body
{
margin: 0;
padding: 0;
margin-bottom: 15px;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
font-size: 80%;
color: #000;
background-color: #EEEEEE;
line-height: 180%;
}
a
{
color: #4B6400;
text-decoration: none;
}
a:hover
{
color: #000000;
text-decoration: none;
}
#headercontainer
{
width: 100%;
background: #242424;
}
#header
{
margin: 0 auto;
width: 760px;
height: 125px;
border: 1px solid #6F6F6F;
border-top: 0px;
border-bottom: 0px;
background: #242424 url('tri-star-images/header-background.jpg');
}
#header h1
{
margin: 0;
color: #EEEEEE;
font-family: helvetica, arial, verdana, tahoma, sans-serif;
font-size: 275%;
padding-left: 10px;
letter-spacing: -3px;
padding-top: 50px;
}
#menucontainer
{
width: 100%;
height: 28px;
background: #A0C80E;
background-image:url('tri-star-images/menu-background.jpg');
background-repeat:repeat-x;
}
#menu
{
margin: 0 auto;
width: 760px;
background: #A0C80E;
border-right: 1px solid #95BC0E;
}
#content
{
margin: 0 auto;
width: 740px;
padding: 20px 10px;
border: 1px solid #B5B5B5;
border-top: 0px;
border-bottom: 0px;
background: #FFF;
}
#content h2
{
color: #666;
padding-bottom: 3px;
border-bottom: 1px solid #A0C80E;
font-family: helvetica, arial, verdana, tahoma, sans-serif;
font-size: 200%;
letter-spacing: -1px;
}
#footer
{
margin: 0 auto;
width: 740px;
text-align: right;
color: #FFFFFF;
letter-spacing: 2px;
background: #A0C80E url('tri-star-images/menu-background.jpg') repeat-x;
border: 1px solid #A0C80E;
font-family: helvetica, arial, verdana, tahoma, sans-serif;
padding: 3px 10px;
}
#navcontainer ul
{
padding: 0;
margin: 0;
background-image:url('tri-star-images/menu-background.jpg');
background-repeat:repeat-x;
color:#FFFFFF;
float:left;
width:100%;
border-left: 1px solid #95BC0E;
letter-spacing: 1px;
}
#navcontainer ul li
{
display: inline;
}
#navcontainer ul li a
{
padding: 0.2em 1.5em;
background-image:url('tri-star-images/menu-background.jpg');
background-repeat:repeat-x;
color: #FFF;
text-decoration: none;
float: left;
border-right: 1px solid #95BC0E;
}
#navcontainer ul li a:hover
{
background-image:url('tri-star-images/menu-hover.jpg');
background-repeat:repeat-x;
color: #485B06;
}
</style>
</head>
<body>
<div id="headercontainer">
<div id="header">
<h1>website.name.here.</h1>
</div>
</div>
<div id="menucontainer">
<div id="menu">
<div id="navcontainer">
<ul id="navlist">
<li><a title="link one" href="index.html">link one</a></li>
<li><a title="link two" href="index.html">link two</a></li>
<li><a title="link three" href="index.html">link three</a></li>
<li><a title="link four" href="index.html">link four</a></li>
<li><a title="link five" href="index.html">link five</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<b>no tables have been used to make this template, its all valid css and
valid xhtml.</b>
<h2>header.one.</h2>
<p>this site has been created for personal use only - please do not sell on this
template it has been created by
<a title="derby web design" href="http://www.tristarwebdesign.co.uk">tri-star
web design</a> free of charge.</p>
<p><b>please note:</b> as this is a free template the only thing i ask in return
is you leave the bottom link to
<a title="derby web design" href="http://www.tristarwebdesign.co.uk">tri-star
web design</a> as it is, anything else you can chop and change to your hearts
content. thank you for downloading this template, i hope it comes in handy.</p>
<p>this page is created with frontpage but you can edit it with dreamweaver - <b>it
utilises CSS and is vaild XHTML STRICT 1.0. it has also been tested in microsoft
explorer, mozilla firefox, netscape 8.0 and opera</b> - fingers crossed everything
looks ok! if this is not enough it also works in 800x600 screen resolution,
but is mainly for 1024x768.</p>
<h2>header.two.</h2>
<p>tri-star web design is devoted to helping you/your company maximise its
potential through the internet. are you after web presence at an affordable
price? is your current website not generating the interest you think it
deserves? tri-star web design can design or help in the development of a new
website, giving potential customers a true impression of your business. as i am
a freelance web designer i can focus my full attention on each customer to
giving that personal touch that i believe is so important.</p>
<h2>header.three.</h2>
<p>i work with clients in the derby (derbyshire), nottingham (nottinghamshire),
leicester (leicestershire) and throughout the united kingdom. if you are from
outside the uk please feel free to get in touch for a quote as i am more than
happy to expand my services beyond the uk.for a one-off fee with no hidden
charges, i can design you a website to your exact specifications. just tell me
what you want to say to your customers, send any pictures you would like to show
them, and i will turn this basic information into a sleek professional yet
effective website.</p>
<p>i don't only deal with businesses, maybe your after a website for a hobby? or
a family website? whatever it is you are after i can help you.</p>
</div>
<div id="footer">
web design by <a title="derby web design" href="http://www.tristarwebdesign.co.uk">tri-star web design</a>
| <a href="http://www.ehostinfo.com/">Web Hosting</a>
</div>
</body>
</html>
Related examples in the same category