Previous Message
Next Message

Styling a tag cloud

Sent by Mark J. Reed on 22 September 2006 18:06


On 9/22/06, Michael Ford [EMAIL-REMOVED]> wrote:
> I'm trying to style an unordered list as a "tag cloud"

I'm not sure I understand what you mean here.  I'd expect something
called a "tag cloud" to have the tags not be lined up at all, but sort
of scattered at different heights

However, my suggestion would be to put the classes on the <li>'s
instead of the <a>'s.  That gives you more control.  You can still
assign styles to the links with e.g.

li.t1 a {font-size: 100%; }

but you can also assign styles to the list item containing the links:

li.t1 { padding-top: 1.8em; }

Try this style sheet and see if it is closer to what you're looking for:
<style type="text/css">
		#tag-cloud{
			clear:both;
			list-style:none;
		}
		#tag-cloud li{		
			float:left;
			margin:0 0.5em;
		}
		#tag-cloud li a{
			text-decoration:none;
			border-top:1px solid #ccc;
			border-bottom:1px solid #ccc;			
		}
			
		li.t1 { padding-top: 1.8em; }
		li.t2 { padding-top: 1.2em; }
		li.t3 { padding-top: 0.8em; }
		li.t4 { padding-top: 0.4em; }
		li.t5 { padding-top: 0.0em; }

		li.t1 a {font-size:100%; }
		li.t2 a {font-size:120%; }
		li.t3 a {font-size:140%; }
		li.t4 a {font-size:160%; }
		li.t5 a {font-size:180%; }

	</style>


-- 
Mark J. Reed [EMAIL-REMOVED]>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: