html lists styling techniques - noupe design blog

8/8/2019 HTML Lists Styling Techniques - Noupe Design Blog

http://slidepdf.com/reader/full/html-lists-styling-techniques-noupe-design-blog 1/20

more »AJAXCSSDESIGNPHOTOSHOP

TUTORIALWORDPRESS

Noupe Design Blog

Web Designer's Online Resource

Nov 4

Essential CSS/HTML Lists Styling Techniques

Posted in CSS

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 horizontalnavigation, 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 newcontent into existing applications.

Unordered/Ordered Lists

Unorderd lists are recommened to be used with a list of items where order is irrelevant. With unorderedlists (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 tosubstitute 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 ?

01. 

02. <ul>

03. <li><a href="#">List Item One</li>

04. <li><a href="#">List Item Two</li>

05. <li><a href="#">List Item three</li>

06. <li><a href="#">List Item Four</li>

07. <li><a href="#">List Item Five</li>

08. &lt/ul>

09.

10. 

11. <ol>






17. &lt/ol>

Examining the box model for a list reveals the following:

In short both ul’s and ol’s are considered block level elements, as are each one of their child li tags. Assuch we can apply margin and padding to both items on all four sides. In regards to the bullet point forul’s (or the numeral for ol’s) a left margin will move both the bullet/numeral to the right as well as thetext, while padding while increase the space between the bullet/numeral and the content of the li.

The Basics of Styling Lists

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>






07. &lt/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 t

07. }

Basic styling to the numbers of an ordered list is just as straightforward. Consider the following list andCSS.


01. <ol>






07. &lt/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 atags inside our li’s to change their font in order to give thema 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. }

More Advanced Uses for List

Accessible-Image Tab Rollovers

While this is an older article, published in 2003, the information contained in it is very valuable. DanCedarholm of SimpleBits explains how to create an image based navigation with rollovers using onlyCSS, HTML and images. If you haven’t read this article before it’s definately worth reading. The codebelow is a summarized version, but Dan offer’s a full explanation of the code on his site SimpleBits

CSS


01. <ul id="nav">

02. <li id="thome"><a href="#">Home</li>

03. <li id="tservices"><a href="#">Our Services</li>

04. <li id="tabout"><a href="#">About Us</li>

05. &lt/ul>

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.

Pat Rogers Harley Davidson



Fast Company

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’tpresent a problem if you’re using a content management or blogging system like WordPress that allowsyou to create and rename pages at will. The following technique has been around for a while but is justas 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 orshrink horizontally to encompass a short page title. Our HTML markup for the list is very similar to theabove technique. Our main changes will center around how we style the list with CSS.


01. <div id="header">02. <ul>03. <li><a href="#">Home</li>04. <li id="current"><a href="#">Services</li>05. <li><a href="#">About Us</li>06. </ul>07. </div>


01. #header {02. float:left;03. width:100%;04. background :#DAE0D2 url("bg.gif") repeat-x bottom bottom;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 orsliders. These block level elements cycle through (or are toggled via user interaction) a predetermined setof 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 nowpossible to do this strictly with HTML/Javascript/CSS. Our code snippet below is an example usingjQuery and a jQuery plugin called jCarousel Lite.

HTML


01. <button class="prev">Prev</button>

02. <button class="next">Next</button>

03.

04. <div class="anyClass">

05. <ul>

06. <li><img src="someimage" alt="" width="100" height="100" ></li>




10. </ul>

11. </div>


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 jCarouselLite, 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 theyhave been, otherwise known as “breadcrumbs”. In the following list you’ll find some step by steptutorials for building CSS breadcrumbs.

Resources for CSS BreadCrumbs

Simple CSS Breadcrumbs using a background imageSimple Scalabe CSS Based Breadcrumbs

Lists & CSS Resources

The following resources discuss technique and theory in greater detail in regards to CSS and HTMLlists.

A List Apart: CSS Design: Taming ListsCSS Tabs & Navigation ShowcaseCSS Menu BuilderEasy Slider jQuery Plugin

About the author

Justin Johnson is Rich Media / UI Developer at E-dreamz an established Web Development company inCharlotte, 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.

25 Responses, Add Comment +

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 fromthe use of “list”.

Reply



