Re: [css-d] lists in blocks

[Alan Gresley]

On April 17, 2007, Robert Lane wrote:

> Gee looks like a table, walks like a table, quacks like a duck! :-)
> Actually I had a similar question but not for menus. I have a document
> that client wants added to web page. They laid it out in a 2 column
> bulleted list format. Of course it has an odd number of bullets, and
> the text per item is all different. So what would be the most stable
> way to handle this. My initial thought was just split the UL into two
> lists and then put in a two column table to hold them. But would it
> work as a div around each of the two ul's and then float them? If I
> did that, do I float one left and one right and set the width's to
> <= 50%  or do I float them both left?

> If the ul div's are contained within a wrapper div, do I position them
relative?   Or is there a better way that is supported by all the usual
browsers?

> Thanks!

Hi Robert

Much easier as separate list and only one div is required that wraps both list. 
I have centered the wrap div. The values given to center it would be less if 
the overall width is not the full window width. If the values are removed from 
the wrap div altogether, then the div floats to the left or right completely 
depending of how the the enclosed ul elements are floated.

http://contueor.com/x/list2blocks.htm

Kind Regards, Alan

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/

Re: [css-d] lists in blocks

[Paul Novitski]

At 4/17/2007 02:54 AM, David Sharp wrote:
>David Hucklesby wrote:
> > On Mon, 16 Apr 2007 16:20:40 +0100, Ross Hulford wrote:
> >
> >> I have an unordered list of 10 items
> > [...]
> >> but I want to diaply it in block of 3
> >>
> >> 14710
> >> 258
> >> 369
> >>
> >> Is this possible with css or any other method?
> >>
> >>
> > Did you mean an ORDERED list?
> > Anyway, check out the Wiki:
> > 
> >
> >
> >
>Also the swag - http://www.alistapart.com/articles/multicolumnlists/ -
>or is this out of date now?



I don't think the techniques I described in that 
article are in any way out of date, although I'm 
always hopeful that someone will add to the list 
of solutions.  (I didn't contribute a separate 
link to my article in this thread only because 
the CSS-D wiki already links there.)

If I could rewrite the version of this article 
that appeared in A List Apart I would emphasize 
that in practice I implement the methods that 
entail lots of classes or ids (such as my 
favorite, #6) programmatically using server-side 
scripting; I don't generally hand-code HTML for 
cumbersome markup that's so likely to change, but 
a number of readers were skeptical about these 
techniques because they assumed that they 
required hand-coding.  (They can also be 
implemented by client-side scripting, with the 
usual sacrifice of support when JavaScript is disabled.)

When and if CSS3 becomes supported by more 
browsers we'll be able to take advantage of its own multi-column module:

CSS3 module: Multi-column layout
http://www.w3.org/TR/css3-multicol/

and as discussed here:

Introducing the CSS3 Multi-Column Module
by Cédric Savarese
http://www.alistapart.com/articles/css3multicolumn/

Regards,

Paul
__

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/

Re: [css-d] lists in blocks

[David Sharp]

David Hucklesby wrote:
> On Mon, 16 Apr 2007 16:20:40 +0100, Ross Hulford wrote:
>   
>> I have an unordered list of 10 items
>>
>> 
> [...]
>   
>> but I want to diaply it in block of 3
>>
>> 14710
>> 258
>> 369
>>
>>
>> Is this possible with css or any other method?
>>
>> 
> Did you mean an ORDERED list?
> Anyway, check out the Wiki:
> 
>
>
>   
Also the swag - http://www.alistapart.com/articles/multicolumnlists/ - 
or is this out of date now?

cheers,
D#
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/

Re: [css-d] lists in blocks

[David Hucklesby]

On Mon, 16 Apr 2007 16:20:40 +0100, Ross Hulford wrote:
> I have an unordered list of 10 items
>
[...]
> but I want to diaply it in block of 3
>
> 14710
> 258
> 369
>
>
> Is this possible with css or any other method?
>
Did you mean an ORDERED list?
Anyway, check out the Wiki:


Cordially,
David
--


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/

Re: [css-d] lists in blocks

[Thirty Foot Smurfs!!]

put a float: left on the li element.  then set the width of each of those
such that they break into 3 columns.

On 4/16/07, Ross Hulford <[EMAIL PROTECTED]> wrote:
>
> I have an unordered list of 10 items
>
> 1
> 2
> 3
> 4
> 5
> 6
> 7
> 8
> 9
> 10
>
> but I want to diaply it in block of 3
>
> 14710
> 258
> 369
>
>
> Is this possible with css or any other method?
>
>
> R.
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- 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/
>



-- 
.ernie | ryptide

[ Peripheral Fission ][ Mayavada ][ Squirrels ][ http://ryptide.com ]
[  "Music is the vernacular of the human soul." ~ Geoffrey Latham   ]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/

Re: [css-d] lists in blocks

[Robert Lane]

Gee looks like a table, walks like a table, quacks like a duck!  :-)

Actually I had a similar question but not for menus.  I have a document 
that client wants added to web page.   They laid it out in a 2 column 
bulleted list format.  Of course it has an odd number of bullets, and 
the text per item is all different.

So what would be the most stable way to handle this.  My initial thought 
was just split the UL into two lists and then put in a two column table 
to hold them.

But would it work as a div around each of the two ul's and then float 
them?  If I did that, do I float one left and one right and set the 
width's to <= 50%  or do I float them both left?

If the ul div's are contained within a wrapper div, do I position them 
relative?   Or is there a better way that is supported by all the usual 
browsers?

Thanks!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/

Re: [css-d] lists in blocks

[Alan Gresley]

On April 17, 2007, Ross wrote:

> I have an unordered list of 10 items 1 2 3 4 5 6 7 8 9 10 but I want
> to diaply it in block of 3 1 4 7 10 2 5 8 3 6 9 Is this possible with
> css or any other method? R.

Hello Ross

Well that was fun. You didn't state how the list was to be styled so here my 
test of a menu with columns. It works in IE7 and FF1.5 at least.

http://contueor.com/x/list3blocks.htm

Unfortunately Opera8 does not get it so I have the same menu but this time the 
CSS has a hack to target Opera8. This causes the CSS to not validate.

http://contueor.com/x/list3blocks-h.htm

The menu is completely scalable. I don't know what other browsers the test menu 
work in.

Kind Regards, Alan

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/

[css-d] lists in blocks

[Ross Hulford]

I have an unordered list of 10 items

1
2
3
4
5
6
7
8
9
10

but I want to diaply it in block of 3

14710
258
369


Is this possible with css or any other method?


R.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/