Using arrow image for LI : img « Tags « HTML / CSS






Using arrow image for LI

      
<!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>Zion Narrows</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 20px 0;
  padding: 0;
  background: #FFFFFF;
  font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #666666;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

a {
  color: #5D0E0E;
}

a:hover {
  text-decoration: none;
  color: #FF0000;
}

.image {
  float: left;
  margin: 0 15px 10px 0;
}

/* Header */

#header {
  width: 760px;
  height: 120px;
  margin: 0 auto;
  background: #000000 url(zionarrows-images/img1.jpg);
}

#header h1, #header h2 {
  float: left;
  padding: 94px 0 0 7px;
  font-size: 18px;
}

#header a {
  text-decoration: none;
  color: #FFFFFF;
}

/* Pages */

#pages {
  clear: both;
  width: 760px;
  height: 43px;
  margin: 0 auto;
  background: #000000 url(zionarrows-images/img2.gif);
}

#pages h2 {
  display: none;
}

#pages ul {
  float: right;
  margin: 0;
  padding: 7px 0 0 0;
  list-style: none;
}

#pages li {
  display: inline;
}

#pages a {
  display: block;
  float: left;
  height: 25px;
  margin: 0 2px 0 0;
  padding: 7px 15px 0 15px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: -1px;
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
}

#pages a:hover, #pages .active a {
  padding-left: 14px;
  padding-right: 14px;
  background: #580505 url(zionarrows-images/img3.gif);
  border: 1px solid #000000;
  border-bottom: none;
}

/* Boxed */

.boxed {
  float: right;
  width: 180px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.boxed .heading {
  height: 26px;
  padding: 6px 0 0 10px;
  background: #5F1010 url(zionarrows-images/img4.gif);
  border: 1px solid #000000;
  border-bottom: none;
  font-size: 1em;
  color: #FFFFFF;
}

.boxed .content {
  background: #F2F2F2 url(zionarrows-images/img5.gif) repeat-x left bottom;
}

.boxed .content ul {
  margin: 0;
  padding: 10px;
  list-style: none;
}

.boxed .content li {
  padding: 3px 0;
  border-top: 1px dotted #5D0E0E;
}

.boxed .content li.first {
  border: none;
}

.boxed .content a {
  padding-left: 10px;
  background: transparent url(zionarrows-images/img8.gif) no-repeat left center;
  text-decoration: none;
  color: #5D0E0E;
}

.boxed .content a:hover {
  color: #FF0000;
}

/* Posts */

.post {
  background: #F2F2F2 url(zionarrows-images/img5.gif) repeat-x left bottom;
}

.post .title {
  padding: 0 0 0 13px;
  background: #FFFFFF url(zionarrows-images/img9.gif) no-repeat left center;
  color: #000000;
}

.post .posted {
  padding: 2px 10px 4px 10px;
  background: #5F1010 url(zionarrows-images/img4.gif);
  border: 1px solid #000000;
  border-bottom: none;
  font-size: .7em;
  font-weight: normal;
  color: #FFFFFF;
}

.post .story {
  padding: 10px 20px;
}

.post .meta {
  padding: 1px 10px;
}

/* Content */

#content {
  width: 760px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Posts */

#posts {
  float: left;
  width: 370px;
}

/* Archives */

#archives {
}

/* Search */

#search form {
  margin: 0;
  padding: 20px 10px;
}

#textfield1 {
  width: 110px;
  padding: 2px 5px;
  background: #894F4F url(zionarrows-images/img6.gif) repeat-x;
  border: 1px solid #000000;
  font: bold 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

#submit1 {
  width: 30px;
  background: #5F1010 url(zionarrows-images/img7.gif) repeat-x;
  border: 1px solid #000000;
  text-transform: uppercase;
  font: bold 9px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

/* Footer */

#footer {
  clear: both;
  width: 760px;
  margin: 0 auto;
  background: #FFFFFF url(zionarrows-images/img5.gif) repeat-x;
}

#footer p {
  padding: 10px;
  font-size: .8em;
}
</style>


</head>
<body>
<div id="header">
  <h1><a href="">Zion Narrows</a></h1>
  <h2><a href="">Free CSS Templates</a></h2>
</div>
<div id="pages">
  <h2>Pages</h2>
  <ul>
    <li class="active"><a id="page1" href="">Home</a></li>
    <li><a id="page2" href="">My Photos</a></li>
    <li><a id="page3" href="">My Favorites</a></li>
    <li><a id="page4" href="">About Me</a></li>
    <li><a id="page5" href="">Contact Me</a></li>
  </ul>
