Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can you use multiple image icons in a <ul> list

    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,

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Is this what you mean?

    Code:
    <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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    there is a tutorial here showing how to use background images as bulletpoints
    http://www.inspirationbit.com/icon-r...ulleted-lists/

    I suggest giving your list items <li> a class and assigning a different background image to each class.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •