Web Page Design, Webpage Design, eBay Store Design, ebay Template Design, Auction Listing Template,
Logo Design, PayPal Shopping Cart, Zen Cart, OSCommerce, HTML Tutorials, CSS Tutorials,
SEO Tutorials, eBay Tutorials, Free Online Auction Template Creator

CSS: Formatting Lists

CSS allows you to customize lists that can be made with HTML. There are three styles in respect to lists: list-style-type: x;, list-style-position: x and list-style-image: x;.

In HTML you would use either <ul> or <ol> and the type of list you would like to use. When using CSS, you will only need to use the <ul> tag. You then simply enter the "list-style-type: x;" that you would like to use. Your choices include: "disc", "circle", "square", "decimal", "lower-roman", "upper-roman", "lower-alpha", "upper-alpha", "none", or choose an image url(x) Always specify a "list-style-type" property in case the image is unavailable. The position would include "inside" and "outside". You can also use a shorthand version: list-style: type position url(x);.

• one
• two
• three

• one
• two
• three

<ul style="list-style: disc inside;">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<ul style="list-style: disc outside url(img/bullet.gif);">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

By adding the "color" attribute and using the <span> tag, you can make the bullets a different color.

• one
• two
• three

<ul style="list-style-type: square; color: #990000;">
  <li><span style="color: #000000;">one</span></li>
  <li><span style="color: #000000;">two</span></li>
  <li><span style="color: #000000;">three</span></li>
</ul>

This is how the list-style-position: x (outside or inside) positions the bullet..

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna. In quis leo. Vestibulum quis metus. Vestibulum ut magna sed orci pharetra sodales. Quisque euismod ante ut risus.

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna. In quis leo. Vestibulum quis metus. Vestibulum ut magna sed orci pharetra sodales. Quisque euismod ante ut risus.

<ul style="list-style: square outside;">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Aenean magna. In quis leo. Vestibulum quis metus. Vestibulum ut magna sed orci pharetra sodales. Quisque euismod ante ut risus.</li>
</ul>

<ul style="list-style: square inside;">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean magna. In quis leo. Vestibulum quis metus. Vestibulum ut magna sed orci pharetra sodales. Quisque euismod ante ut risus.</li>
</ul>

Making a Menu (Navigation) List

Move your mouse near a menu item, and the background color changes. The rollover is a simple and effective way to enhance a menu. We demonstrate how to design a rollover menu using only CSS and HTML. No Javascript required. The underlying structure of the menu is an unordered list so that it remains meaningful in browsers that don't fully use CSS for visual rendering (older browsers, text-only browsers).

<style type="text/css">
<!--
#navHorizontal ul {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
list-style-type: none;
text-align: center;
}
#navHorizontal ul li {
display: inline;
}
#navHorizontal ul li a {
color: #000000;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
background-color: #bed8b8;
}
#navHorizontal ul li a:hover {
color: #000000;
background-color: #f0d88b;
}
-->
</style>

<div align="center" id="navHorizontal">
<ul>
  <li><a href="#">Table of Contents</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">ASP</a></li>
</ul>
</div>

<style type="text/css">
<!--
#navVertical ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navVertical li {
margin: 0px 0px 2px 0px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
}
#navVertical a {
display: block;
color: #000000;
background-color: #bed8b8;
width: 150px;
padding: 3px 6px;
text-decoration: none;
}
#navVertical a:hover {
background-color: #f0d88b;
color: #000000;
}
-->
</style>

<div align="center" id="navVertical">
<ul>
  <li><a href="#">Table of Contents</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">ASP</a></li>
</ul>
</div>

HTMLTutorials

• HTML/CSS Tutorials
• Introduction to HTML
• What is an URL?
• Browser Safe Fonts
• Formatting Your Text
• <p>, <br>, <hr>
• The Marquee Tag
• Adding/Sizing Images
• Text/Image Links
• Making Lists
• Tables: The Basics
• Table Backgrounds
• Colspan, Rowspan
• Sample Tables
• Color Values

CSSTutorials

• Introduction to CSS
• Backgrounds/Color
• <div>, <span>
• Formatting Text
• Formatting Lists
• Images
• Style Your Links
• Tables and CSS
• Fun with CSS

JavascriptTutorials

• Rollover Buttons
• Image Swap
• Easy Popup Windows

eBayTutorials

• eBay Related Questions
• Your eBay Store
• Self Hosting Photos

OtherTutorials

• Photo Size/Compression
• Using Irfanview
• Using TagBot
• Speaking Geek

Create Your Auction Listing FREE

Use our FREE online Auction template creator. Choose from many backgrounds or use or own. We host all images except your photos and logo. Easy to use! Try now!

Web Safe Fonts

Building your own Web Site or Auction Listing and not sure what the best fonts to use are? Find out now!