Total members 11380 |It is currently Mon Nov 24, 2014 10:02 am Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R

All times are UTC [ DST ]



  Add border around ordered list elements
Wed Feb 22, 2012 1:06 pm 

In this example we use CSS properties to draw border around the order list elements .

Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<
head>
  <
meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <
style type="text/css" media="screen">
  
#elementStyle li {
    
padding12px 45px;
    
margin-bottom6px;
     
border-top2px solid red;
    
border-bottom1px solid gray;
  }
  
  </
style>
</
head>

<
body>
   <
p>
     
In this example we are showing ordered list 
     
but with border around each element 
   
</p>

<
div>
   
Following are the list known operating systems :
  <
ol id="elementStyle">
    <
li>Microsoft Windows</li>
    <
li>Apple Macintosh</li>
    <
li>Linux</li>
    <
li>Unix</li
  </
ol>
</
div>



</
body>
</
html>

 


_________________
Please recommend / share my post if you found it helpful.


Author:
Mastermind
User avatar Posts: 2694
Have thanks: 73 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : Add border around ordered list elements
 creating non ordered list using UL tag.     -  
 nested ordered list     -  
 ordered list from specific number     -  
 Remove ordered list numbers     -  
 ordered list with roman numbers     -  
 unordered-ordered-Definition-list-HTML-Tags     -  
 Removing elements from array list with the iterator     -  
 Listing elements using list components in J2me     -  
 Border around JPG img     -  
 Add dotted Border to div     -  

All times are UTC [ DST ]



Topic Tags

HTML List






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team