Saturday, January 29, 2011

Make a horizontal list



This is more like HTML & CSS tutorial to make ordered list to go vertical

This is order list (normal)
  • Hello
  • This is
  • Testing

This is order list (horizontal)
I actually copy the code from this guy http://leandrovieira.com/projects/jquery/lightbox/

<style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>


<div id="gallery">
 <ul>
  <li>Hello</li>
  <li>This is</li>
  <li>Testing</li>
 </ul>
</div>


The result

No comments: