Right menu bar with image background : Menu « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Menu

Right menu bar 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>Another Rambling Soul Template</title>
<style type='text/css'>
body {
  background-image: url(22_rambling_soul_9-images/bg.png);
  background-repeat: repeat;
  background-color: #6B0808;
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  background-attachment: fixed;
}
#wrap {
  background-image: url(22_rambling_soul_9-images/pagebg.png);
  background-repeat: repeat-y;
  width: 782px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding: 0px;
}
#wrap #header {
  background-image: url(22_rambling_soul_9-images/header.png);
  background-repeat: no-repeat;
  height: 209px;
}
#wrap #header h1 {
  margin: 0px;
  display: block;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 28px;
  font-weight: normal;
  color: #F3E3C8;
  width: 450px;
  padding-top: 50px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 30px;
}
#wrap #header .desc {
  display: block;
  font-size: 12px;
  font-style: italic;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}
#wrap #header #topnav {
  display: block;
  margin-left: 525px;
  margin-right: 35px;
  margin-top: 15px;
}
#wrap #header #topnav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
#wrap #header #topnav li {
  height: 20px;
  display: block;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
  padding-top: 5px;
  padding-right: 10px;
  padding-left: 10px;
  list-style-type: none;
  margin-right: auto;
  margin-left: auto;
  text-transform: uppercase;
}
#wrap #contents #left .postheading {
  display: block;
  margin: 0px;
  padding: 0px;
}
#wrap #contents #left .postheading h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  font-size: 25px;
  padding-top: 15px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  color: #B7412C;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 91px;
  display: block;
}
#wrap #contents #left .postheading .headspacer {
  clear: left;
  margin: 0px;
  padding: 0px;
  font-size: 1px;
}
#wrap #contents #left .postheading .postinfo {
  font-size: 10px;
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 91px;
  display: block;
  padding: 0px;
}
#wrap #contents #left .postheading .cal .date {
  display: block;
  font-size: 31px;
  padding-top: 15px;
  text-align: center;
  padding-right: 4px;
  padding-left: 4px;
  color: #0099CC;
  margin: 0px;
  line-height: 32px;
}
#wrap #contents #left ul {
  list-style-type: none;
  margin: 15px;
}
#wrap #contents #left li {
  margin-bottom: 5px;
  padding: 2px;
  display: block;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #CC6600;
}
#wrap #contents #sidebar ul {
  margin: 0px;
  list-style-type: none;
  display: block;
  background-image: url(22_rambling_soul_9-images/sidemenuhvr.png);
  background-position: bottom;
  background-repeat: no-repeat;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 15px;
  padding-left: 0px;
}
#wrap #contents #sidebar li {
  height: 22px;
  display: block;
}
#wrap #contents #sidebar a {
  color: #993300;
  text-decoration: none;
  display: block;
  height: 18px;
  padding-top: 4px;
  padding-left: 5px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FBF5EB;
}
#wrap #contents #sidebar h2 {
  font-size: 16px;
  padding: 5px;
  display: block;
  background-image: url(22_rambling_soul_9-images/sidemenuhvr.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  text-transform: uppercase;
  color: #993300;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 0px;
}
#wrap #contents .clear {
  clear: both;
}




#wrap #contents #left .postheading .cal .month {
  font-size: 9px;
  display: block;
  padding-top: 11px;
  padding-left: 4px;
  padding-right: 10px;
  color: #BB412D;
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
#wrap #contents #left .postheading h1 a {
  color: #B7412C;
  text-decoration: none;
}
#wrap #contents #left .postheading .cal {
  background-image: url(22_rambling_soul_9-images/datecal.png);
  background-repeat: no-repeat;
  height: 71px;
  width: 69px;
  display: block;
  float: left;
  padding: 10px;
}

