logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g Web Design Site

BellaOnline's Web Design Editor

g

CSS for Creating Eye Catching Lists

Guest Author - Christin Sander

Lists are a great web design element because they allow for easy reading by the end user. Most users want answers quickly, and will only skim a website initially to see if it answers their question. This is especially true if they enter your website via a search engine.

The use of heading tags and lists are a great way to allow people to easily see the primary content of your website. If they feel the lists and subheadings are interesting, there is a greater chance they will remain on your site. This of course, leads to reduced "bounce" rates and helps to improve your website's credibility and ranking in the engines. Anything that improves readability, making it easier for the eyes to skim, will always benefit a website. A great design always keeps readability in mind.

CSS is an easy and very effective way to create stylish lists with custom bullets (markers). You can include different shapes or simple custom graphics that tie into your website's logo, colors or theme. For example, on a ghost tours website, I created a small ghost icon that was used in the side navigation bar and on unordered list items on the main page. It was simple, but very cute and tied into the sites theme, making those page elements stand out.

Other times bullets may distract from important content in a list. In that case, a list style property of "none" can be used to remove the automatically generated markers.

List Style Properties



Use the list-style-type property to select the type of marker that appears with each list item. Values available are disc, circle, square, decimal, lower-roman, upper-roman, lower-greek, lower-latin, upper latin, lower-alpha, upper-alpha, and none.

To specify your own image as a marker, use the list-style-image property as follows:

ul {list-style-image: url(imagename.jpg);
list-style-position: outside;
}

The url is relative to the stylesheet and should point to the folder where your image is. In this case, the image would be in the same folder as the css and html file. If you place your images in a separate folder, you would include that also: url(images/imagename.jpg)

Marker Positions



You can also customize the markers position. In the example above, the outside property makes the bullet appear outside the content area.
list-style-position: inside allows the bullet inside the content area so it runs into the list content.

Shorthand Technique



Another quick way to format a list using CSS is the shorthand technique. With this method, all list properties are specified in one single property:

ul
{
list-style: circle url("image.gif");
}

in the shorthand method, all of the values must appear in a specified order as follows:

list-style-type
list-style-position (inside, outside)
list-style-image

It doesn't matter if you skip a value, so long as the others remain in the correct order.

Custom lists are very useful and CSS makes them easy to achieve. Simple details transform average websites into top performing websites.

This site needs an editor - click to learn more!

Add CSS+for+Creating+Eye+Catching+Lists to Twitter Add CSS+for+Creating+Eye+Catching+Lists to Facebook Add CSS+for+Creating+Eye+Catching+Lists to MySpace Add CSS+for+Creating+Eye+Catching+Lists to Del.icio.us Digg CSS+for+Creating+Eye+Catching+Lists Add CSS+for+Creating+Eye+Catching+Lists to Yahoo My Web Add CSS+for+Creating+Eye+Catching+Lists to Google Bookmarks Add CSS+for+Creating+Eye+Catching+Lists to Stumbleupon Add CSS+for+Creating+Eye+Catching+Lists to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Web Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 by Christin Sander. All rights reserved.
This content was written by Christin Sander. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
Creating Image Links and Image Maps

Using Website Templates

CSS Design Layouts

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor