Single column with Top image section
<!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">
<!-- This template can be downloaded from www.openwebdesign.org. Just search for neuphoric -->
<!-- This template has been modified by mejobloggs (http://www.openwebdesign.org/userinfo.phtml?user=mejobloggs) -->
<!-- Please use this template according to the license on the original template (included as pleaseread.txt) -->
<!-- The original of this template was designed by http://www.tristarwebdesign.co.uk - please visit for more templates & information - thank you. -->
<head>
<title>enter page title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0 0 1em 0;
padding: 0;
color: black;
background-color: #eee;
line-height: 130%;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
text-align: center;
}
#wrapper-header {
background: #222;
}
#header {
background: #222 url('tristar-02-images/banner03.jpg') right no-repeat;
width: 85%;
height: 125px;
line-height: 125px;
margin: 0 auto;
border-left: 1px solid #707070;
border-right: 1px solid #707070;
text-align: left;
}
#header h1 {
margin: 0;
padding: 0;
color: #eee;
font-size: 220%;
padding-left: 10px;
letter-spacing: -0.1em;
}
#wrapper-menu {
background: #88ac0b url('tristar-02-images/menu-background.png') top left repeat-x;
float: left;
width: 100%;
}
#menu {
width: 85%;
margin: 0 auto;
font-size: 95%;
white-space: nowrap; /* stops half a menu link dropping to next line. Instead, the whole link will drop. This only happens if you have a lot of menu links, and large text size */
padding-right: 2px; /* The menu far left, and far right borders are not quite lining up in non IE browsers for some reason. This makes it less noticable */
}
* html #menu { padding-right: 0; } /* See above comment. This re-adjusts IE to the above padding */
#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
border-left: 1px solid #95bc0e;
border-right: 1px solid #95bf0f;
width: 100%;
}
#menu li {
display: inline;
}
#menu a:link, #menu a:visited {
padding: 0.2em 1em;
background: transparent;
color: #FFF;
text-decoration: none;
float: left;
border-right: 1px solid #95bc0e;
}
#menu ul li a:hover
{
background: #b6e41c url('tristar-02-images/menu-hover.png') repeat-x;
color: #485B06;
}
#content {
width: 83%; /* 93% because it has 1% padding on each side, which brings it to 95% wide */
margin: 0 auto;
padding: 3.5em 1% 20px 1%;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
background: white;
font-size: 90%;
text-align: left;
}
* html #content { padding-top: 1.8em; } /* Set padding top in IE to 20px */
#footer {
margin: 0 auto;
padding: 2px 1%;
width: 83%;
text-align: right;
color: white;
letter-spacing: 0.15em;
background: #8fb40c url('tristar-02-images/menu-background.png') top left repeat-x;
border: 1px solid #a0c80e;
font-size: 80%;
}
h2 {
color: #666;
padding-bottom: 3px;
border-bottom: 1px solid #a0c80e;
font-size: 150%;
letter-spacing: -0.1em;
}
a:link, a:visited {
color: #260;
text-decoration: none;
}
a:hover
{
color: #000;
text-decoration: underline;
}
p { margin-left: 1em; }
</style>
</head>
<body id="altbody">
<div id="wrapper-header">
<div id="header">
<h1>website.name.here.</h1>
</div>
</div>
<div id="wrapper-menu">
<div id="menu">
<ul>
<li><a title="default design" href="index.html">default</a></li>
<li><a title="alternate design for better usability" href="index2.html">alternative</a></li>
<li><a title="a wider version of the design" href="index3.html">wider</a></li>
<li><a title="style four" href="#">link four</a></li>
<li><a title="style five" href="#">link five</a></li>
</ul>
</div>
</div>
<div id="content">
<strong>This template is a modified version of <a href="http://www.oswd.org/user/profile/id/8809" title="Go to tristar’s OSWD user page">tristar’s</a> <a href="http://www.oswd.org/design/preview/id/2755" title="Go to the original template">original</a></strong>
<h2>changes.</h2>
<ul>
<li>Page hyperlinks are a bit easier to notice</li>
<li>Made the green menu slightly darker so that the white links are easier to see</li>
<li>Fluid design</li>
<li>Code redone (not that I am saying mine is better, I just like coding my own way.)</li>
<li>Gradients resize with font</li>
<li>More user friendly</li>
<li>Different banner to accomodate for the fluid layout (original wasn't wide enough)</li>
</ul>
<p>To view the source of this banner, see picture <a href="http://www.sxc.hu/browse.phtml?f=view&id=485493">485493</a> at <a href="http://www.sxc.hu">sxc.hu</a></p>
<p>If anyone can give me links etc on how to improve accesability, I would be very happy to read them. Please use the
email option on my <a href="http://www.openwebdesign.org/userinfo.phtml?user=mejobloggs" title="contact me through my OWD user page">OWD user page.</a></p>
<h2>design.notes</h2>
<ul>
<li>800x600 and up (Can stretch to 2000px wide without the banner running out)</li>
<li>valid xhtml/css</li>
<li>looks great! (not open to subjective dispute)</li>
<li>Tested and ok in IE5.5, IE6, Firefox 1.51, Opera 8.53 (although IE5.5 has a small bug, but it still looks fine)</li>
</ul>
<p>I have heard a few people complaining about the lack of fluid designs. With the increase
of larger screens and higher resolutions, some people are getting sick of looking at a small thing
in the middle of the screen</p>
<p>A problem with fluid designs is that once the content stretches wide, the line lengths become
rather long, and are harder to read. Hopefully because the content on this is 75% wide, the line lengths
do not become too wide.</p>
<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><strong>please note:</strong> 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>
<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">
original 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