#wrap #contents {
  margin-top: 10px;
  margin-bottom: 0px;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 5px;
}
#wrap #header #topnav a {
  color: #CC6600;
  text-decoration: none;
  font-weight: bold;
}
#wrap #contents #sidebar {
  width: 211px;
  float: right;
  padding-right: 25px;
  padding-left: 25px;
}#wrap #contents #left {
  margin-top: 0px;
  margin-right: 270px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-left: 15px;
}
#wrap #contents #left p {
  line-height: 20px;
}
#wrap #header #topnav a:visited,active {
  color: #CC6600;
  text-decoration: none;
  font-weight: bold;
}
#wrap #header #topnav a:hover {

  color: #F3E3C8;
  text-decoration: none;
  font-weight: bold;
}
#wrap #contents #left .postheading h1 a:visited,active {

  color: #B7412C;
  text-decoration: none;
}
#wrap #contents #left .postheading h1 a:hover {
  color: #000000;
  text-decoration: none;
  background-color: #F8F0E2;
}
#wrap #contents #left .postbottom {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 15px;
  margin-left: 0px;
  background-image: url(22_rambling_soul_9-images/postinfobg.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  height: 45px;
  padding-top: 25px;
  text-align: center;
}
#wrap #contents #left h2 {
  font-size: 18px;
  color: #996633;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
}
#wrap #contents #left blockquote {
  background-color: #F7EEDD;
  padding-left: 15px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 15px;
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: #FF9966;
  font-style: italic;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding-top: 1px;
  padding-bottom: 1px;
}
#wrap #contents #left blockquote  p {
  line-height: 20px;
  margin: 0px;
}

#wrap #contents #left a {
  color: #B7412C;
  text-decoration: underline;
}
#wrap #contents #left a:visited,active {
  color: #B7412C;
  text-decoration: underline;
}
#wrap #contents #left a:hover {
  color: #000000;
  text-decoration: none;
  background-color: #FAF2E6;
}
#wrap #contents #sidebar a:visited,active {

  color: #993300;
  text-decoration: none;
  display: block;
  height: 18px;
  padding-top: 4px;
  padding-left: 5px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FBF5EB;
}
#wrap #contents #sidebar a:hover {

  color: #000000;
  text-decoration: underline;
  display: block;
  height: 18px;
  padding-top: 4px;
  padding-left: 5px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FBF5EB;
}
#footer span {
  margin-left:35px;
}
#footer {
  background-image: url(22_rambling_soul_9-images/footerbg.png);
  height: 40px;
  padding-top: 30px;
  background-position: 0px 0px;
  float: none;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  color: #F3E3C8;
  font-size: 10px;
  width: 782px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
}


#footer a {
  color: #FFFFFF;
}
#footer a:visited,active {
  color: #FFFFFF;
}
#footer a:hover {
  color: #FFFFFF;
  text-decoration: none;
}
#wrap #header h1 a {
  color: #F3E3C8;
  text-decoration: none;
}
#wrap #header h1 a:visited,active {
  color: #F3E3C8;
  text-decoration: none;
}
#wrap #header h1 a:hover {

  color: #FFFFFF;
  text-decoration: none;
}
</style>


</head>

<body>

<div id="wrap">
<div id="header">
<h1><a href="#">YourSiteName.com </a><span class="desc">Another Free Blog Template</span></h1>
<div id="topnav"> 
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

</div>

</div>
<div id="contents">
<div id="sidebar">
<h2>Categories</h2>
  <ul>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Pellentesque</a></li>
    <li><a href="#">Fusce Ut Sem</a></li>
    <li><a href="#">Fermentum Eget</a></li>
    <li><a href="#">Tristique</a>  </li>
  </ul>
  <h2>Recent Posts </h2>
  <ul>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Pellentesque</a></li>
    <li><a href="#">Fusce Ut Sem</a></li>
    <li><a href="#">Fermentum Eget</a></li>
    <li><a href="#">Tristique</a>  </li>
  </ul>
  <h2>Recent Comments </h2>
  <ul>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Pellentesque</a></li>
    <li><a href="#">Fusce Ut Sem</a></li>
    <li><a href="#">Fermentum Eget</a></li>
    <li><a href="#">Tristique</a>  </li>
  </ul>
  <h2>Links</h2>
  <ul>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Pellentesque</a></li>
    <li><a href="#">Fusce Ut Sem</a></li>
    <li><a href="#">Fermentum Eget</a></li>
    <li><a href="#">Tristique</a>  </li>
  </ul>
  <h2>Blogroll</h2>
  <ul>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Pellentesque</a></li>
    <li><a href="#">Fusce Ut Sem</a></li>
    <li><a href="#">Fermentum Eget</a></li>
    <li><a href="#">Tristique</a>  </li>
  </ul>
  <h2>Meta</h2>
  <ul>
    <li><a href="http://www.ramblingsoul.com">Rambling Soul </a></li>
    <li><a href="#">Valid XHTML 1.0 </a></li>
    <li><a href="#">WAI</a></li>
    <li><a href="http://www.opendesigns.org">Open Designs </a></li>
  </ul>
  <p>&nbsp;</p>
  </div>

