Anchor hover with image background
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rambling Soul </title>
<style type='text/css'>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(23_rambling_soul_5-images/bgclr.png);
background-color: #C4D9B3;
}
#wrap {
background-image: url(23_rambling_soul_5-images/contentbg.png);
background-repeat: repeat-y;
width: 720px;
margin-top: 15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#wrap #contents #maincontent h2 {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: #999900;
}
#wrap #contents #maincontent small {
font-size: 10px;
}
#wrap #contents #maincontent ol {
list-style-type: decimal;
}
#wrap #contents #maincontent ol li {
list-style-type: decimal;
}
#wrap #contents #maincontent ul li {
list-style-type: none;
display: block;
padding: 5px;
margin-right: 15px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #9BBE7C;
}
#wrap #contents .clear {
clear: both;
}
#wrap #contents #maincontent img {
float: left;
margin: 5px;
padding: 3px;
}
#wrap #contents #maincontent h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #B7A771;
}
#wrap #contents #maincontent .postdetails {
padding: 5px;
height: 15px;
background-color: #EDEDCC;
border: 1px solid #C3C492;
}
#wrap #contents #maincontent a {
color: #996600;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #996600;
}
#wrap #contents #sidebar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#wrap #contents #sidebar ul li ul {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
#wrap #contents #sidebar h2 {
font-size: 14px;
padding: 3px;
background-color: #E8F5DC;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #C3C492;
font-weight: bold;
text-transform: uppercase;
color: #996600;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
#wrap #contents #sidebar li ul li a {
display: block;
padding: 3px;
text-decoration: none;
color: #996600;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #996600;
}
#wrap #header {
background-image: url(23_rambling_soul_5-images/header.png);
background-repeat: no-repeat;
margin: 0px;
height: 135px;
}
#wrap #header .logo {
display: block;
margin: 0px;
padding-top: 45px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 28px;
font-weight: normal;
color: #9BBE7C;
}
#wrap #header .description {
padding: 0px;
margin-top: 0px;
margin-right: 25px;
margin-bottom: 0px;
margin-left: 25px;
}
#wrap #topmenu {
background-image: url(23_rambling_soul_5-images/menu.png);
background-repeat: no-repeat;
height: 30px;
padding-top: 10px;
padding-bottom: 8px;
padding-right: 25px;
padding-left: 25px;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#wrap #contents #sidebar {
width: 200px;
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 22px;
padding-bottom: 0px;
padding-left: 0px;
}
#wrap #contents #sidebar ul li ul li {
margin: 0px;
padding: 0px;
}
#wrap #contents #maincontent {
margin-top: 0px;
margin-right: 245px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
}
#wrap #contents #maincontent h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #006600;
}
#wrap #contents #maincontent p {
line-height: 18px;
}
#wrap #footer {
background-image: url(23_rambling_soul_5-images/footerbg.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 75px;
}
#wrap #footer p {
display: block;
margin: 15px;
padding-top: 0px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#wrap #footer a {
color: #996600;
}
#wrap #topmenu a {
text-decoration: none;
display: block;
float: left;
margin-right: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 3px;
color: #000000;
border: 1px dashed #D6BD32;
}
#wrap #topmenu a:visited,active {
text-decoration: none;
display: block;
float: left;
margin-right: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 3px;
color: #000000;
border: 1px dashed #D6BD32;
}
#wrap #topmenu a:hover {
text-decoration: none;
display: block;
float: left;
margin-right: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 3px;
color: #000000;
border: 1px dashed #000000;
background-image: url(23_rambling_soul_5-images/menubg.png);
background-repeat: repeat-x;
}
#wrap #topmenu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#wrap #topmenu li {
display: inline;
}
#wrap #topmenu .active a {
text-decoration: none;
display: block;
float: left;
margin-right: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 3px;
color: #000000;
border: 1px dashed #999999;
background-image: url(23_rambling_soul_5-images/menubg.png);
background-repeat: repeat-x;
}
#wrap #contents {
margin-top: 5px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 0px;
background-image: url(23_rambling_soul_5-images/pagebg.png);
background-repeat: repeat-y;
padding: 0px;
}
#wrap #contents #maincontent blockquote p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
}
#wrap #contents #maincontent blockquote {
margin: 15px;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #CDE9B4;
padding-left: 15px;
}
#wrap #contents #contenthead {
background-image: url(23_rambling_soul_5-images/contenthead.png);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 18px;
}
#wrap #contents #contentfooter {
background-image: url(23_rambling_soul_5-images/contentfooter.png);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 28px;
}
#wrap #topmenu .active a:visited,active {
text-decoration: none;
display: block;
float: left;
margin-right: 5px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin-top: 3px;
color: #000000;
border: 1px dashed #999999;
background-image: url(23_rambling_soul_5-images/menubg.png);
background-repeat: repeat-x;
}
#wrap #contents #maincontent a:visited,active {
color: #9BBE7C;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #9BBE7C;
}
#wrap #contents #maincontent a:hover {
color: #000000;
text-decoration: none;
border-bottom-style: none;
border-top-style: none;
border-right-style: none;
border-left-style: none;
}
#wrap #footer a:visited,active {
color: #996600;
}
#wrap #footer a:hover {
color: #000000;
text-decoration: none;
}
#wrap #contents #sidebar li ul li a:visited,active {
display: block;
padding: 3px;
text-decoration: none;
color: #996600;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #996600;
}
#wrap #contents #sidebar li ul li a:hover {
display: block;
padding: 3px;
text-decoration: underline;
color: #000000;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #996600;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1 class="logo">Sample Logo </h1>
<span class="description">Just another ramblingsoul template</span>
<br />
</div>
<div id="topmenu">
<ul>
<li class="active"><a href="#">Home</a> </li>
<li><a href="#">About</a></li>
<li> <a href="#">Free Templates</a></li>
<li> <a href="#">My Blog</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</div>
<div id="contents">
<div id="contenthead">
</div>
<div id="sidebar">
<ul>
<li><h2>Recent Posts</h2></li>
<li>
<ul>
<li><a href="#">Another Free Template</a></li>
<li><a href="#">Another Heading</a></li>
<li><a href="#">The Header looks like</a></li>
<li><a href="#">This is a list</a></li>
</ul>
</li>
<li><h2>Categories</h2></li>
<li>
<ul>
<li><a href="#">Another Free Template</a></li>
<li><a href="#">Another Heading</a></li>
<li><a href="#">The Header looks like</a></li>
<li><a href="#">This is a list</a></li>
</ul>
</li>
<li><h2>Pages</h2></li>
<li>
<ul>
<li><a href="#">Another Free Template</a></li>
<li><a href="#">Another Heading</a></li>
<li><a href="#">The Header looks like</a></li>
<li><a href="#">This is a list</a></li>
</ul>
</li>
<li><h2>Links</h2></li>
<li>
<ul>
<li><a href="#">Another Free Template</a></li>
<li><a href="#">Another Heading</a></li>
<li><a href="#">The Header looks like</a></li>
<li><a href="#">This is a list</a></li>
</ul>
</li>
<li><h2>Blogroll</h2></li>
<li>
<ul>
<li><a href="#">Another Free Template</a></li>
<li><a href="#">Another Heading</a></li>
<li><a href="#">The Header looks like</a></li>
<li><a href="#">This is a list</a></li>
</ul>
</li>
<li><h2>Meta</h2></li>
<li>
<ul>
<li><a href="#">Valid XHTML 1.0 </a></li>
<li><a href="#">OpenDesigns</a></li>
<li><a href="#">Rambling Soul </a></li>
</ul>
</li>
</ul>
</div>
<div id="maincontent">
<h1>Another free template</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sit amet nibh. In euismod orci ut lorem. Fusce cursus. Nunc ac sapien ac velit gravida ultrices.</p>
<blockquote><p> Aliquam eros leo, aliquam vitae, lobortis ut, molestie sed, dui. Integer mollis nisl mollis dui. Praesent ullamcorper, sem vitae commodo iaculis, velit ante suscipit dolor, et congue sapien tellus a nibh. Praesent suscipit, ante et posuere varius, lorem pede feugiat sem, eu semper nibh ipsum id felis.</p></blockquote>
<p> Curabitur ipsum felis, rhoncus id, rhoncus sed, condimentum in, arcu. Duis dapibus porta odio. Phasellus vitae sem nec arcu pulvinar ultrices. Nulla eu dui. Praesent rutrum est vitae justo. Fusce lorem sapien, adipiscing eget, luctus sit amet, bibendum quis, urna... <a href="#">read more</a> </p>
<h1>Another Heading</h1>
<img title="Sample Image" src="23_rambling_soul_5-images/photo.png" alt="Sample Photo" />
<p>Ut sed velit ac dolor auctor blandit. Praesent auctor sagittis mauris. Sed convallis nisi eu arcu. Phasellus non odio non eros facilisis viverra. Proin orci. Donec feugiat, magna malesuada rhoncus pretium, felis sem convallis elit, et gravida sem risus ac purus. Curabitur ultricies magna ut tellus. Proin viverra, nibh mattis suscipit vestibulum, nisi ante sagittis libero, eget elementum eros nibh aliquam massa. Sed blandit sapien nec nisi. Nulla ac felis sed lectus dapibus eleifend. Maecenas et metus vel tortor malesuada tincidunt. Curabitur ultricies magna ut tellus. Proin viverra, nibh mattis suscipit vestibulum, nisi ante sagittis libero, eget elementum eros nibh aliquam massa. Sed blandit sapien nec nisi. Nulla ac felis sed lectus dapibus eleifend. Maecenas et metus vel tortor malesuada tincidunt. </p>
<p> Curabitur ultricies magna ut tellus. Proin viverra, nibh mattis suscipit vestibulum, nisi ante sagittis libero, eget elementum eros nibh aliquam massa. Sed blandit sapien nec nisi. Nulla ac felis sed lectus dapibus eleifend. Maecenas et metus vel tortor malesuada tincidunt. </p>
<h1>Here is a list</h1>
<p>Donec quis pede ut diam iaculis nonummy. </p>
<ul>
<li>Quisque tincidunt posuere sem. </li>
<li>Maecenas ipsum. Nullam ut libero a dolor accumsan nonummy. Aliquam auctor sapien a est. </li>
<li>Suspendisse lobortis tortor a ante porttitor venenatis.</li>
<li> Praesent erat magna, rhoncus a, nonummy id, ullamcorper nec, tellus. </li>
</ul>
<h2>This is Heading 2 </h2>
<small>And this is an ordered list</small>
<ol>
<li>Donec tristique eros ut nibh. </li>
<li>Duis vestibulum enim a felis.</li>
<li> Cras egestas vestibulum neque. Aenean ornare tempus urna. Maecenas nisl velit, iaculis a, malesuada vel,</li>
<li> eleifend ac, quam. Curabitur nonummy blandit eros. Vivamus nec velit non lacus fermentum sodales.</li>
<li> Vivamus elit. Nam mattis. Vivamus varius vulputate ante. Vivamus et turpis. Integer venenatis varius neque. </li>
<li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</li>
<li> Ut tristique. </li>
</ol>
<h3>This is heading 3</h3>
<p>Praesent at arcu ac dui rhoncus luctus. Morbi elit arcu, volutpat sed, egestas in, volutpat sit amet, pede. Nulla bibendum magna vel nibh. Quisque quis ipsum. Quisque quis turpis vel metus interdum lobortis. Morbi interdum pellentesque nibh. Proin tincidunt, lectus euismod consectetuer suscipit, libero nunc egestas purus, vitae pellentesque elit metus sed arcu. In ligula nulla, sodales quis, lacinia eget, consequat eu, nisl. Phasellus tellus erat, eleifend vitae, feugiat eu, tristique vel, dui. In sit amet diam in dui varius ornare. Quisque eu elit. </p>
<div class="postdetails">
<a href="#">Posted on 3rd May 2007</a> | <a href="#">News</a> | <a href="#">No Comments</a></div>
</div>
<div class="clear"></div>
<div id="contentfooter">
</div>
</div>
<div id="footer">
<p>Copyright Information | Put some Quick Links | And something else<br />
Designed by : <a href="http://www.ramblingsoul.com">Rambling Soul</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category