Sidebar with link and text : Siderbar « CSS Controls « HTML / CSS






Sidebar with link and text

  
<!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">

<head>

<title>Underground</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />

<style type='text/css'>
/* -----------------------------------------------------

   AUTHOR           :    Erwin Aligam
   WEBSITE          :   http://www.styleshout.com/
   TEMPLATE NAME    :   Underground
   TEMPLATE CODE    :  S-0006
   VERSION          :   1.2
   LAST DATE MOD    :   January 20, 2010

-------------------------------------------------------- */

/* -----------------------------------------------------
   HTML ELEMENTS
-------------------------------------------------------- */

/* top elements */
* { margin: 0;  padding: 0; outline: 0; }

body {
  margin: 0; padding: 0;
  font: 12px/160% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
  color: #555;
  background: #FFF url(Underground-images/bg.gif) repeat-x;  
}

/* links */
a:link, a:visited {
  color: #003366;
  background-color: inherit;
  text-decoration: none;
}
a:hover {
  color: #CC0001; 
  background-color: inherit;
}

/* headers */
h1, h2, h3 {
  font-family: Arial, 'Trebuchet MS', Sans-Serif;
  font-weight: bold;
  color: #333;
}
h1 {
  font-size: 120%;
  letter-spacing: .5px;
}
h2 {
  font-size: 115%;  
  text-transform: uppercase;     
}
h3 {
  font-size: 115%;
  color: #003366;    
}

/* images */
img {
  background: #FAFAFA;
    border: 1px solid #DCDCDC;
  padding: 8px;
}
img.float-right {
  margin: 5px 0px 10px 10px;  
}
img.float-left {
  margin: 5px 10px 10px 0px;
}

h1, h2, h3, p {
  padding: 0;    
  margin: 10px;
}

ul, ol {
  margin: 10px 20px;
  padding: 0 20px;
}

code {
  margin: 10px 0;
  padding: 15px 20px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
  border-left: 4px solid #CC0000;
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
  margin: 10px;
   padding: 10px 10px 15px 32px;
    background: #FAFAFA url(Underground-images/quote.gif) no-repeat 7px 10px !important;
  background-position: 8px 10px;
  border: 1px solid #f2f2f2; 
  border-left: 4px solid #CC0000; 
  font-weight: bold;  
}

/* form elements */
form {
  margin:10px;
    padding: 15px 10px;
  border: 1px solid #f2f2f2; 
  background-color: #FAFAFA; 
}
label {
  display:block;
  font-weight:bold;
  margin:5px 0;
}
input {
  padding: 3px 5px;
  border:1px solid #eee;
  font-size: 1em;
  color:#777;
}
textarea {
  width:400px;
  padding: 3px 5px;
  font-size: 1em;
  border:1px solid #eee;
  height:100px;
  display:block;
  color:#777;
}
input.button { 
  margin: 0; 
  font: bolder 12px Arial, Sans-serif; 
  border: 1px solid #CCC; 
  padding: 5px 3px;
  background: #FFF;
  color: #CC0000;
}
/* search form */
form.search {
  position: absolute;
  top: 5px; right: 5px;
  padding: 0; margin: 0;
  border: none;
  background-color: transparent; 
}
form.search input.textbox { 
  margin: 0;
  width: 120px;
  border: 1px solid #CCC; 
  background: #FFF;
  color: #333; 
}
form.search input.searchbutton { 
  margin: 0; 
  font-size: 100%; 
  font-family: Arial, Sans-serif; 
  border: 1px solid #CCC; 
  background: #FFFFFF url(Underground-images/headerbg.gif) repeat-x bottom left; 
  padding: 1px; 
  font-weight: bold; 
  height: 23px;
  color: #333;
  width: 60px;
}

/* -----------------------------------
  LAYOUT
-------------------------------------- */
#wrap {
  margin: 0 auto; 
  width: 780px;
}

/* header */
#header {
  position: relative;
  margin: 0; padding: 0;
  height: 60px;
}
#header span#slogan {
  z-index: 3;
  position: absolute;
  left: 3px; bottom: 7px;
  font: bold 1.1em Verdana, Arial, Tahoma,  Sans-serif;
  color: #FFF;  
}

#header-logo {
  position: relative;
  clear: both;
  height: 50px; 
  margin: 0; padding: 0;  
}
#header-logo #logo {
  position: absolute;
  top: 3px; left: 5px;
  font: bold 30px "trebuchet MS", Arial, Tahoma, Sans-Serif;
  margin: 0; padding: 0;
  letter-spacing: -1px;
  color: #000;
}

