[css-d] Multiple Column Lists

[Adam Hardy]

1 4 7
2 5 8
3 6 9

I read the article "Do You Want To Do That With CSS? - Multiple Column Lists" 
[1] by Holly Bergevin and John Gallant online about how to display lists across 
multiple columns and make the item order follow the columns rather than flow 
along the rows.

At the end they round off the article with the sentence "this technique is only 
useful for static pages, and cannot be made to easily work in a dynamic page 
where unknown numbers of list items may be included "

... which is a slight drawback since that's exactly what I'd like to do!

Is there any way to change the flow in the browser to vertical, like for 
instance with Chinese text? Or am I dreaming?

Regards
Adam






[1] http://www.communitymx.com/content/article.cfm?page=2&cid=27F87

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Multiple Column Lists

[Adam Hardy]

david on 25/01/08 08:57, wrote:
> Adam Hardy wrote:
>> 1 4 7
>> 2 5 8
>> 3 6 9
>>
>> I read the article "Do You Want To Do That With CSS? - Multiple Column 
>> Lists" 
>> [1] by Holly Bergevin and John Gallant online about how to display lists 
>> across 
>> multiple columns and make the item order follow the columns rather than flow 
>> along the rows.
>>
>> At the end they round off the article with the sentence "this technique is 
>> only 
>> useful for static pages, and cannot be made to easily work in a dynamic page 
>> where unknown numbers of list items may be included "
>>
>> ... which is a slight drawback since that's exactly what I'd like to do!
> 
> I would think that if you're dynamically generating the pages, you could 
>   dynamically determine how many items are included in that particular 
> page, and spit out the code to position it properly. So if you have nine 
> items (as in your example), you spit out three divs, each holding a list 
> with three items, with the starting value of each list set dynamically 
> to begin the number following the last item in the previous list. If you 
> have 12 items, you spit out the same three divs, but put four items in 
> each list and adjust the start values.

That's a good work-around. I can do that, and in fact if I put these sub-lists 
into floated divs, they will rack up to the right to fill the page horizontally.

The only downside would be that the divs would wrap, so I'd have to put a 
bigger 
margin at the bottom of the divs to make it clear that there's a new 'super-row'

1  4  7  10  13  16  19
2  5  8  11  14  17  20
3  6  9  12  15  18  21

22  25  28  31  34  37
23  26  29  32  35  38
24  27  30  33  36  39

40  43  46
41  44  47
42  45

I rarely overestimate my UI design abilities - is that something that the user 
would accept?

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Multiple Column Lists

[Adam Hardy]

Jim Davis on 25/01/08 02:08, wrote:
> Is there any way to change the flow in the browser to vertical, like
> for
> instance with Chinese text? Or am I dreaming?
> 
> 
> 
> Here is a link to information about a JavaScript / CSS3 implementation 
> of what you are interested in.
> http://www.csscripting.com/wiki/index.php?title=Main_Page
> 
> Unfortunately, this solution requires a browser that includes the css3 
> multi-column module, such as Firefox or Opera.

Hi Jim,

there's an interesting piece of text about Mozart there :) My knowledge of 
Mozart is based solely on the film Amadeus!

Shame I can't use Javascript! Won't it be great when CSS3 is released? That 
column-count is exactly what I need.

Cheers
Adam
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Multiple Column Lists

[Adam Hardy]

Geoffrey Hoffman on 25/01/08 14:40, wrote:
> I'm trying to think of a case when you'd want to render a numbered menu in
> this fashion. From a usability standpoint it seems rather confusing.

Oh! Well, I figured it might, but hoped it wouldn't.

I appreciate your scripting example (although I'd do it in JSP) and I do think 
that anything like this from a scripting POV is possible, but as you say, from 
a 
usability POV, would you want to do it?

What I'm actually considering is not just an isolated numbered list, in fact my 
lists will be mostly just alphabetically sorted without numbers.

I'm at the prototyping stage of a 'framework' project, which will provide a 
basis for many (if we get it right) future websites. The framework is required 
to be provide building blocks such as JSP taglibraries that allow future 
projects to bash it out without too much effort.

It's also a K.I.S.S. style framework - no Web2, no javascript, no major hacks 
etc. It's the low end of the market, absent of bells and whistles.

This list requirement I am looking at here is one for form controls such as 
checkboxes or radio buttons where the item being edited is, say the students in 
a college, and the list is the topics from which must be allocated several.

A single column of checkboxes looks hopelessly skinny. Perhaps more detail on 
each line would make it look less skinny, but that would be disguise and not 
something to offer in a framework.

Horizontally flowing checkboxes just don't seem right.

A select combobox with multi-select turned on is too difficult to use.

The solution might be to go to a second page where a list of topics is shown to 
select from.

An pair of listboxes with javascript moving items from left to right and 
vice-versa isn't allowed, and forcing a form submit on each choice doesn't seem 
right.







__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] setting width on items in a row

[Adam Hardy]

Hi

I'm looking for a simple solution to a width problem on a page showing rows of 
items with various other bits of info for each row.

