homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Wanted: Nested and mark-up-less Inline Lists to look like a Tag Cloud
Aim: a CSS-only approach to controlling the presentation of NON-MENU lists

 8:03 pm on Jun 25, 2008 (gmt 0)

Hi there,

My Google-fu is weak... too many inline list menus combined with little or no idea about how I ought to achieve the effects I'm after, which is sorta like what follows:

- - - - - - - - - - - - - - - -

# ONE # TWO $ Two Point One $ Two Point Two% two point two point one % two point two point two % two point two point three$ Two Point Three# THREE # FOUR # FIVE # SIX $ Six Point One $ Six Point Two% six point two point one % six point two point two $ Six Point Three # SEVEN etc, etc

where the #, $ and % symbols represent small (e.g favicon-sized) images as per background:url(filename.ext) no-repeat; AND the lines DO wrap wherever there is a space AND all of the words have the same 'bottom alignment'

- - - - - - - - - - - - - - - -

I've found that its easy to achieve the desired look using nested SPANS... BUT, the way I've tried means that the mark-up is not only bloated but also unsuited to (easily) converting the presentation to a 'conventional' (block-level?) nested list...

Instead, I want mark-up that uses just one div class wrapped around a series of un-marked-up nested lists, allowing me to use CSS to present them as either inline (as per many 'tag clouds') or 'normally'

In the next post, I'll copy'n'paste the contents of a file I've been experimenting with... Apologies in advance for the lack of indentation... I can't figure out how to apply the [ code ] and/or [ pre ] tags on this forum

Am I na´vely optimistic in regard to what can be achieved using a CSS-only approach?

Or am I simply ignorant of what 'everyone else' knows re CSS?

Thanks in advance to the WebmasterWorld CSS gurus :)



 8:04 pm on Jun 25, 2008 (gmt 0)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en-GB">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>nested inline lists</title>
