Anchor hover with image background : Image « CSS Controls « HTML / CSS






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

1.Image wrap text
2.Image floating
3.Image as list icon
4.Using huge image as background
5.Image and text
6.Huge topic image
7.Image gallary inside the sidebar
8.Image on the left
9.Image centered design
10.Fill left and right side of the content with image pattern
11.Single column with Top image section
12.List with image background
13.Flowing text around an image
14.inline images
15.Adding shading and mask to a picture
16.Gallery Grid Demo