Forum Moderators: not2easy
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;- - - - - - - - - - - - - - - -
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 :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<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 {
display:inline;
float:left;
padding-left:3em;
padding-right:3em;
margin-left:0em;
margin-top:1em;
}
/* the background images I used are each 16 by 16 pixels) */
.myWidgets li {
background:url(graphics/red.png) no-repeat;
font-size:medium;
}
.myWidgets li li {
background:url(graphics/green.png) no-repeat;
font-size:small;
}
.myWidgets li li li {
background:url(graphics/blue.png) no-repeat;
font-size:smaller;
}
/* 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 {
clear:both;
}
</style>
</head>
<body>
<h1>
Nested Inline Lists
</h1>
<hr>
<div class="myWidgets">
<ul>
<li>ONE
<li>TWO
<ul>
<li>Two Point One
<li>Two Point Two
<ul>
<li>two point two point one
<li>two point two point two
<li>two point two point three
</ul>
<li>Two Point Three
</ul>
<li>THREE
<li>FOUR
<li>FIVE
<li>SIX
<ul>
<li>Six Point One
<li>Six Point Two
<li>Six Point Three
<ul>
<li>six point three point one
<li>six point three point two
<li>six point three point three
</ul>
<li>Six Point Four
</ul>
<li>SEVEN
<li>EIGHT
</ul>
</div>
<hr class="clearHack">
</body>
</html>
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>List</title>
<style type="text/css">
#cloud {}
#cloud ul { list-style:none;}
#cloud li {
margin:0;
float:left;
padding:0 5px 0 20px;
white-space:nowrap;
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;
}
</style>
</head>
<body><div id="cloud">
<h1> Single List</h1>
<p>Single list, much easier</p>
<ul>
<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>
</ul>
</div>
</body>
</html>
Tried to use list-style-image but IE seems to have problems with it and floats. Not sure if there's a fix.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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%; }
</style>
<title>Tag Cloud Example</title>
</head>
<body>
<ul>
<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>
</ul>
</body>
</html>
[edited by: Fotiman at 3:49 pm (utc) on June 26, 2008]
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">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 */}
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.
I have a play after the footy ;)
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">
<head>
<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}
</style>
</head>
<body>
<h1> Nested Inline Lists </h1>
<hr>
<div id="mywidgets">
<ul>
<li><a href="#">ONE</a></li>
<li><a href="#">TWO</a>
<ul>
<li><a href="#">Two Point One</a></li>
<li><a href="#">Two Point Two</a>
<ul>
<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>
</ul>
</li>
<li><a href="#">Two Point Three</a></li>
</ul>
</li>
<li><a href="#">THREE</a></li>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
<li><a href="#">SIX</a>
<ul>
<li><a href="#">Six Point One</a></li>
<li><a href="#">Six Point Two</a></li>
<li><a href="#">Six Point Three</a>
<ul>
<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>
</ul>
</li>
<li><a href="#">Six Point Four</a></li>
</ul>
</li>
<li><a href="#">SEVEN</a></li>
<li><a href="#">EIGHT</a></li>
</ul>
</div>
</body>
</html>
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)
THANK YOU!
