Lists for layout

Forum Moderators: not2easy

Message Too Old, No Replies

Lists for layout

How, why and when should/can they be used?

MatthewHSE

6:16 pm on Oct 21, 2003 (gmt 0)

I've heard some about using lists for layout and positioning lately, but haven't been able to find any real information about why one would do that. Can anyone shed some light on the subject? I imagine I'm not the only one who could benefit from a quick description! :)

Thanks,

Matthew

DrDoc

6:31 pm on Oct 21, 2003 (gmt 0)

I don't think they were using lists for "layout", or at least I hope that's not what they were doing. However, it is good practise to use lists for navigation. After all, that's what any page navigation is - a list of links.

Then the list can be styled to use custom padding, margin, bullets, etc. You can also get a horizontal list by floating every list item left.

Reflection

6:33 pm on Oct 21, 2003 (gmt 0)

I dont think there is any reason you would want to use lists rather than div's for layout. Besides you could end up with some interesting 'issues' in older browsers :).

DrDoc

6:42 pm on Oct 21, 2003 (gmt 0)

For example, try this:

<html> 
<head> 
<title>Untitled</title> <style type="text/css"> 
#vert li { 
list-style: circle; 
} 
#hort li { 
float: left; 
padding-left: 1em; 
} 
</style> 
</head> 
<body> 
<ul id="vert"> 
<li><a href="#">My link</a></li> 
<li><a href="#">Another link</a></li> 
<li><a href="#">More links</a></li> 
<li><a href="#">Blah</a></li> 
</ul> 
<ul id="hort"> 
<li><a href="#">My link</a></li> 
<li><a href="#">Another link</a></li> 
<li><a href="#">More links</a></li> 
<li><a href="#">Blah</a></li> 
</ul> 
</body> 
</html>

MatthewHSE

6:52 pm on Oct 21, 2003 (gmt 0)

Thanks guys. Maybe I misunderstood what others were talking about before; I thought lists were sometimes being used for layout and positioning, similar to how some use tables, which seemed kind of odd. What you've said makes sense and clears up one of those little "naggings" that's been bouncing around in my mind for awhile.

Thanks again!

Matthew

benihana

7:34 pm on Oct 21, 2003 (gmt 0)

if you are using lists as navigation, it can sometimes be a nice little trick to have the bullet show only on hover, for a kind of rollover effect:

#menu li {
list-style-type: none;
}

#menu li a:hover,
#menu li:hover {
list-style-type: disc;
list-style-image: url(graphics/arrow.gif);
}

with this any list in a div etc with an id of menu has a rollover effect.

you have to have both a:hover and li:hover as I.E. doesnt like hover on anything but a, and moz/ns/opera like it on li.
also, you have to declare list-style-type: disc; to keep opera sweet.

ben

<added>dont know if this is valid though...</added>

aevea

6:29 am on Oct 23, 2003 (gmt 0)

I don't have any problem with using lists for layout, if the content you're laying out is a list. A lot of blogs are verymuch like a list of articles or journal entries. If you can't find any structured as a list now, I guarantee you'll see some in the future.

I was actually kind of surprised to see that the pages on the new "a list apart" weren't structured as lists. Notice though the definition list on the [alistapart.com...] credits page.

A div is a great way to group elements for styling that don't have a natural semantic relationship.

mipapage

7:38 am on Oct 23, 2003 (gmt 0)

I have found that the definition list provides a great way to style some things with CSS. Made up of three tags, <dl><dt> and <dd>, it affords you a little more styling flexibility than your standard list.

Of course 'proper semantic use' is advised, but I have certainly stretched it far beyond the original 'word -> definition' use.

For example: lets say you have a list of links that run vertically on your page. The links belong to categories. Split the links into their associated categories, and then each category title gets a <dt> and it's associated links each get a <dd>.

Why is this good?

You can style the category title without any extra markup (classes id's etc)
If you want each separate 'Link Category' to be wrapped in a box, for example, just close each category list (</dl>) and open a new list for the next category. Less markup, and with the separate <dt> you can do some cool stuff to your menus.

(full credit to Zeldman for introducing me to the DL with his 'relavent externals' section)

photon

9:08 pm on Oct 23, 2003 (gmt 0)

benihana--

I'm not seeing the effect in IE6. I've got both

hover

rules set. Is it an issue with IE6 being quirks mode instead of strict (or vice versa)?

Thanks.

benihana

8:26 am on Oct 24, 2003 (gmt 0)

photon,
just did a little investigating and got it to work in I.E. with all dtd's from html 4.01 sloppy through xhtml strict and xhtml1.1.

check your path to the image bullet..? it wont show anything if thats wrong.

note: in my post i said to wrap the list in a div with id of menu, but on the site ive used this on i have the id in the <ul> tag, but it doesnt appear to make any difference.

if your still having bother maybe post/sticky me a little code?
cheers

photon

12:52 pm on Oct 24, 2003 (gmt 0)

benihana--

Yep, the image path was the issue. Stupid mistake. Thaks for your help.

Lists for layout

How, why and when should/can they be used?

MatthewHSE

DrDoc

Reflection

DrDoc

MatthewHSE

benihana

aevea

mipapage

photon

benihana

photon

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week