Nested lists

[Olwe]

Here’s code that produces what I want. Unfortunately, I’m kludging with the br tags to get the alignment right:

First in mainlist.






First in horizontallist








First in second vertical list.


Second in second vertical list.


Third in second vertical list.








Second in horizontal list.

With extra text.


Third in horizontal list.








Part of Mainlist

Here’s the html:

ul.mainlist

{

list-style-type:none;

margin: 0px;

}



.mainlist li

{

margin:0px;

padding:0px;

display:block;

}



ul.horizontallist

{

list-style-type:none;

margin: 0px;

padding:0px;

}



.horizontallist li

{

margin:0px;

padding:0px;

display: inline-block;

}



ul.secondlist

{

list-style-type:none;

margin: 0px;

padding:0px;

}



.secondlist li

{

margin:0px;

padding:0px;

display:block;

}

Can anyone figure out how to get this alignment without messy kludges?

[TheDoc]

Why don’t you simply not use line breaks and just use margin/padding?

[wolfcry911]

and get rid of that extraneous empty clearing li

[Olwe]

Got it! On a hunch, I tried good old “vertical-align:top;”, an old stand-by from the table days. It worked! Stuck it in :
.horizontallist li { … vertical-align:top; }

My whole motivation for this is to contribute to the “code rather than hand-mark-up CSS” movement. To do this I’m obsessing with trying to boil a webpage down to just lists (i.e. no use of div). That way I can write, say, Lisp code (where everything is a list) to (rather elegantly) generate CSS. Yhw? Because everywhere I look — cgi, blogware, dreamweaver, — stumbles on CSS flexibility. For example, a Drupal or WordPress site that wants to not have that “out of the can” look requires serious hand CSS fiddling. Sure, there’s some rudimentary automatic point-click styling, but not serious automated CSS styling.

[TheDoc]

“code rather than hand-mark-up CSS” movement.

I don’t know what movement you’re talking about, but any movement that suggests you use line breaks instead of margins is being lead by a crazy person.

[Olwe]

Sorry if I wasn’t clear, but the line breaks were a kludge, so I wouldn’t want to use them, nor margin tricks. Again, the vertical-align:top solved my issue. Before I was balancing the alignment of items in a horizontal list by adding or subtracting line breaks, i.e., evil kludge.

So, to recap, if you use a horizontal inline list, you’re typically using it for menu items that don’t go into paragraph length. I, however, wanted paragraph lengths, images, etc. — which caused the alignment problems — which I figured out how to solve.

[Author]

Posts