I would like to keep the info in columns and to make the columns certain 
widths. 
I have only found a way of doing this by using tables, but I'd rather avoid 
tables because they are more heavyweight, less flexible while authoring and do 
not collapse gracefully when width of the viewport is small (i.e. this needs to 
look alright on a PDA screen without a horizontal scrollbar.)

Here's the HTML in questions:

http://www.gargantus.com/sylvie/list.html

In the first block on this page, I use a div per row and I can't find a way of 
setting width. The second block is a table.

I found setting the width on inline elements is only possible if they are 
floated, and then it is impossible to vertically align them

Any help would be appreciated,
Thanks
Adam
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] setting width on items in a row

[Adam Hardy]

Gunlaug Sørtun on 03/10/07 01:45, wrote:
> Adam Hardy wrote:
> 
>> I'm looking for a simple solution to a width problem on a page showing 
>> rows of items with various other bits of info for each row.
> 
>> http://www.gargantus.com/sylvie/list.html
>>
>> In the first block on this page, I use a div per row and I can't find
>>  a way of setting width. The second block is a table.
> 
> Are you thinking along these lines...?
> 
> http://www.gunlaug.no/tos/alien/ah/test_07_1003.html
> 
> I made no attempt to fine-tune anything, since I didn't want to change
> the source-code itself. Styles added in page-head.
> 
> A class for each "column" (or selectors that IE6 doesn't support), will
> improve things.


Yes I am thinking along those lines - and your solution is tantalisingly close, 
if only it behaved itself in IE6, which annoyingly drops the right-most inline 
box down to the next line for some reason. I was totally ignorant of the effect 
the overflow:hidden property here!

You've managed some sort of vertical alignment on the row, which comes out 
nicely despite using the float attribute. My attempts with float:left caused 
the 
vertical-alignment of the imgs to disappear and I struggled with it for ages. 
How did you do that?

Maybe I'm relying too much on the CSS as applied by firebug - I'm not 
completely 
confident about its capacity.

I've put my page up at the same address as above - why isn't CSS applying the 
same vertical-align: middle to those imgs? I don't see a reason when comparing 
it with yours (also above)

Regards
Adam
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] setting width on items in a row

[Adam Hardy]

Gunlaug Sørtun on 07/10/07 02:42, wrote:
> Notice that you have 103 validation errors in your page...
>  
> 
> ...while I have 0 - zero - in live copies of the very same page.
> 
> Notice also that I use the correct - and strict - doctype that reflects
> the source-code I serve.
> You OTOH are using the wrong - and transitional - doctype.
> Don't do that...
> 
> 
> Transitional means "almost standard" in Firefox and other non-IE
> browsers. That "almost standard" means non-standard treatment of images
> that are not aligned with real text in an element, which tends to give
> one appearance in non-IE browsers and another in IE.

I see those errors - caught out by Firefox again! I used the Firefox File menu 
'Save Page as' menu command to save that one page from the website with the 
style sheet and the images onto my public server. Unfortunately Firefox 
re-parsed the HTML and munged some of it, which is causing the validation 
errors.

I used Transitional because I use Java Server Pages and some of the helper code 
I used outputs  HTML. I'll ditch that now and use Strict. 
That JSP code was out-of-date anyway. I had no idea (again) that the 
transitional doc-type had that effect.

I put the fixed version up there in the same place: 
http://www.gargantus.com/sylvie/list.html

Thanks for the help!

Regards
Adam
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FIXED - setting width on items in a row

[Adam Hardy]

Adam Hardy on 07/10/07 16:45, wrote:
> Gunlaug Sørtun on 07/10/07 02:42, wrote:
>> Notice that you have 103 validation errors in your page...
>> <http://validator.w3.org/check?uri=http://www.gargantus.com/sylvie/list.html>
>>  
>>
>> ...while I have 0 - zero - in live copies of the very same page.
>>
>> Notice also that I use the correct - and strict - doctype that reflects
>> the source-code I serve.
>> You OTOH are using the wrong - and transitional - doctype.
>> Don't do that...
>> <http://www.gunlaug.no/contents/wd_additions_25.html>
>>
>> Transitional means "almost standard" in Firefox and other non-IE
>> browsers. That "almost standard" means non-standard treatment of images
>> that are not aligned with real text in an element, which tends to give
>> one appearance in non-IE browsers and another in IE.
> 
> I see those errors - caught out by Firefox again! I used the Firefox File 
> menu 
> 'Save Page as' menu command to save that one page from the website with the 
> style sheet and the images onto my public server. Unfortunately Firefox 
> re-parsed the HTML and munged some of it, which is causing the validation 
> errors.
> 
> I used Transitional because I use Java Server Pages and some of the helper 
> code 
> I used outputs  HTML. I'll ditch that now and use Strict. 
> That JSP code was out-of-date anyway. I had no idea (again) that the 
> transitional doc-type had that effect.
> 
> I put the fixed version up there in the same place: 
> http://www.gargantus.com/sylvie/list.html

I forgot to say, that fixes it all nicely!


Thanks again
Adam
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] one div's margin-top affecting neighbour

[Adam Hardy]

