...

View Full Version : Can you use multiple image icons in a <ul> list



ballr
06-15-2010, 02:23 PM
I have a <ul> that has links to PDFs, Excel documents and Word documents. I would like to have an icon for each application in that one <ul> list.

Is it possible to do this? I know how to set it up to have an icon for each <ul> item.

Thanks,

effpeetee
06-15-2010, 02:27 PM
Is this what (http://www.exitfegs.co.uk/Sources.html)you mean?


<h5 class="batch_headers">STARTING OUT.</h5>
<ul>
<li><a href="http://boagworld.com/technology/semantic-code-what-why-how">*Semantic code: What? Why? How?.</a></li>
<li><a href="http://csscreator.com/divitis">*Divitis: what it is, and how to cure it.</a></li>
<li><a href="http://bonrouge.com/~home">*Bonrouge - About HTML, CSS, PHP and javascript.</a></li>
<li><a href="http://ifyoucodeittheywill.com/category/getting-started-css/">*Getting started with CSS.</a></li>
<li><a href="http://www.devinrolsen.com/css-hide-and-display-content/">*A demo of the CSS hide and display method. .</a></li>
<li><a href="http://www.w3schools.com/css/css_howto.asp">*There are three ways of inserting a style sheet.</a></li>
<li><a href="http://htmldog.com/guides/cssadvanced/specificity/">*CSS advanced Specificity.</a></li>

<li><a href="http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/">*From-table-hell-to-div-hell.</a></li>
<li><a href="http://www.programmingsolution.net/tutorials/html-tutorial.php">*Web Building Tutorials - All Free.</a></li>
<li><a href="http://www.websitebytes.com/articles/">*12 top tips for running a great website A list of tips to help you run a successful website...</a></li>
<li><a href="http://www.w3schools.com/">*HTML Tutorials for Beginner to Advanced.</a></li>
<li><a href="http://alistapart.com/articles/doctype">*Fix Your Site With the Right DOCTYPE!</a></li>
<li><a href="http://www.howtocreate.co.uk/">*Teaching you how to create web pages!</a></li>
<li><a href="http://www.brunildo.org/test/IEMshrink-to-fit.html">*Shrink-to-fit boxes and text-align</a></li>
<li><a href="http://www.getsnappy.com/web-optimization/improving-page-load-times.html">*Web-optimization/improving-page-load-times.</a></li>
<li><a href="http://jp29.org/">*Web authoring references and resources.</a></li>

<li><a href="http://unicode.org/charts/">*The Unicode Character Code Charts By script.</a></li>
<li><a href="http://www.sitepoint.com/article/guide-web-character-encoding">*Guide to Web Character Encoding</a></li>
<li><a href="http://www.html.net/">*Welcome to HTML.net Free tutorials on HTML and CSS.</a></li>
<li><a href="http://www.brainjar.com/css/using/">*Using style Sheets.</a></li>
<li><a href="http://www.sitepoint.com/article/top-ten-css-tricks/">*Same "class" Code on each page.</a></li>
<li><a href="http://www.obscure.org/~jaws/htmlhelp.html">*Help with HTML, CSS etc.</a></li>
<li><a href="http://webdesignfromscratch.com/basics.cfm">*A guide to designing web sites.</a></li>
<li><a href="http://www.alvit.de/handbook/">*Web Developer's Handbook.</a></li>
<li><a href="http://www.brunildo.org/test/">*CSS tests and experiments.</a></li>

<li><a href="http://www.yourhtmlsource.com/">*WELCOME TO HTML SOURCE!</a></li>
<li><a href="http://webdesign.about.com/od/CSS/cascading_style_sheets.htm">*Web Design - CSS.</a></li>
<li><a href="http://www.stonetemple.com/articles/css-and-seo.shtml">*Cascading style Sheets (CSS) and SEO.</a></li>
<li><a href="http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#tips">*CSS - A Wonderful Resource.</a></li>
<li><a href="http://www.knowledgehound.com/khhow2s/international_webpages.htm">*Webpages That Contain Non-English Letters.</a></li>
<li><a href="http://www.ssi-developer.net/css/">*Web design and development resource.</a></li>
</ul>
<h5 class="batch_headers">SEMANTICS and POSITIONING.</h5>
<ul>
<li><a href="http://www.w3schools.com/css/css_positioning.asp">*Position your Div where you want it.</a></li>

<li><a href="http://alistapart.com/articles/doctype">*Fix Your Site With the Right DOCTYPE!</a></li>
<li><a href="http://boagworld.com/technology/semantic_code_what_why_how/">*Semantic code: What? Why? How?</a></li>
<li><a href="http://jp29.org/">*Web authoring references and resources.</a></li>
<li class="indent_even"><a href="http://brainstormsandraves.com/articles/semantics/structure">*Semantics,and Structure.</a></li>
<li class="indent_even"><a href="http://blog.tn38.net/archives/2005/05/what_are_semant.html">*What are Semantics?</a></li>
<li class="indent_odd"><a href="http://www.webdesignfromscratch.com/semantic-HTML.cfm">*Semantics and HTML.</a></li>
<li class="indent_even"><a href="http://www.positioniseverything.net/">*Position is Everything.</a></li>
<li class="indent_odd"><a href="http://www.brainjar.com/CSS/positioning/">*CSS Positioning again.</a></li>
<li class="indent_even"><a href="http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/">*Absolute positioning pitfalls</a></li>

<li class="indent_odd"><a href="http://css-discuss.incutio.com/?page=AbsoluteLayouts">*Absolute Positioning.</a></li>
<li><a href="http://bonrouge.com/3c-hf-fixed.php">*Three column, fixed width display.</a></li>
</ul>
<h5 class="batch_headers">ALL ABOUT FLOATS.</h5>
<ul>
<li><a href="http://positioniseverything.net/easyclearing.html">*Clearing Floats Without Structural Markup</a></li>
<li><a href="http://www.webtoolkit.info/css-clearfix.html">*Clearing Floats using the :after pseudoclass.</a></li>
<li><a href="http://www.quirksmode.org/css/clearing.html">*Clearing floats using "overflow: auto;".</a></li>
<li><a href="http://www.smashingmagazine.com/2007/05/01/css:Float-theory-things-you-should-know/">*CSS Float Theory: Things You Should Know.</a></li>
<li><a href="http://www.complexspiral.com/publications/">*Uncollapsing Margins.</a></li>

<li><a href="http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating">*Everything Does Not Float.</a></li>
<li><a href="http://phrogz.net/CSS/understandingfloats.html">*Understanding FLOATS.</a></li>
<li><a href="http://www.brunildo.org/test/clear.html">*Which Floats are cleared by a Clear?</a></li>
<li><a href="http://css-discuss.incutio.com/?page=ClearingSpace">*Clearing space beneath floated elements</a></li>
<li><a href="http://www.brunildo.org/test/clear.html">*15-Containing FLOATS.</a></li>
<li><a href="http://csscreator.com/?q=attributes/containedfloat.php">*Contained FLOATS</a></li>
<li><a href="http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-FLOATS/">*Simple clearing of FLOATS.</a></li>
<li><a href="http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/">*Clearing "FLOATS" the old fashioned way.</a></li>
<li><a href="http://www.webreference.com/html/tutorial20/1.html#head-1">*Tutorial 20: CSS "FLOATS", part 1.</a></li>

<li><a href="http://www.ejeliot.com/blog/59">*15-Containing FLOATS.</a></li>
<li><a href="http://www.elated.com/articles/CSS-FLOATS/">*What can you use FLOATS for?</a></li>
<li><a href="http://css.maxdesign.com.au/floatutorial/">*Floatutorial</a></li>
<li><a href="http://www.quirksmode.org/css/clearing.html">*Clearing FLOATS</a></li>
<li><a href="http://www.digital-web.com/articles/web_design_101_floats/">*Digital Web on FLOATS.</a></li>
<li><a href="http://css-lab.com/demos/navbar/cntr-float-drpdwn.html">*Centered and Widthless Floated List Items.</a></li>

</ul>


Frank

Donkey
06-15-2010, 03:28 PM
there is a tutorial here showing how to use background images as bulletpoints
http://www.inspirationbit.com/icon-resources-and-tips-for-styling-bulleted-lists/

I suggest giving your list items <li> a class and assigning a different background image to each class.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum