Hi all,
Just in a venturing mood of experimentation (its late, red wine and pink floyd ) 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

 

   
• 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 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