francky on 05/11/06 02:00, wrote:
> Adam wrote:
>> I have a page that's misbehaving in firefox 2.
>>  
>>
> ... hoho: and should misbehave in IE too, if IE was css standards 
> compliant... ;-)

Hi Francky,

is that just a throw-away one-liner or do you know why it doesn't work?

I liked your alternative but I made it the subject of another email, just to 
keep this one on topic, so if you had to try to resolve this issue (below), 
could you, or are you saying it's impossible?


Adam

>> I am trying to apply a graphical look to my main content divs using a 
>> set of images giving them rounded corners and shading.
>>
>> My approach is to use background images on divs absolutely positioned 
>> into the corners of the containing div, and z-indexed to go behind the 
>> content. Here's a snippet showing the image handling:
>>
>> 
>>   > style="top:0;left:0;background:url(c1.jpg) no-repeat top left;">
>>   
>>   > style="top:0;right:0;background:url(c2.jpg) no-repeat top right;">
>>   
>>   > style="left:0;background:url(bleft.jpg) repeat left;">
>>   >
>> style="right:0;background:url(bright.jpg);background-repeat:repeat;background-position:right;">
>>  
>>
>>   
>>   > style="bottom:0;left:0;background:url(c3.jpg) no-repeat bottom 
>> left;">
>>   
>>   > style="bottom:0;right:0;background:url(c4.jpg) no-repeat bottom 
>> right;">
>>   
>> 
>>
>>
>> Here's the problem: in firefox 2, the margin-top on 
>> customerSearchResultsHeader div is dragging down the background images 
>> on the Dialog image-holding divs, which surely shouldn't happen.
>>
>> You can see I need to push the column headings down, but it shifts the 
>> image too. Has anyone else come across this?
>>
>> This is the HTML: http://www.gargantus.com/sylvie/flow.htm
>>
>> I discovered a work-around by making the content divs absolute too, 
>> but I would rather leave them relative.


__
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] liquid corners (was: one div's margin-top affecting neighbour)

[Adam Hardy]

francky on 05/11/06 02:00, wrote:
> Adam wrote:
>> I am trying to apply a graphical look to my main content divs using a 
>> set of images giving them rounded corners and shading.
>>
[snip]

> Hi Adam,
> Maybe this can be usefull?
> 
>* 
> http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
> 
> It is without absolute positioning! :-)

OK, good, what you have is this:






...
...
...





and the reason for the classes on the two  elements is to remove the gap 
between the top box and the middle content box (see the description halfway 
down 
the page).

How about giving the top and bottom divs negative margins underneath and on top 
respectively instead?

I can't currently try out my theory because I'm at home on linux with no IE, 
but 
I'm looking at encapsulating the HTML for this in a java taglib for JSPs, and 
those classes on the  elements are the only things that stand in the way of 
a 
perfect solution.

regards
Adam
__
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] absolutely positioned box with relative content and absolute background imgs

[Adam Hardy]

Adam on 06/11/06 16:57, wrote:
> http://www.gargantus.com/sylvie/questions.html

I posted this a couple of days ago but I think with all the negative talk about 
being able to position things centrally in IE, it got ignored, so I'm posting 
this issue again with the difference that I don't actually want to centrally 
position it, it is just positioned more or less in mid-page, but with absolute 
co-ordinates.

However in IE the background images just don't work out. In FF it looks great 
though.

Can anyone tell me how to kick IE in the right place to make it work?


Thanks
Adam

__
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] Fluid Forms

[Adam Hardy]

Jonathan Lui on 08/11/06 04:05, wrote:
> hey all,
> 
> This is something I'm working on,
> 
> http://dev.r8dhex.net/stuff/sample1.htm
> 
> Long story short, this is for a web-application, target browsers is FF/IE6+.
> My goal is to have a variety of form-controls that look good in different
> configurations, and different resolutions. I'd also like the inputs to
> expand when there is enough space. I'm trying to move away from table-based
> designs, since this will eventually be server-generated, and it will be
> easier if each label/input pair is sufficiently encapsulated.
> 
> We used to have a 2-column table-based layout with fixed-size inputs
> depending on whether we need full-width or half-width, but if a user has a
> hi-res screen, the inputs spread out and leave big spaces in between. I
> tried using percentages, but then the inputs don't align properly along the
> right-side.
> 
> Anyway, I'm pretty happy with this version, but there are still some bugs
> that I can't fix. I'd like half-width to be really 50%, and full should be
> 100%, but IE has different ideas on what 100% means. IE also has problems
> aligning the right side of the inputs, I'd like the right side of the
> full-width input to line-up with the right-side of the 2nd-column inputs.
> The select doesn't line up properly as well. Right now it can't handle
> longer labels. It would also be better if the form would switch to 1-column
> layout if the inputs go below a certain width.

Hi Jonothan
it looks pretty good in FF but I don't know about IE - but from your 
description 
  of the what the problem is, I can't really tell what's causing the trouble. 
What I do know though is that the inputs won't expand to fill space. They come 
in a certain width, and that's your lot. You could use em's to set that width 
relatively to the browser font size.


Adam
__
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/