CSS Lists


Lists are used to present bulleted lists, numbered lists, and unordered lists, including navigation structures.
Unordered lists are bulleted lists, ordered lists are enumerated lists, and definition lists consist of two elements, typically term and definition[s].

CSS/HTML List Type

<ul>
<li>unordered list</li>
</ul>
---------------------------------
<ol>
<li>ordered list
</li>
</ol>
---------------------------------
<dl>
<dt>definitions list term</dt>
<dd>defininition list definition<dd>
<dl>

Example CSS Navigation List [Use with this CSS]

<ul class="nav">
<li>
<a href='index.php?pageid=home'>home</a>
</li>
<li>
<a href='about.php?pageid=about'>about</a>
</li>
<li>
<a href='services.php?pageid=services'>services</a>
</li>
<li>
<a href='portfolio.php?pageid=portfolio'>portfolio</a>
</li>
<li>
<a href='links.php?pageid=links'>links</a>
</li>
<li>
<a href='contact.php?pageid=contact'>contact</a>
</li>
</ul>

Navigation list CSS- copy and paste in to your styles

..nav { background-color:#003333;text-align:center; display:block; margin:0; padding:0; list-style:none; float:left; clear:right; width:950px; margin-left:auto; margin-right:auto; clear:right; padding-top:3px; padding-bottom:3px; }

.nav li{ list-style:none; display:block; float:left;text-align:center; width:auto; margin-left:auto; margin-right:auto; }

.nav li a, .nav a:link, .nav a:active, .nav a:visited { display:block; font-size:1em; font-weight:800; width:150px; }

/*apply .current-page to the active page menu item */
.nav li .current-page a {text-decoration:underline;color:#ffffff; }

.nav li .link-page a:hover { color:#fff; font-weight:bold; }



CSS list-style-type

  • disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | inherit
  • .square-bull {
    list-style-type:square;
    list-style-position:outside;
    }

 

CSS list-style-image

  • css property used to set the bullet to a custom image
  • .bull-list { list-style-image:url(images/someimage.jpg); }

CSS list-style-position

  • inside | outside | inherit
  • .square-bull { list-style-type:square; list-style-position:outside; }