/* navigation tabs */
#header ul {
  position: absolute;
   margin:0;
   list-style:none;
  right:-18px ; bottom: 3px;
  font: bold 13px 'Trebuchet MS', Arial, Sans-serif;
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(Underground-images/tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(Underground-images/tabright.gif) no-repeat right top;
   padding:5px 15px 4px 6px;
   color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
  color:#FFF;
}
#header a:hover {
   background-position:0% -42px;
}
#header a:hover span {
   background-position:100% -42px;
}
#header #current a {
   background-position:0% -42px;
}
#header #current a span {
   background-position:100% -42px;
}

/* main column */
#main {
  float: right;
  margin: 0; padding: 0;
  width: 545px;  
}
#main h1 {
  margin: 10px 0 15px 0;
  padding: 5px 5px 5px 8px;
  font-size: 105%;
  color: #FFF;
  text-transform: uppercase; 
  background-color: #CC0000;  
  letter-spacing: .5px;
}

/* sidebar */
#sidebar {
  float: left;
  width: 220px;
  margin: 0; padding: 0; 
  background-color: #FFFFFF;   
}
#sidebar h1 {
  margin: 10px 0 0 0; 
  padding: 5px 5px 5px 8px;
  font-size: 105%;
  color: #FFF;
  text-transform: uppercase; 
  background: #333; 
  letter-spacing: 1px;  
}
#sidebar .left-box {
  border: 1px solid #EBEBEB;
  margin: 0 0 5px 0;  
  background: #FFF;
}
#sidebar ul.sidemenu {
  list-style: none;
  text-align: left;
  margin: 3px 0px 8px 0; padding: 0;
  text-decoration: none;    
}
#sidebar ul.sidemenu li {
  border-bottom: 1px solid #f2f2f2; 
  background: url(Underground-images/bullet.gif) no-repeat 3px 6px;
  padding: 4px 5px 4px 28px;
  margin: 0;  
}
#sidebar ul.sidemenu a {
  font-weight: bolder;
  padding: 3px 0px;  
  background: none;
}

