WordPress.org

1. devo.uk
   Member
   Posted 2 years ago #
   

   hi ..

   i am creating a page in which i wanted to use an orderlist with a special bullet and spaced equally.

   i created the following code

   css as below

   /* -------- 3 Column Order List -------- */
   
   div.tick3col ol
   {
     width: 100%;  /* room for 3 columns */
   
   }
   div.tick3col ol  li
   {
     float: left;
     width: 20em;  /* accommodate the widest item */
     list-style-type: none;
     background-image: url('../images/bluetick.png');
     background-position: 0px 50%; /* X-pos Y-pos (from top-left) */
     background-repeat: no-repeat;
     padding-left: 54px;
     line-height: 38px;
   
   }
   /* stop the floating after the list */
   div.tick3col:after
   {
     clear: left;
   }
   
   /* separate the list from what follows it */
   div.tick3col
   {
       margin-bottom: 1em;
   
   }

   then inside the page added the following

   <div class="tick3col">
   <ol>
   	<li><a title="Vertical Blinds" href="/blinds/vertical-blinds/">vertical blinds</a></li>
   	<li><a title="Roller Blinds" href="/blinds/roller-blinds/">roller blinds</a> (including motorised)</li>
   	<li><a title="Venetian Blinds" href="/blinds/venetian-blinds/">venetian blinds</a></li>
   	<li><a title="Wood Venetian Blinds" href="/blinds/wood-venetian-blinds/">wood venetian blinds</a></li>
   	<li><a title="pleated blinds" href="/blinds/pleated-blinds/">pleated blinds</a></li>
   	<li><a title="wood weave blinds" href="/blinds/woodweave-blinds/">wood weave blinds</a></li>
   </ol>
   </div>

   this is the first time i try using the pseduo class :after, it took me a while to get the css working until i used div.tickcol3 refrence prefixes so either the reset css or other template/theme css didnt interfear

   so why cant i get the div.tickcol3:after css to clear the float for the spacing

   i am doing something wrong ??

   thanks

Topic Closed

This topic has been closed to new replies.