<div id="left">
<div class="postheading">
<span class="cal">
<span class="date">
21
</span>

<span class="month">
November
</span>
</span>
<h1>This is Heading One</h1>
<span class="postinfo">by :AuthorName | News</span>
<div class="headspacer"></div>
</div>
  <p> Sed vestibulum sapien a massa. Pellentesque sed ligula. Fusce ut sem  accumsan urna pretium faucibus. Quisque commodo venenatis sem. Maecenas  pellentesque. Maecenas ipsum lorem, malesuada a, vehicula vel, porta  sit amet, nisi. Nam lorem nulla, mollis sit amet, fermentum eget,  eleifend et, urna. Maecenas massa diam, laoreet at, euismod quis,  tristique eu, dui. Praesent eu sem sed arcu blandit sollicitudin.  Curabitur eu libero. In ligula. Vestibulum est ipsum, malesuada nec,  auctor nec, pharetra a, arcu. Ut erat magna, euismod a, rutrum sed,  porttitor a, dolor. Suspendisse ultrices nonummy metus. Donec ante  nisl, hendrerit pharetra, accumsan ut, dictum pharetra, quam. Etiam  pharetra tristique dolor. Cum sociis natoque penatibus et magnis dis  parturient montes, nascetur ridiculus mus. Suspendisse quam metus,  rutrum vitae, consequat sed, sollicitudin eget, sapien. Nunc tristique  vestibulum massa. <a href="#">Read More</a> </p>

<div class="postbottom">Posted under <a href="#">News</a> | <a href="#">12 Comments</a> |<a href="#"> Add Comment </a></div>

<div class="postheading">
<span class="cal">
<span class="date">
5
</span>

<span class="month">
June
</span>
</span>
<h1><a href="#">This is Heading One with link and long text. Vestibulum ultrices est non libero.</a> </h1>
<span class="postinfo">by :AuthorName | News</span>
<div class="headspacer"></div>
</div>

  <p>Vestibulum ultrices est non libero. Lorem ipsum dolor sit amet,  consectetuer adipiscing elit. Aenean leo est, fringilla commodo,  aliquet id, imperdiet sit amet, diam. Ut nonummy, pede ut lobortis  suscipit, nisi justo volutpat purus, et suscipit tellus ipsum sed  mauris. Nullam volutpat, tortor a interdum aliquet, metus urna  tincidunt massa, consequat pretium tortor arcu a urna. Donec eget est.  Cras tortor magna, aliquam ut, tempor et, interdum non, nunc. Sed at  dolor. Maecenas non lacus. Donec egestas venenatis ipsum. Aenean justo  eros, auctor eu, dignissim id, fermentum sed, justo. Nulla facilisi.  Curabitur id orci rutrum tellus aliquam ornare. Maecenas eu neque. </p>