2.designfollow 4 November 2009

thanks for this great article.

Reply

3.steven 4 November 2009

It’s ok!

Reply

4.KDzyne 4 November 2009

Very, VERY useful information. Thank you so much!

Reply

5.Dzinepress 5 November 2009

helping techniques for latest development trends. thanks

Reply

6.

Logo Bliss 5 November 2009

A solid round up of the list styles.

Reply

7.See 5 November 2009

GOod Article…Very Good..Thanks for tutorial…me will try

Reply



8.rizal 5 November 2009

That’s just awesome. Thanks.

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 forus who are starting out as a designer/developer.

Keep up the good work.

More thanks!

Reply

10.

shawnp4h 5 November 2009

Great Share….

Thank you so much!

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

very nice thanks tutorial

Reply

14.BEBEN 6 November 2009

right…its a awesome tricks…:-bd

Reply

15.Logesh Paul 6 November 2009

Amazing Tutorial!!!! It helps a lot to understand more about UL LI.

Reply

16.cram 7 November 2009

in the line:background:#DAE0D2 url(“bg.gif”) repeat-x bottombottom;

what’s with the bottombottom? is that an error or what does it mean?

Reply

17.ali 7 November 2009

this is very usefull, thanks

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 !

Thanks for clarifying.

Reply

21.Web Design from Lyons Solutions 19 December 2009

Well written article. Great tips.

Reply

22.chandan dutta 15 March 2010

web designerThanks 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 keywordsor domains as names; do not spam, and do not advertise!

Name (required)

Mail (will not be published) (required)

Website

Submit Comment

Subscribe by RSSSubscribe to Noupe by EmailTwitter

Type Keywords And Hi

Sponsors

Advertise with us!

The New School



Verio’s cPanel VPS

PSD to HTML

Royalty-Free Stock Photos

Premium Blog Themes

Take ownership of your website.

Premium Website Templates



buy dollar photos without registering

Popular Articles

Sexy Drop Down Menu w/ jQuery & CSS

in TUTORIAL / 425

The Ultimate Ugly Showcase of Current Government Websites

in Showcases / 378

1000+ Free High Resolution Photoshop Brush Sets

in PHOTOSHOP / 277

40 Most Beautiful Mosques In The World

in Inspiration / 268

Ten Simple Rules for Choosing the Perfect CMS + Excellent Options

in PHP / 252

45 Brilliant Examples of Photo Manipulation Art



in PHOTOSHOP / 207

35 Truly Dramatic Examples of Animal Photography

in Photography / 205

Discussing PHP Frameworks: What, When, Why and Which?

in PHP / 188

50 Most Beautiful Icon Sets Created in 2008

in Freebie / 178

101 CSS Techniques Of All Time- Part 1

in DESIGN / 145

40+ Absolutely Stylish & Creative Hand-picked Wallpapers

in Wallpapers / 143

45+ Must See WordPress themes

in WORDPRESS / 142



Smashing Network

1. Scalable JavaScript Application Architecturenet.tutsplus.com

2. Ruby for Newbies: Working with Classes

net.tutsplus.com3. Interview With Magomed Dovjenko

psd.tutsplus.com4. Is Being Permanently Connected to Social Networks

Good?sixrevisions.com

5. Would You Like to Integrate Your iPad or iPhone IntoYour Photoshop Workflow?psd.tutsplus.com

6. Version-Less Development: What is it and Why it’sImportant

spyrestudios.com7. Effortless Full Screen Background Images With jQuery

designshack.co.uk8. When 24/7/365 Fails: Turning Off Work On Weekends

smashingmagazine.com9. A Collection of Photo Manipulation That Will Amaze

Younaldzgraphics.net

10. Speed Up Your Photoshop CS5 Workflow by MakingYour Own Custom Panelspsd.tutsplus.com

15 High Quality Premium-Like Free WordPress Themes

in WORDPRESS / 139

Noupe Links

About

Contact UsArchivePublishing Policy

/ /



Subscribe

RSS FeedEmail SubscriptionNews RSS

Noupe Friends

Dr. Web (.de)Smashing MagazineSmashing JobsSmashing Book

© 2009-2010 Smashing Media GmbH

html lists styling techniques - noupe design blog

Documents