<style type="text/css">
.myWidgets li, .myWidgets li li, .myWidgets li li li {
/* the background images I used are each 16 by 16 pixels) */
.myWidgets li {
background:url(graphics/red.png) no-repeat;
.myWidgets li li {
background:url(graphics/green.png) no-repeat;
.myWidgets li li li {
background:url(graphics/blue.png) no-repeat;
/* without the clearHack applied to an hr after the ul, a following p ends up buried in the list - weird... but not a priority to fix*/
.clearHack {
Nested Inline Lists
<div class="myWidgets">
<li>Two Point One
<li>Two Point Two
<li>two point two point one
<li>two point two point two
<li>two point two point three
<li>Two Point Three
<li>Six Point One
<li>Six Point Two
<li>Six Point Three
<li>six point three point one
<li>six point three point two
<li>six point three point three
<li>Six Point Four
<hr class="clearHack">


 1:48 pm on Jun 26, 2008 (gmt 0)

I had a play with the nested list thang and could understand why you were trying to use it that way, but. It's not going to work (could be wrong). You end up with far more problems. You have to remember that each 2nd 3rd UL is actually contained within a LI. so you end up messing about more. Maybe someone else has an answer.

It's a lot easier with a single list, which I suppose is the same as your span method.

This works in IE 6 7 FF and opera

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#cloud {}
#cloud ul { list-style:none;}
#cloud li {
padding:0 5px 0 20px;
border:1px solid #000;

#cloud .lg {font-size:24px;height:27px;
/*list-style: inside; list-style-image:url(16x16-red.gif);*/
background:url(16x16-red.gif) no-repeat left;

#cloud .md{font-size:20px; padding-top:4px;height:23px;
/*list-style: inside;list-style-image:url(16x16-green.gif);*/
background:url(16x16-green.gif) no-repeat left;

#cloud .sm {font-size:16px; padding-top:6px; height:21px;
/*list-style: inside;list-style-image:url(16x16-blue.gif);}*/
background:url(16x16-blue.gif) no-repeat left;

<div id="cloud">
<h1> Single List</h1>
<p>Single list, much easier</p>
<li class="lg">ONE</li>
<li class="lg">TWO</li>
<li class="md">Two Point One</li>
<li class="md">Two Point Two </li>
<li class="sm">two point two point one</li>
<li class="sm">two point two point two</li>
<li class="sm">two point two point three</li>
<li class="md">Two Point Three</li>
<li class="lg">THREE </li>
<li class="lg">FOUR </li>
<li class="lg">FIVE </li>
<li class="lg">SIX </li>
<li class="md">Six Point One </li>
<li class="md">Six Point Two </li>
<li class="md">Six Point Three </li>
<li class="sm">six point three point one </li>
<li class="sm">six point three point two </li>
<li class="sm">six point three point three </li>
<li class="md">Six Point Four </li>
<li class="lg">SEVEN </li>
<li class="lg">EIGHT </li>

Tried to use list-style-image but IE seems to have problems with it and floats. Not sure if there's a fix.


 3:38 pm on Jun 26, 2008 (gmt 0)

Semantically speaking, it doesn't make sense to use "nested" lists to represent a tag cloud. A "cloud" does not have a hierarchy like nested lists do. Instead, each item has a specific "weight". Tags are usually single words and are typically listed alphabetically. Example:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<!-- Styles -->
<style type="text/css">
ul {
display: block;
width: 300px;
border: 3px solid #000;
list-style: none;
text-align: center;
li {
display: inline;
padding: .5em;
.w0 { font-size: 100%; }
.w1 { font-size: 110%; }
.w2 { font-size: 120%; }
.w3 { font-size: 130%; }
.w4 { font-size: 140%; }
.w5 { font-size: 150%; }
.w6 { font-size: 160%; }
.w7 { font-size: 170%; }
.w8 { font-size: 180%; }
.w9 { font-size: 190%; }
<title>Tag Cloud Example</title>
<li class="w9"><a href="http://example.com/tag/Aaaa" rel="tag">Aaaa</a></li>
<li class="w2"><a href="http://example.com/tag/Bbbb" rel="tag">Bbbb</a></li>
<li class="w1"><a href="http://example.com/tag/Cccc" rel="tag">Cccc</a></li>
<li class="w5"><a href="http://example.com/tag/Dddd" rel="tag">Dddd</a></li>
<li class="w8"><a href="http://example.com/tag/Eeee" rel="tag">Eeee</a></li>
<li class="w3"><a href="http://example.com/tag/Ffff" rel="tag">Ffff</a></li>
<li class="w6"><a href="http://example.com/tag/Gggg" rel="tag">Gggg</a></li>
<li class="w7"><a href="http://example.com/tag/Hhhh" rel="tag">Hhhh</a></li>
<li class="w4"><a href="http://example.com/tag/Iiii" rel="tag">Iiii</a></li>
<li class="w0"><a href="http://example.com/tag/Jjjj" rel="tag">Jjjj</a></li>

[edited by: Fotiman at 3:49 pm (utc) on June 26, 2008]


 5:24 pm on Jun 26, 2008 (gmt 0)

Thanks for the time and effort...

Please note that, for me, the MAIN point of this exercise is to use NO mark-up apart from ONE semantic declaration via the <div class="myWidgets"> wrapper

Then, hopefully, the presentation can be controlled - via CSS only - as desired in a variety of ways

For example:

@ media print { 
/* orthodox layout */}

@ media screen { 
/* the 'cloud' look */}


 6:05 pm on Jun 26, 2008 (gmt 0)

Semantically speaking, you should be using a list. You are displaying a list of links. A div has no semantic meaning.


 6:15 pm on Jun 26, 2008 (gmt 0)

If you're considering classes as markup, then without Javascript you'll have to mark it up to some extent. With Javascript, you'll have to iterate through each list item and change its font size based on its "value," so to speak, but you semi-alienate 1% of users. Can you handle it?

Also, no need to use floats, sir. That would fix your clearHack problem; simply define both the UL and LI as inline elements and use text-align left. Padding (left and right only) and Line-Height can control the height and width of each element at that point (not sure how well line-height plays when there are many differently sized words on a line).

If you're feeling tricksy and want to center it at non-full element width, make the UL a block and assign some margins to the left and right.

With left-padding and line-height appropriately set, you can also use Javascript to assign a background image. Position it as left center and it will show up in the padding area, removed from the text.

And yes, using one list would be SO much easier, I believe.


 6:47 pm on Jun 26, 2008 (gmt 0)

Just to make the point you can still do what you want for the orthodox layout
#cloud .lg {font-size:24px}
#cloud .md {margin-left:20px;font-size:20px;}
#cloud .sm {margin-left:40px;font-size:16px;}

I have a play after the footy ;)


 9:07 pm on Jun 26, 2008 (gmt 0)

can't be this easy.
Its not, IE causes slight problems with the background images that get pushed to the left.
Had to put a <a> tag to try and combat even stranger problems with IE and the background image on <li>, also so white-space:nowrap could be used. If you dont want <a> change it to <span> or something.

The list-style-image, wont work because of display:inline.

Works fine in non-IE

Go on go with the single list ;)
or find the fix for IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>nested inline lists</title>
<style type="text/css">
* {margin:0; padding:0;}
#mywidgets {margin:0 auto; text-align:center; }
ul { display:inline;}
a { white-space:nowrap; padding-left:18px;}

li {display:inline;padding-left:18px;font-size:24px; /*border:1px solid red;*/}
li a { background:url(16x16-red.gif) no-repeat left}

li li {font-size:20px;}
li li a { background:url(16x16-green.gif) no-repeat left}

li li li {font-size:16px;}
li li li a { background:url(16x16-blue.gif) no-repeat left}
<h1> Nested Inline Lists </h1>
<div id="mywidgets">
<li><a href="#">ONE</a></li>
<li><a href="#">TWO</a>
<li><a href="#">Two Point One</a></li>
<li><a href="#">Two Point Two</a>
<li><a href="#">two point two point one</a></li>
<li><a href="#">two point two point two</a></li>
<li><a href="#">two point two point three</a></li>
<li><a href="#">Two Point Three</a></li>
<li><a href="#">THREE</a></li>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
<li><a href="#">SIX</a>
<li><a href="#">Six Point One</a></li>
<li><a href="#">Six Point Two</a></li>
<li><a href="#">Six Point Three</a>
<li><a href="#">six point three point one</a></li>
<li><a href="#">six point three point two</a></li>
<li><a href="#">six point three point three</a></li>
<li><a href="#">Six Point Four</a></li>
<li><a href="#">SEVEN</a></li>
<li><a href="#">EIGHT</a></li>


 2:33 am on Jun 27, 2008 (gmt 0)

Your in luck can't sleep,
then everything works in IE.


 7:22 pm on Jun 29, 2008 (gmt 0)


You're a star!

As I'm not wanting/needing the 'list elements' to be links, I tried deleting your a() declaration after assigning it's attributes to
li, li li, li li li { white-space:nowrap; padding-left:18px; padding-right:0px; zoom:1;}

and it still works, in FF3, Opera9.5 and IE6 (I haven't installed 7 since a recent reformat of my Windoze machine)


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved