Friday, May 15, 2009

CSS Lists

CSS includes a number of list properties to help you style your HTML lists.



List Style Type


Determines what the bullet looks like. For info on the possible values see the list-style-type page.




<ul style="list-style-type:circle;">

<li>List item one</li>
<li>List item two</li>
</ul>



This results in:




  • List item one

  • List item two




List Style Image




<ul style="list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUjbS8__BqVuluXEgf0jj4sWgP7WwfZ6ZxKErN2N4gAX7hNBieZTXFxwMwVXqa9tr9lXBaKCdODbrmJzf76QY0nAAQTgssgH8rHzfO31Ff_hDOXWo506f8HO9uICTs67HMZpyxaA5Zapg/?imgmax=800);">
<li>List item one</li>

<li>List item two</li>
</ul>



This results in:




  • List item one

  • List item two





List Style Position


Determines whether the bullet is located inside the list's containing box or outside.




<ul style="list-style-position:inside;">
<li>List item one</li>

<li>List item two</li>
</ul>
<ul style="list-style-position:outside;">
<li>List item one</li>
<li>List item two</li>

</ul>



This results in:




  • List item one

  • List item two



  • List item one


  • List item two




List Style


The list-style property is shorthand for setting the list properties.




<ul style="list-style:square inside;">
<li>List item one</li>

<li>List item two</li>
</ul>



This results in:




  • List item one

  • List item two






Marker Offset


Used in conjunction with display:marker, marker-offset specifies the nearest border edges of the marker box and its associated principal box.




<ul>
<li style="display:marker;marker-offset:10px;">List item one</li>

<li>List item two</li>
</ul>



This results in:




  • List item one

  • List item two




At the time of writing, browser support for marker-offset was limited.




Related Posts by Categories



Widget by Hoctro | Jack Book

0 comments:

Post a Comment

 

©2009 daily news | by TNB