Tekforums

Hi all,
Just in a venturing mood of experimentation (its late, red wine and pink floyd :D) and been looking how to do a list in html using a graphic

Is there a proper way to have graphics as bullet points but not indented.  I believe you can code without the UL but doesnt that then stray into bad coding practises?


.small_list {
background:#E3E3E3;
}

.small_list ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}

.small_list li {
background: url(cgbullet.png);
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
}


I know that you can make the code smaller but putting elements onto one line but I prefer it like this atm so I can see whats going on as Im still working on my CSS :D

 

   
• Line1

   
• line2

   
• line3

 

I want to get into the idea of using divs hence this trial run.

Google has taken me this far but now ill admit to being a bit lost lol

I believe you want margin: 0 or padding: 0 on the li.

Yes li tags will have margins and padding on by default, set these to 0, and then read this (http://meyerweb.com/eric/css/list-indent.html) so that you are aware that the markers are attached to the lis and how this affects cross browser layout.

The ul acts as a block element wrapper anyway so you dont really need the div, you can just put the class onto the ul.

ul.small_list {  
     background:#E3E3E3;  
     list-style-type: none;  
     padding: 0;  
     margin: 0;  
     }
 
ul.small_list li {  
     background: url(cgbullet.png);  
     background-position: left center;  
     background-repeat: no-repeat;
     margin: 0;
     padding: 0 0 0 20px;
     }  

     
• Line1
 
     
• line2
 
     
• line3