Using double arrow sign for UI LI

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Biru_Manteb &raquo; Made Bay Kodokhunt aka Hendrawan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="hendrawan ak.a kodokhunt" />
<style type='text/css'>
/*Author Name: Hendrawan
  Author NickName: Kodokhunt
  URI 1:http://kodokhunt.blogsome.com
  URI 2:http://dot.choosen.net
  OFFICE 1:http://bascomp.org
  OFFICE 2:http://choosen.net
  */
/*---------------|||||||||||Global------------------------------------------------------*/
  
  body {
    margin:0 auto;
    margin-bottom: 30px;
    margin-top: 0px;
    background:#2763A5 url(Biru_Manteb-img/back.gif);
    }

  a {
    color: #6DA6E2;
    text-decoration: none;
    font-weight: bold;
    }

  a:hover {
    color:#2763A5;
    font-weight: bold;
    text-decoration: underline;
    }
    
/*---------------|||||||||||Container------------------------------------------------------*/

  #container {
    width: 750px;
    margin: 0 auto;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 11px;
    line-height: 1.6em;
    margin-top:30px;
    color: #666;
    background-color: #fff;
    }
    
  #container2 {
    width: 750px;
    margin: 0 auto;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 11px;
    line-height: 1.6em;
    color: #666;
    background-color: #fff;
    }
    
/*---------------|||||||||||header-------------------------------------------------------------------*/

  #header {
    width: 745px;
    border: 2px solid #fff;
    padding-bottom:10px;
    padding-top: 10px;
    clear: both;
    background:url(Biru_Manteb-img/head.gif) no-repeat;
    }
    
  #header p { 
    margin-top: -3px;
    margin-left: 30px;
    color: #fff;
      font-family: Georgia, Times New Roman, Times, serif;
    }
      
  #header h1 {
    font-family: Georgia, Times New Roman, Times, serif;
    font-weight: bold;
    font-size: 32px;
    color: #fff;
    margin-bottom: 10px;
    margin-top:30px;
    margin-left: 10px;
    }
    
  #header a {
    color: #6DA6E2;
    text-decoration: none;
    }

  #header a:hover {
    color: #999;
    }
      
/*---------------|||||||||||Menu-------------------------------------------------*/

    #menu {
      float:left;
      width:745px;
      font-size:93%;
    padding-bottom: 1px;  
    background:url(Biru_Manteb-img/menu.gif);
      line-height:normal;
      }
    
    #menu ul {
    margin:0;
    padding:10px 10px 0 20px;
    list-style:none;
      }
    
    #menu li {
      display:inline;
      margin:0;
      padding:0;
      }
    
    #menu a {
      float:left;
      background:url(Biru_Manteb-img/left.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 6px;
      text-decoration:none;
      }
    
    #menu a span {
      float:left;
      display:block;
      background:url(Biru_Manteb-img/right.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#fff;
      }
    
    #menu a span {
    float:none;
    }
    
    #menu a:hover {
     background-position:0% -42px;
      }
    
    #menu a:hover span {
     background-position:100% -42px;
      }

/*---------------|||||||||||Content------------------------------------------------*/

  #content {
    width: 520px;
    padding-left: 10px;
    padding-right: 10px;
   padding-top: 10px;
    float: left; 
    }
    
  #content p {
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd;
    }
    
  #content h2 {
    color: #666;
    font-size: 16px;
    font-weight:bold;
    text-decoration:underline;
    font-family: Georgia, Times New Roman, Times, serif;
    background-color: #fff;
    }
    
  #content h2 a {
    color: #666;
    text-decoration: none;
    }

  #content h2 a:hover {
    color: #999;
    }