<h2>Heading 2 : Blockquote and a list</h2>
  <p>Nam tempor faucibus mi. Curabitur vehicula, magna at porttitor  feugiat, mauris turpis sollicitudin nulla, vel porta libero nibh id  nunc. Vestibulum condimentum. </p>
  <blockquote><p>Aliquam luctus purus sit amet pede.  Suspendisse tristique neque a libero. Duis consectetuer rhoncus pede.  Aenean vehicula lacus in sapien. Morbi suscipit, augue at vestibulum  mollis, libero quam iaculis pede, eu varius turpis libero vitae nisi.  Nulla fringilla mauris vitae dolor.</p></blockquote>
  <p> In sit amet erat id orci tincidunt  dignissim. Nam egestas erat vitae purus. Sed tellus. Proin mauris. Nunc  faucibus, velit vel fringilla ullamcorper, orci dolor auctor lorem, non  posuere diam nibh in massa. Quisque mi odio, mollis nec, accumsan a,  interdum non, justo. </p>
  <ul>
    <li>Cras a felis. Duis erat felis, </li>
    <li>fringilla eget,  ultrices eget, rutrum aliquam, odio. </li>
    <li>Curabitur eget nibh. </li>
    <li>Proin  lobortis aliquet pede. </li>
    <li>Nam nec ligula interdum elit dignissim dignissim</li>
  </ul>
  <div class="postbottom">Posted under <a href="#">News</a> | <a href="#">12 Comments</a> |<a href="#"> Add Comment </a></div>
  </div>
<div class="clear"></div>


</div>

</div>
<div id="footer"><span>Your copyright information | <a href="#">Put </a>| <a href="#">Some</a> | <a href="#">Links</a></span><br />
<span>Design by <a href="http://www.ramblingsoul.com">Rambling Soul </a>| Patterns by <a href="http://www.peschetz.at/">peschetz</a></span>
</div>
</body>
</html>








Related examples in the same category

1.Use show or hide UL with link
2.Horizontal menu
3.CSS only menu with mouse over
4.Left bar menu
5.Menu bar with highlight
6.Menu with highlight
7.fixed width floated menu
8.Mouse hover left bar
9.Left navigation bar
10.Use UL and LI to wrap link menu
11.Tab Menu
12.Left bar menu list
13.Top tab menu bar
14.Navigation menu on the top
15.Wide and tall menu
16.Shading menu bar
17.Top menu bar with arrow icon
18.3D top bar background
19.Left menu bar aligned to the bottom
20.Indented vertical menu
21.Single column layout with top menu bar
22.Two-level left menu bar
23.Right section bar with shading menu
24.Right menu bar with section
25.Top menu bar
26.Using top arrow to indicate top menu selection
27.Wide and tall top menu bar
28.List menu bar with background image
29.Two level menu bar
30.Top menu with arrow indication
31.Two column, two leve top menu bar
32.List menu with image
33.Menu List item
34.List menu bar
35.Top menu list bar with bold bottom
36.Side menu bar
37.Scrollable section in side menu bar
38.Selected menu item indication
39.Card layout with top menu bar
40.Side menu bar with lot of space in between
41.HTML skeleton code for creating a two-level horizontal drop menu
42.using jQuery to toggle a hidden menu
43.Vertical menu
44.Horizontal menu bar
45.Vertical menu bar
46.sliding door menu
47.horizontal list menu
48.Sub navigation menu
49.Pure css menu
50.Two column layout with menu on the left
51.Navigation menu horizontal
52.Pure CSS drop-down menu
53.Menu item with border
54.Vertical menu on the left
55.LI menu
56.Mouse hover effect for left menu
57.Post item layout with menu
58.Left menu bar with mouse hover effect
59.a:hover background: transparent url(img/menu_arrow.gif) bottom center no-repeat;
60.Menu item with border 2
61.Link menu
62.Left menu bar with thicker border
63.Change border and background with mouse hover for left menu bar
64.Nested left menu bar
65.Vertical menu bar 2
66.Fixed left menu bar
67.Dark background for menu bar
68.Link menu item with side bar
69.Tag like top menu bar
70.Two line top menu bar
71.Menu item separated with border
72.Using arrow image to indicate current menu selection
73.Two level top menu bar
74.Tab menu bar with mouse hover effect
75.Menu bar with background image
76.Two level side menu bar
77.Left bar with news item
78.Continue read link