Markerless and “no indent” ListsAuthor: CSS Drive
Removing the default marker that appear to the left of lists is useful when you wish to use lists purely for semantic reasons or to fully customize visually. The below CSS removes both the marker and changes the indentation of the list so it's inline with normal content. The combination of "padding: 0" and "margin-left: 0" ensures the indentation is consistent across browsers.
The HTML:
<ul>
<li>News</li>
<li>Sports</li>
<li>Technology</li>
<li>Webmaster</li>
</ul>
The CSS:
ul{
list-style-type: none;
padding: 0;
margin-left: 0;
font-weight: bold;
}
gdfg
gfdgfdg
doesn't work on me. the bullets are gone yet the whole list is still indented. I've tried to use this:
li{ list-style-type: none; padding: 0; margin-left: -25px;}
well, i'm still searching for the best solution on this. im planning to have it hovered.
li a:hover { }
i'll post on this soon..
Hey Richard use this code:
ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}
It works for me now. If used the same code as presented in this site it did not work because my list wasn't inside a DIV.
Regards.
Ooops the DIV I mentioned has nothing to do with the list indent.
Annoucement: I'm looking for a few news posters. Interested?
| CSS Forums: latest threads | Last Post Info |
|---|---|
| Cant design (1) | 05/16/2008 12:28 pm |
| How to show an entire pdf in one div (2) | 05/14/2008 11:07 am |
| Starting A Web Design Business - How Do I Attract Customers? (10) | 05/13/2008 02:37 pm |
| Download.. Pacific Wings multicolor menu (1) | 05/13/2008 03:05 am |
| Check out this website I am working on CRITIQUE. (5) | 05/13/2008 01:20 am |