/*---------------|||||||||||Sidebar------------------------------------------*/

  #sidebar {
    width: 175px;
    padding-left: 19px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 0.5em;
    float: right;background:#F1F1F1;
    border-right:4px solid #fff;
    }
    
  #sidebar p {
    padding-bottom: 10px;
    }
    
    #sidebar h2 {
    color: #2763A5;
    font-size: 16px;
    padding-left:15px;
    background:url(Biru_Manteb-img/arrow.gif)no-repeat bottom left;
    font-weight:bold;border-bottom: 1px solid #ddd;
    font-family: Georgia, Times New Roman, Times, serif;
    }
    
/*---------------|||||||||||Footer-----------------------------------------------*/

  #footer {
    clear: both;
    width: 745px;
    font-size:10px;border:2px solid #fff;
       background:#2763A5 url(Biru_Manteb-img/foot.gif);
     background-repeat: no-repeat;
    }
    
  #footer p {
    color:#fff;
    padding: 2px;
    text-align: center;
    }
    
  #footer p a {
    color: #fff;
    background:#2763A5 url(Biru_Manteb-img/foot.gif);
    font-weight:100;
    border-bottom: 1px dotted #fff;
    }
    
  #footer p a:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: 0px dotted #fff;
    }
  
/*---------------|||||||||||Search--------------------------------------------------------------*/

  form {
    float:right;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin-right:5px;
    color:#fff;
    }
    
  input {
    background-color: #fff;
    color: #999;
    border: 1px solid #2763A5;
    font-size: 11px;
    padding: 3px;
    }
    
  .button {
    padding: 2px;
    background-color: #6DA6E2;
    color: #fff;
    border: 1px solid #2763A5;
    font-size: 11px;
    }
     
/*---------------|||||||||||Others--------------------------------------------------------------*/    
  
  a img{
    border: none;
    }
  .box {
      background-color: #fff;
      border: 1px solid #2763A5;
    padding: 5px;
    font-family: Georgia, Times New Roman, Times, serif;
    color: #000;
    font-size: 10px;
    }
  
</style>


</head>

<body>
<!--Contain-->
<div id="container">
    
<!--Skuadron Atas-->
<div id="header">
  <!--Search Facilty-->
  <form method="get" action="http://www.google.com/custom">
       <input name="q" size="25" maxlength="255" value="" type="text" />
        <input name="sa" value="search" type="submit" />
         <input name="cof" value="" type="hidden" />
         </form>
      