</div>
<div id="content">
  <div id="posts">
    <div class="post">
      <h2 class="title">Welcome to Zion Narrows!</h2>
      <h3 class="posted">Posted on January 1th, 2007 by Author</h3>
      <div class="story">
        <p><em><strong>Zion Narrows</strong></em> is a free template from <strong>Free CSS Templates</strong> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The  header photo is from PDPhoto.org. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
      </div>
      <div class="meta">
        <p>Filed under <a href="" class="category">Uncategorized</a> | <a href="" class="comment">1 Comment &raquo;</a></p>
      </div>
    </div>
    <div class="post">
      <h2 class="title">Sample Tags</h2>
      <h3 class="posted">Posted on January 1st, 2007 by Author</h3>
      <div class="story">
        <p>An ordered list:</p>
        <ol>
          <li><a href="">Nullam et orci in erat viverra ornare.</a></li>
          <li><a href="">Suspendisse quis gravida massa felis.</a></li>
          <li><a href="">Curabitur malesuada turpis nec ante.</a></li>
        </ol>
        <p>A blockquote:</p>
        <blockquote>
          <p>&#8220;Et pulvinar pede ligula a  sapien. Donec fermentum condimentum nisi. Proin iaculis mauris id lorem  viverra molestie. Duis vel orci. Nam consequat. Morbi nec lacus.&#8221;</p>
        </blockquote>
      </div>
      <div class="meta">
        <p>Filed under <a href="" class="category">Uncategorized</a> | <a href="" class="comment">1 Comment &raquo;</a></p>
      </div>
    </div>
  </div>
  <div id="archives" class="boxed">
    <h2 class="heading">Archives</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="">February</a> (7)</li>
        <li><a href="">January 2007</a> (31)</li>
        <li><a href="">December 2006</a> (31)</li>
        <li><a href="">November 2006</a> (30)</li>
        <li><a href="">October 2006</a> (31)</li>
        <li><a href="">September 2006</a> (30)</li>
        <li><a href="">August 2006</a> (31)</li>
        <li><a href="">July 2006</a> (31)</li>
        <li><a href="">June 2006</a> (30)</li>
        <li><a href="">May 2006</a> (31)</li>
        <li><a href="">April 2006</a> (30)</li>
        <li><a href="">March 2006</a> (31)</li>
        <li><a href="">February 2006</a> (28)</li>
        <li><a href="">January 2006</a> (31)</li>
        <li><a href="">December 2005</a> (31)</li>
        <li><a href="">November 2005</a> (30)</li>
        <li><a href="">October 2005</a> (31)</li>
        <li><a href="">September 2005</a> (30)</li>
        <li><a href="">August 2005</a> (31)</li>
        <li><a href="">July 2005</a> (31)</li>
        <li><a href="">June 2005</a> (30)</li>
        <li><a href="">May 2005</a> (31)</li>
        <li><a href="">April 2005</a> (30)</li>
        <li><a href="">March 2005</a> (31)</li>
      </ul>
    </div>
  </div>
  <div id="search" class="boxed">
    <h2 class="heading">Search</h2>
    <div class="content">
      <form method="get" action="">
        <div>
          <input type="text" id="textfield1" name="textfield1" value="" size="18" />
          <input type="submit" id="submit1" name="submit1" value="Go" />
        </div>
      </form>
    </div>
  </div>
  <div id="categories" class="boxed">
    <h2 class="heading">Categories</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="">Quisque vestibulum</a></li>
        <li><a href="">Sed a nisl a lacus</a></li>
        <li><a href="">Quisque sagittis</a></li>
        <li><a href="">Etiam volutpat</a></li>
        <li><a href="">In aliquet hendrerit</a></li>
        <li><a href="">Suspendisse iaculis</a></li>
        <li><a href="">Nam vel risus at</a></li>
        <li><a href="">Praesent sit amet</a></li>
        <li><a href="">Quisque vestibulum</a></li>
        <li><a href="">In aliquet hendrerit</a></li>
        <li><a href="">Suspendisse iaculis</a></li>
        <li><a href="">Nam vel risus at</a></li>
        <li><a href="">Praesent sit amet</a></li>
        <li><a href="">Quisque vestibulum</a></li>
      </ul>
    </div>
  </div>
  <div id="blogroll" class="boxed">
    <h2 class="heading">Blogroll</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="">AnotherFriendlySite.net</a></li>
        <li><a href="">CoolSite.com</a></li>
        <li><a href="">MyBestFriend.com</a></li>
      </ul>
    </div>
  </div>
</div>
<div id="footer">
  <p>Copyright &copy; 2006 Zion Narrows. Designed by <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a></p>
</div>
</body>
</html>

   
    
    
    
    
    
  








Related examples in the same category

1.Adding images and alt message with XHTML
2.Alternative Text Rendering
3.Set background to #fff for an image
4.Set padding to 4px
5.display block
6. in a
7.Set image margin top and left to negative value
8.Image block
9.image clear: left;
10.Switch image for link
11.Adding caption to Image
12.Image as a link
13.Creating an Image Map
14.Top link with image
15.Wrap text along with image
16.Use image to create line
17.Using color image to create round corner
18.Large corner image for the top bar
19.Image slide show
20.Text wrap around image
21.Image side bar
22.Text wrap image
23.Using huge image to highlight your content
24.Using image to add shading to your text
25.Image Text wraper
26.Marginal Graphic Dropcap
27.Raised image
28.Lowered text
29.Image with clear left
30.Using css to wrap text around images
31.Image map area
32.HTML Image map
33.Creating and Using Image Maps
34.shape = "rect" indicates a rectangular area, with coordinates for the upper-left and lower-right corners
35.value "poly" creates a hotspot in the shape of a polygon, defined by coords
36.shape = "circle" indicates a circular area with the given center and radius
37. indicates that the specified image map is used with this image
38.Client-side Image Map Example
39.'area' defines the clickable area on a graphic or image
40.'coords' sets the coordinates of an 'a' or 'area' element
41.'galleryimg' eliminate the appearance of the toolbar for all 'img' elements
42.'img' displays a picture or a video clip
43.Adding shading to the picture
44.HTML code for image scaling
45.'ismap': Whether the image in 'img' element is a server-side image map
46.'lowsrc' gives the URL of a low-resolution image
47.'map' specifies the coordinates of an image map
48.'nohref' indicates that the 'area' in the 'map' has no link
49.'shape' sets the shape of an 'a' or 'area' element
50.'src' specifies a URL to be loaded by the element
51.'start' specifies when a video clip should start playing
52.'usemap' sets the image map for the map element
53.'hspace' sets the space in pixels between the left and right sides of an element
54.'vspace' sets the size in pixels of the vertical margins