Anchor with solid background, and hover effect
<!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">
<head>
<title>Contented1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Website description" />
<meta name="keywords" content="keyword1,keyword2,keyword2,keyword4" />
<style type='text/css'>
/***************************************************************************
* *
* contented1 - An open source xhtml/css website template by Contented *
* Designs. You're free to modify it and use it for any purpose without *
* cost or obligation. We'd prefer that you leave the link to our website *
* in the footer but it's not required. *
* *
* If you have comments or questions, please contact us at *
* http://www.ContentedDesigns.com. Thanks! *
* *
***************************************************************************/
* {
padding:0;
margin:0;
}
body {
color: #666666;
background-color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.83em;
margin:20px auto;
width:760px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl,
fieldset, address { margin:1em 0;}
h1 {font-size:1.67em;}
h2 {font-size:1.39em;}
h3 {font-size:1.2em;}
h4 {font-size:1em;}
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
a {
color: #6699FF;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #3366FF;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
#header {
color: #6699FF;
background-color: #FFFFFF;
width:760px;
clear:both;
}
#title {
color:#6699FF;
background-color:#FFFFFF;
font-size:3em;
font-weight:bold;
padding:0px 0px 0px 0px;
float:left;
}
#contact {
padding:0px 0px 0px 0px;
float:right;
}
#contact a {
color:#6699FF;
background-color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
#contact a:hover {
color:#3366FF;
background-color:#FFFFFF;
text-decoration:underline;
}
#slogan {
color:#666666;
background-color:#FFFFFF;
font-size:1.17em;
font-weight:bold;
font-style:normal;
padding:0px 0px 0px 0px;
width:520px;
clear:both;
float:left;
}
#nav {
line-height:2.5em;
padding:14px 0px 4px 0px;
margin:0 0 5px 0;
width:760px;
clear:both;
}
#nav a {
color: #ffffff;
background-color:#6699FF;
font-weight:bold;
text-decoration:none;
padding:4px 35px 4px 35px;
border:1px solid #3366FF;
}
#nav .selected,#nav a:hover {
color:#ffffff;
background-color:#3366FF;
text-decoration:none;
padding:4px 35px 4px 35px;
}
#content {
border-top:1px solid #CCCCCC;
width:760px;
clear:both;
}
#maincontent {
font-size:1.0em;
padding:0px 5px 0px 0px;
width:550px;
border-right:1px solid #CCCCCC;
float:left;
}
#sidecontent {
font-size:0.83em;
padding:5px 0px 0px 0px;
width:195px;
float:right;
}
#footer {
color: #FFFFFF;
background-color:#6699FF;
font-size:80%;
line-height:1.5em;
width: 760px;
clear:both;
}
#footer a {
color: #FFFFFF;
background-color: #6699FF;
text-decoration: none;
}
#footer a:hover {
color: #FFFFFF;
background-color: #6699FF;
font-weight: bold;
text-decoration: underline;
}
#copyrightdesign {
color:#FFFFFF;
background-color:#6699FF;
padding:5px 0px 5px 20px;
width: 580px;
float:left;
}
#footercontact {
color:#FFFFFF;
background-color:#6699FF;
padding:5px 0px 5px 50px;
width:110px;
float:right;
}
</style>
</head>
<body>
<div id="header">
<div id="title">Contented1</div>
<div id="contact"><a href="#">CONTACT US</a></div>
<div id="slogan">Contented: How a content-filled design feels</div>
</div>
<div id="nav">
<a class="selected" href="#">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Services</a>
<a href="#">Resources</a>
</div>
<div id="content">
<div id="maincontent">
<h1>Introduction to Contented1</h1>
<p>
Contented1 is the first open source template from <a
href="http://www.contenteddesigns.com">Contented Designs</a>. Our goal
was to keep the design clean and simple so website visitors could
focus on the content.
</p>
<p>
Contented1 is valid
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
and valid
<a href="http://validator.w3.org/check?uri=referer">XHTML 1.0
strict</a>.
It's been tested for consistent appearance on:
</p>
<ul>
<li>Internet Explorer 6.0.2900.2180</li>
<li>Firefox 1.5.0.1</li>
<li>Opera 8.53</li>
</ul>
<p>
Current version: Contented1 Version 1.0 (April 2, 2006)
</p>
<h1>Using this Design</h1>
<p>
Contented1 is an open source template. You're free to modify it and
use it for any purpose without cost or obligation. We
prefer that you leave the link to our website in the
footer but it's not required.
</p>
<p>
If you have comments or questions, please contact us at <a
href="http://www.contenteddesigns.com">Contented Designs</a>. Thanks!
</p>
</div>
<div id="sidecontent">
<h1>News</h1> Use this sidebar for recent news, press releases,
upcoming events, notes.
<p>
<a href="#">This is a link to a page describing a news item.</a> (2006-04-02)
</p>
<p>
<a href="#">This is a link to a page describing a news item.</a> (2006-04-01)
</p>
<p>
<a href="#">This is a link to a page describing a news item.</a> (2006-03-22)
</p>
<p>
<a href="#">This is a link to a page describing a news item.</a> (2006-03-17)
</p>
</div>
</div>
<div id="footer">
<div id="copyrightdesign">
Copyright © 2006 Your Name |
Design by <a href="http://ContentedDesigns.com">Contented Designs</a> |
<a href="http://www.ehostinfo.com/">Web Hosting</a></div>
<div id="footercontact">
<a href="#">Contact Us</a>
</div>
</div>
</body>
</html>
Related examples in the same category