<h1>Biru_Manteb Gitu Loh..!!</h1>
<p>[ This Template used for my company site on http://choosen.net ]</p>

<!--Navigasi Skuad-->
<div id="menu">
  <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Profile</span></a></li>
    <li><a href="#"><span>Services</span></a></li>
    <li><a href="#"><span>The Staff</span></a></li>
    <li><a href="#"><span>Downloads</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>
 </div>
</div>
<!--Contain2 Skuad-->
<div id="container2">
  <!--COntent SKuad-->
  <div id="content">
    <h2><img src="img/no_1.gif" alt="" align="bottom" />[Biru_Manteb]</h2>
      <p>
      Welcome To My Biru_Manteb Design, This my Fourth Design for OPen Source Community, 
      This Design used -I hope- for Bussiness website, you can customizing the menu and anything else
      with your idea and is very simply. <br />The Background Idea just only repeat the source image.<br />
      Background Menu, Header, Footer and Arrow in the sidebar used an image, if you think this make your site slowly you can change it,
      maybe with "background-color:#2763A5;", but trust me its makes not cool, huh..<br />
      I hope you can enjoy with this template, No right reserved and links back to me, <br />
      just remember this template was design by <a href="http://dot.choosen.net">me</a><br /><br />
      salam!!<br />Indonesia Goes Open Source<br />
      <a href="#">..more</a></p>
    <h2><img src="img/no_2.gif" alt="" align="bottom" />[Lorem Ipsum]</h2>
      <p>Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website</p>  
  </div>

<!--SideBar Here Bro-->
<div id="sidebar">
  <!--Skuad Right-->
<h2>Links!!!</h2>
<p>
&raquo;&nbsp;<a href="http://kodokhunt.blogsome.com">kodokhunt!</a><br />
&raquo;&nbsp;<a href="http://dot.choosen.net">hendrawan!</a><br />
&raquo;&nbsp;<a href="http://bascomp.org">Bascomp.org!</a><br />
&raquo;&nbsp;<a href="http://choosen.net">Choosen.net!</a><br />
&raquo;&nbsp;<a href="http://oswd.org">OSWD!</a><br />
&raquo;&nbsp;<a href="http://openwebdesign.org">OpenWebDesign!</a>
</p>
<h2>Support</h2>
<p>Add Our Banner to your web site or promote me in your email signature.<br />
Just simply copy and paste the source below to link Back to <a href="#">Us</a>..<br />
<textarea cols="30" rows="4" class="box">
&lt;a href=&quot;#&quot; title=&quot;&quot;&nbsp;target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://domain.tld/img/*.gif&quot; border=&quot;0&quot; width=&quot;120px&quot; height=&quot;60px&quot; /&gt;&lt;/a&gt;
</textarea><br />
</p>
<h2>Lorem Ipsum!!!</h2>
<p>
This sidebar..
used for latest news, latest activity,
testimonial, your client links, your partner links,
maybe a random image..up to you!!!
</p>
</div>

</div><!--End Contain2 here-->

<!--Known Ur Footer-->
<div id="footer">
<p><a href="#">Copyright</a> &copy; 2006 your Company Name, No Rights Reserved | Design by <a href="http://kodokhunt.blogsome.com">kodokhunt</a> 
| <a href="http://www.ehostinfo.com/">Web Hosting</a></p>
</div>

</div><!--End Contain here-->

</body>
</html>
<!--Made on 12 Muharram 1427 H >> hep Phun, "kodokhunt, yo!"-->

Related examples in the same category

1.	'li' creates one item in a list
2.	Nested LI tag
3.	Add style to an anchor in a LI tag
4.	Define class for to set its font weight to bold
5.	LI width: 33%
6.	LI margin: 0 0 0.25em 0
7.	LI font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;
8.	Set display to inline to a LI under a UL in DIV
9.	Alignment of list items
10.	Alignment of list items with margin
11.	Three level list
12.	Inline centred list
13.	Right-aligned bullets
14.	Tab like list
15.	li list-style-type: lower-roman;
16.	li text-indent: -0.75em;
17.	UL LI bullet image
18.	LI display: inline;
19.	LI list-style-type: none;
20.	LI line-height: 44px;
21.	List with no margin
22.	Margin for list
23.	Without list type
24.	li { list-style-image: url("http://java2s.com/style/logo.png");}
25.	list-style-position:inside;list-style-position:outside;
26.	list-style: lower-roman inside;
27.	List order and start
28.	nested ordered and unordered lists
29.	HTML for a definition list
30.	HTML and CSS for vertical and horizontal lists
31.	Selecting elements in nested lists
32.	HTML and CSS for two lists with different list-style properties
33.	HTML and CSS for displaying ordered list style types
34.	HTML and CSS for mixed list-style-type values
35.	Using the display property to make a list display inline
36.	Definition List Example
37.	Unordered List Example
38.	Scrolled List Example
39.	Nested Lists
40.	List types
41.	Lists as navigation
42.	Here is a definition list
43.	a nested ordered list
44.	Dropdown List Example
45.	Link list inside a DIV
46.	Page list bottom bar
47.	ul li list-style-type: square;
48.	Image and text list
49.	Using Arrow Image for LI list
50.	For unordered lists, there are three: disc, square, and circle.
51.	For ordered lists, there are eleven different styles of marker:
52.	The marker can be removed from either ordered or unordered lists with the none keyword.
53.	Setting style for LI inside a DIV
54.	line-height: 44px; for li
55.	Link styles

Using double arrow sign for UI LI : li « Tags « HTML / CSS

Related examples in the same category