/* footer */
.footer { 
  clear: both;   
  border-top: 1px solid #f2f2f2;
  background: #FFF url(Underground-images/footerbg.gif) repeat-x;
  padding: 2px 0 10px 0; 
  text-align: center;  
  line-height: 1.5em;  
  font-size: .9em;
}
.footer a { 
  text-decoration: none; 
  font-weight: bold;
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes  */
.clear {  clear: both; }
.red   { color: #CC0000; }
.comments { 
  margin: 20px 10px 25px 10px;
  padding: 5px 3px;
  border-bottom: 1px solid #EFF0F1;
  border-top: 1px solid #EFF0F1;
}
</style>



</head>

<body>
<!-- wrap starts here -->
<div id="wrap">

    <!-- header -->
    <div id="header">      
          
      <span id="slogan"> your site slogan here...</span>
      
      <!-- tabs -->
      <ul>
        <li id="current"><a href="index.html"><span>Home</span></a></li>
        <li><a href="index.html"><span>Archives</span></a></li>
        <li><a href="index.html"><span>Downloads</span></a></li>
        <li><a href="index.html"><span>Services</span></a></li>
        <li><a href="index.html"><span>Support</span></a></li>
        <li><a href="index.html"><span>About</span></a></li>      
      </ul>
                      
    </div>
    
    <div id="header-logo">      
      
      <div id="logo">under<span class="red">ground</span></div>    
      
      <form method="post" class="search" action="#">
        <p><input name="search_query" class="textbox" type="text" />
          <input name="search" class="searchbutton" value="Search" type="submit" /></p>
      </form>
            
    </div>
    
         <div id="main">
      
      <a name="TemplateInfo"></a>
      <h1>Template Info</h1>
        
            <p><strong>Underground</strong> is a free, W3C-compliant, CSS-based website template
            by <a href="http://www.styleshout.com/">styleshout.com</a>. This work is
            distributed under the <a rel="license" href="http://creativecommons.org/licenses/by/2.5/">
            Creative Commons Attribution 2.5  License</a>, which means that you are free to
            use and modify it for any purpose. All I ask is that you give me credit by including a <strong>link back</strong> to
            <a href="http://www.styleshout.com/">my website</a>.
            </p>

            <p>
            You can find more of my free template designs at <a href="http://www.styleshout.com/">my website</a>.
            For premium commercial designs, you can check out
            <a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate.com</a>.
            </p>
            
      <p class="comments clear">
        <a href="index.html">Read more</a> |
        <a href="index.html">comments(3)</a> |
        Oct 18 2006
      </p>
      
      <a name="SampleTags"></a>
      <h1>Sample Tags</h1>
        
      <h3>Code</h3>        
      <p>
      <code>
      code-sample { <br />
      font-weight: bold;<br />
      font-style: italic;<br />        
      }
      </code></p>  
        
      <h3>Example Lists</h3>
        
      <ol>
        <li>example of</li>
        <li>ordered list</li>                
      </ol>  
              
      <ul>
        <li>example of</li>
        <li>unordered list</li>                
      </ul>        
        
      <h3>Blockquote</h3>      
      <blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p></blockquote>
        
      <h3>Image and text</h3>
      <p><a href="http://getfirefox.com/"><img src="images/firefox-gray.jpg" width="100" height="120" alt="firefox" class="float-left" /></a>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. 
      Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu 
      posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum 
      odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra 
      condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. 
      In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar 
      ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.         
      </p>
                
      <h3>Example Form</h3>
      
      <form action="#">    
        <p>
        <label>Name</label>
        <input name="dname" value="Your Name" type="text" size="30" />
        <label>Email</label>
        <input name="demail" value="Your Email" type="text" size="30" />
        <label>Your Comments</label>
        <textarea rows="5" cols="5"></textarea>
        <br />  
        <input class="button" type="submit" />    
        </p>    
      </form>        
      <br />          
                      
    </div>

        <div id="sidebar" >

      <h1>Sidebar Menu</h1>
      <div class="left-box">
        <ul class="sidemenu">
          <li><a href="index.html">Home</a></li>
          <li><a href="#TemplateInfo">Template Info</a></li>
          <li><a href="#SampleTags">Sample Tags</a></li>
          <li><a href="http://www.styleshout.com/">More Free Templates</a></li>
          <li>
          <a href="http://www.buywebtemplates.net" title="Web Templates">Web Templates</a></li>
        </ul>
      </div>

      <h1>Sponsors</h1>
      <div class="left-box">
                <ul class="sidemenu">
                    <li><a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate</a></li>
                    <li><a href="http://www.themelayouts.com" title="WordPress Themes">ThemeLayouts</a></li>
                    <li><a href="http://www.imhosted.com" title="Website Hosting">ImHosted.com</a></li>
                    <li><a href="http://www.dreamstock.com" title="Stock Photos">DreamStock</a></li>
                    <li><a href="http://www.evrsoft.com" title="Website Builder">Evrsoft</a></li>
                    <li><a href="http://www.ehostinfo.com/" title="Web Hosting">Web Hosting</a></li>
                </ul>
      </div>


      <h1>Wise Words</h1>
      <div class="left-box">
        <p>&quot;Big men and big personalities make mistakes and admit them.
         It is the little man who is afraid to admit he has been wrong&quot;</p>

        <p class="align-right">- Dr. Maxwell Maltz</p>
      </div>

      <h1>Support Styleshout</h1>
      <div class="left-box">
        <p>If you are interested in supporting my work and would like to contribute, you are
        welcome to make a small donation through the
        <a href="http://www.styleshout.com/">donate link</a> on my website - it will
        be a great help and will surely be appreciated.</p>
      </div>

    </div>
    
<!-- wrap ends here -->
</div>
    
<!-- footer starts here -->
<div class="footer">
  
    <p>  
        &copy; 2010 Your Company

            &nbsp;&nbsp;&nbsp;&nbsp;

        Design by <a href="http://www.styleshout.com/">styleshout</a>

        | <a href="http://www.cssportal.com/">CSS Portal&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="index.html">Home</a> |
             <a href="index.html">Site Map</a> |
        <a href="index.html">RSS Feed</a> |
            <a href="http://validator.w3.org/check/referer">XHTML</a> |
             <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
    </p>
    
</div>  
  
</body>
</html>

   
    
  








Related examples in the same category

1.siderbar float right
2.Content floats left, side bar floats right
3.Sidebar with absolute position
4.Inner left and right bar
5.Sidebar with float left
6.Side bar contains list
7.side bar 2
8.Link bar with dotted line
9.Latest news sidebar
10.Sidebar with read more link
11.Text paragraph with sidebar
12.Sidebar with border
13.Div Sidebar padding: 0 38px 45px 29px;
14.Div Sidebar width: 328px;
15.Div Sidebar float: left;
16.Div based sidebar
17.Sidebar column
18.Sidebar with read more link 3
19.Layout for sidebar and article
20.Navigation sidebar
21.Two columns with sidebar
22.position: absolute; Sidebar
23.Sidebar Link list
24.Sidebar with right border
25.Links inside sidebar
26.Sidebar title
27.Sidebar with read more
28.Sidebar with around corner
29.Login form inside sidebar
30.Shading sidebar title
31.Using border to add boundary to the sidebar item
32.Sidebar with two columns
33.With link sidebar on both sides
34.Site news inside sidebar
35.Sidebar floating right
36.Sidebar Links with mouse hover effect
37.Using H4 as the sidebar section title
38.Sidebar li a:hover background:#94CC29;
39.Link side bar
40.Two column links and text
41.Two column right link bar