CSS
DESIGN
PHOTOSHOP Web Designer's Online Resource
TUTORIAL
WORDPRESS
Nov 4
25 Comments »
By Justin Johnson
Certain elements in HTML lend themselves to many situations when marking up a website, one of the
more useful of these elements is the HTML list. Using lists, a developer can markup horizontal
navigation, dropdown navigation, a list of links, and even scrolling content panels (with the help of
Javascript). These features can help developers build new sites and applications as well as integrate new
content into existing applications.
Unordered/Ordered Lists
Unorderd lists are recommened to be used with a list of items where order is irrelevant. With unordered
lists (and all lists actually) the W3C discourage authors from using lists purely as a means of indenting
text. This is a stylistic issue and is properly handled by style sheets.
Ordered lists on the other hand are encouraged to be used when order matters for the list elements,
example: A cooking recipe or turn-by-turn directions. For the examples in this article it is possible to
substitute an ol for a ul or vice-versa. That choice is left to your discretion.
In it’s simplest form an ordered list or unordered list (referred to going forward interchangably as ‘a list’)
would contain similar markup to the following:
view plain copy to clipboard print ?
In short both ul’s and ol’s are considered block level elements, as are each one of their child li tags. As
such we can apply margin and padding to both items on all four sides. In regards to the bullet point for
ul’s (or the numeral for ol’s) a left margin will move both the bullet/numeral to the right as well as the
text, while padding while increase the space between the bullet/numeral and the content of the li.
Styling a list to be used as it is intended, a list, is a fairly straightforward task. To replace the bullets in an
ol with a sample graphic icon you could do something like the following:
HTML
01. <ul>
02. <li><a href="#">List Item One</li>
03. <li><a href="#">List Item Two</li>
04. <li><a href="#">List Item three</li>
05. <li><a href="#">List Item Four</li>
06. <li><a href="#">List Item Five</li>
07. </ul>
CSS
01. ul li{
02. list-style:none; /* removes the default bullet */
03. background: url(../images/icon-for-li.gif) no-repeat left center;
04. /*adds a background image to the li*/
05. padding-left: 10px
06. /* this would be the width of the background image, plus a little more to space things out prope
07. }
Basic styling to the numbers of an ordered list is just as straightforward. Consider the following list and
CSS.
01. <ol>
02. <li><a href="#">List Item One</li>
03. <li><a href="#">List Item Two</li>
04. <li><a href="#">List Item three</li>
05. <li><a href="#">List Item Four</li>
06. <li><a href="#">List Item Five</li>
07. </ol>
CSS
With the CSS we will change the font of the ol to change the font of the numerals, then we’ll target the a
tags inside our li’s to change their font in order to give them
a different visual representation than the numerals.
01. ol{
02. font-family: Georgia, "Times New Roman", serif;
03. color: #ccc;
04. font-size: 16px;
05. }
06. ol li a{
07. font-family: Arial, Verdana, sans-serif;
08. font-size: 12px;
09. }
While this is an older article, published in 2003, the information contained in it is very valuable. Dan
Cedarholm of SimpleBits explains how to create an image based navigation with rollovers using only
CSS, HTML and images. If you haven’t read this article before it’s definately worth reading. The code
below is a summarized version, but Dan offer’s a full explanation of the code on his site SimpleBits
CSS
HTML
01. #nav {
02. margin: 0;
03. padding: 0;
04. height: 20px;
05. list-style: none;
06. display: inline;
07. overflow: hidden;
08. }
09.
10. #nav li {
11. margin: 0;
12. padding: 0;
13. list-style: none;
14. display: inline;
15. }
16.
17. #nav a {
18. float: left;
19. padding: 20px 0 0 0;
20. overflow: hidden;
21. height: 0px !important;
22. height /**/:20px; /* for IE5/Win only */
23. }
24.
25. #nav a:hover {
26. background-position: 0 -20px;
27. }
28.
29. #nav a:active, #nav a.selected {
30. background-position: 0 -40px;
31. }
01. #thome a {
02. width: 40px;
03. background: url(home.gif) top left no-repeat;
04. }
05. #tservices a {
06. width: 40px;
07. background: url(services.gif) top left no-repeat;
08. }
09. #tabout a {
10. width: 40px;
11. background: url(about.gif) top left no-repeat;
12. }
Examples
Note that some of these examples use a modified version of this technique in which one large image
(aka an image sprite) is used instead of individual graphics for each nav item.
NBC
ToysR’Us
CSS “Sliding Doors”
While the above method is great if you know what your navigation items are going to be, it doesn’t
present a problem if you’re using a content management or blogging system like WordPress that allows
you to create and rename pages at will. The following technique has been around for a while but is just
as useful, if not more useful than the previous technique. Douglas Bowman wrote an article for A List
Apart in 2003 titled: Sliding Doors of CSS
This technique uses two background images that can tile horizontally to encompass a long page title or
shrink horizontally to encompass a short page title. Our HTML markup for the list is very similar to the
above technique. Our main changes will center around how we style the list with CSS.
01. #header {
02. float:left;
03. width:100%;
04. background:#DAE0D2 url("bg.gif") repeat-x bottombottom;
05. font-size:93%;
06. line-height:normal;
07. }
08. #header ul {
09. margin:0;
10. padding:10px 10px 0;
11. list-style:none;
12. }
13. #header li {
14. float:left;
15. background:url("left.gif") no-repeat left top;
16. margin:0;
17. padding:0 0 0 9px;
18. }
19. #header a {
20. float:left;
21. display:block;
22. background:url("right.gif") no-repeat rightright top;
23. padding:5px 15px 4px 6px;
24. text-decoration:none;
25. font-weight:bold;
26. color:#765;
27. }
28. /* Commented Backslash Hack
29. hides rule from IE5-Mac \*/
30. #header a {float:none;}
31. /* End IE5-Mac hack */
32. #header a:hover {
33. color:#333;
34. }
35. #header #current {
36. background-image:url("left_on.gif");
37. }
38. #header #current a {
39. background-image:url("right_on.gif");
40. color:#333;
41. padding-bottom:5px;
42. }
Examples
ESPN
EnGadget
NetTuts
TigerDirect
Content Scrollers
One trend that is becoming increasingly more and more popular is the concept of content scrollers or
sliders. These block level elements cycle through (or are toggled via user interaction) a predetermined set
of content which can be any web content. This used to be a technique that was reserved soley for Flash,
however, with the advent of Javascript libraries such as jQuery, mooTools, and Prototype it is now
possible to do this strictly with HTML/Javascript/CSS. Our code snippet below is an example using
jQuery and a jQuery plugin called jCarousel Lite.
HTML
01. $(function() {
02. $(".anyClass").jCarouselLite({
03. btnNext: ".next",
04. btnPrev: ".prev"
05. });
06. });
Examples of this technique can be found below. Note that not all of the examples below use jCarousel
Lite, but they do portray a similar technique/effect.
Ordered Lists: A Side Note
While ol and ul can technically be considered interchangable, an ol was designed to be used for items
where order is important. One great example of this could be a list of links that shows a user where they
have been, otherwise known as “breadcrumbs”. In the following list you’ll find some step by step
tutorials for building CSS breadcrumbs.
Justin Johnson is Rich Media / UI Developer at E-dreamz an established Web Development company in
Charlotte, NC. He spends his days meticulously hand crafting CSS and Javascript as well as tinkering
with PHP, MySQL, SQL, ColdFusion & Flex. Justin spends his spare time with his wife and son.
This entry was posted on Wednesday, November 4th, 2009 at 8:52 am and is filed under CSS. You can follow any
responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not
allowed.
1.
Rahul - Web Guru 4 November 2009
Very informative article on effective use of the list style. I like the cool effects we can make from
the use of “list”.
Reply
2.
designfollow 4 November 2009
Reply
3.
steven 4 November 2009
It’s ok!
Reply
4.
KDzyne 4 November 2009
Reply
5.
Dzinepress 5 November 2009
Reply
6.
Logo Bliss 5 November 2009
Reply
7.
See 5 November 2009
Reply
8.
rizal 5 November 2009
Reply
9.
Webjohn01 5 November 2009
Hello Justin!
It was a great tutorial/article about proper styling in HTML/CSS. It was very helpful especially for
us who are starting out as a designer/developer.
More thanks!
Reply
10.
shawnp4h 5 November 2009
Great Share….
Reply
11.
Greg 5 November 2009
Always great to see what people are doing with UL’s. Nice list
Reply
12.
Premium Theme Club 5 November 2009
Rich info with nice example,useful in good clean coding,well done,and I will surely use these
Reply
13.
esranull 6 November 2009
Reply
14.
BEBEN 6 November 2009
Reply
15.
Logesh Paul 6 November 2009
Reply
16.
cram 7 November 2009
in the line:
background:#DAE0D2 url(“bg.gif”) repeat-x bottombottom;
Reply
17.
ali 7 November 2009
Reply
18.
Jaime 8 November 2009
Great article! Just one thing, your link to the SimpleBits article is broken. This is the right link:
http://simplebits.com/notebook/2003/09/30/accessible-image-tab-rollovers/
Reply
19.
Bemoi 11 November 2009
i have to say that i really needed this article as i have many problems formatting the lists. thanks
Reply
20.
Web Hosting 30 November 2009
Never used ol !
Reply
21.
Web Design from Lyons Solutions 19 December 2009
Reply
22.
chandan dutta 15 March 2010
web designer
Thanks for great article.Its very useful for me.
Reply
23.
Cubism Designs 19 March 2010
Hi Justin, it’s wonderful post by you and given important information here thanks.
Reply
24.
K_h_a_l_e_e_l 13 May 2010
Thanks anyway
Reply
25.
external sliding doors 4 September 2010
it’s wonderful post by you and given important information here thanks.
Reply
Trackbacks
Leave a Reply
Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords
or domains as names; do not spam, and do not advertise!
Name (required)
Website
Submit Comment
Subscribe by RSS
Subscribe to Noupe by Email
Twitter
Sponsors
PSD to HTML
Popular Articles
Ten Simple Rules for Choosing the Perfect CMS + Excellent Options
in PHP / 252
Smashing Network
1. Scalable JavaScript Application Architecture
net.tutsplus.com
2. Ruby for Newbies: Working with Classes
net.tutsplus.com
3. Interview With Magomed Dovjenko
psd.tutsplus.com
4. Is Being Permanently Connected to Social Networks
Good?
sixrevisions.com
5. Would You Like to Integrate Your iPad or iPhone Into
Your Photoshop Workflow?
psd.tutsplus.com
6. Version-Less Development: What is it and Why it’s
Important
spyrestudios.com
7. Effortless Full Screen Background Images With jQuery
designshack.co.uk
8. When 24/7/365 Fails: Turning Off Work On Weekends
smashingmagazine.com
9. A Collection of Photo Manipulation That Will Amaze
You
naldzgraphics.net
10. Speed Up Your Photoshop CS5 Workflow by Making
Your Own Custom Panels
psd.tutsplus.com
Noupe Links
About
Contact Us
Archive
Publishing Policy
/ /
Subscribe
RSS Feed
Email Subscription
News RSS
Noupe Friends