Re: [css-d] Two inline lists - one left, one right
On Fri, 13 May 2005 04:57:59 -0700, Rob Freundlich <[EMAIL PROTECTED]> wrote: As far as I can tell, the float method will degrade in the above violation to stacking the items vertically, and the pos:relative method will caue visual overlapping. Either one will tell my user that they need to make the window wider, so I can live with either one. So, given all of that, is there any reason to choose one technique over the other? Well, you just outlined the reason to go with floats. They work the same as relative positioned elements, but floats break in a nicer way. Roman. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two inline lists - one left, one right
On Thursday, May 12, 2005 4:51 PM [GMT+0100=CET],Ingo Chao <[EMAIL PROTECTED]> wrote: > Rob Freundlich schrieb: >> I've been offered two approaches: >> My browser support requirements are IE 6 and Netscape 7. Both >> approaches work in both browsers. Given that, does either approach >> have an advantage over the other? > > I wonder why nobody has suggested: > "TILT: How to Stop Feeling Bad About Using Tables for Layout and Start > Enjoying Your Markup > http://glazkov.com/blog/archive/2005/05/02/476.aspx"; That's a very interesting article. I'm always amazed at what people can come up with to work around incompatibilities ... > I think the main problem with this and other ASCII art questions > without an URL is that we truly cannot answer them nor discuss the > answers because we don't know anything about > a) the content, and > b) the context. I generally agree with the above. However, this was a simple enough example that I did the quick easy thing instead of putting up a sample site and going into detail. (Rob's New Corollary to Murphy's Law: it's *never* as simple as it looks) Since it's clearly not quite enough (sorry about that!) to resolve my followup question, I'll add some detail now. I'm writing (or rather, revising) a web app for desktop intranet use, supporting IE6 and NS7. It emulates a semi-standard desktop app 3-panel layout: a nav tree on the left, and two panels (top for lists and bottom for details) on the right. In the list and detail panels, there are toolbars with actions that can be taken on the data in the panel. See http://home.comcast.net/~rob.freundlich/css/layout.png for a picture. The action items on the toolbar are grouped left and right. I'm implementing them as ULs. Under generally normal screen/window size, it is unlikely that the two lists will be large enough to meet in the middle. I'm fairly willing to accept odd appearance if the user decides to go small enough to violate that, since the data being displayed will not be useful at small window widths. As far as I can tell, the float method will degrade in the above violation to stacking the items vertically, and the pos:relative method will caue visual overlapping. Either one will tell my user that they need to make the window wider, so I can live with either one. So, given all of that, is there any reason to choose one technique over the other? Thanks, Rob __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two inline lists - one left, one right
Rob Freundlich schrieb: I've been offered two approaches: My browser support requirements are IE 6 and Netscape 7. Both approaches work in both browsers. Given that, does either approach have an advantage over the other? I wonder why nobody has suggested: "TILT: How to Stop Feeling Bad About Using Tables for Layout and Start Enjoying Your Markup http://glazkov.com/blog/archive/2005/05/02/476.aspx"; I think the main problem with this and other ASCII art questions without an URL is that we truly cannot answer them nor discuss the answers because we don't know anything about a) the content, and b) the context. regards, Ingo __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Two inline lists - one left, one right
I just came across this while searching, hopefully this helps? http://www.spartanicus.utvinternet.ie/left_and_right_alignment_using_css.htm >Note that when the lists are long and the window is short, they overlap: http://www.tora.us.fm/dugma/2lists.html (I have IE 6) >Note also, that putting the lists in a table solves the problem conveniently. >However, using tables is not "CSS correct"... >Is there a better way? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Two inline lists - one left, one right
> Note that when the lists are long and the window is short, they overlap: > http://www.tora.us.fm/dugma/2lists.html (I have IE 6) > > Note also, that putting the lists in a table solves the problem > conveniently. > However, using tables is not "CSS correct"... > > Is there a better way? > Maybe set a width:50% on both, and a margin-left:50% on the right one? - Leszek [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Two inline lists - one left, one right
Note that when the lists are long and the window is short, they overlap:
http://www.tora.us.fm/dugma/2lists.html (I have IE 6)
Note also, that putting the lists in a table solves the problem
conveniently.
However, using tables is not "CSS correct"...
Is there a better way?
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Ingo Chao
Sent: Thursday, May 12, 2005 1:32 PM
To: Rob Freundlich
Cc: CSS Discuss
Subject: Re: [css-d] Two inline lists - one left, one right
Rob Freundlich schrieb:
> Consider two lists:
>
>
> Left1
> Left2
> Left3
>
>
>
> Right1
> Right2
> Right3
>
>
> I'd like to format them such that the "Lefts" are flush-left on the page
and
> the "Rights" are flush-right on the page:
>
> Left1 Left2 Left3Right1 Right2 Right3
>
without floats:
ul {margin:0; padding:0; line-height:1em;}
li {display: inline;}
ul.right {text-align: right; display:block; position:relative; top:-1em;}
Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two inline lists - one left, one right
> Rob Freundlich schrieb:
>> Consider two lists:
>>
>> I'd like to format them such that the "Lefts" are flush-left on the
>> page and the "Rights" are flush-right on the page:
>>
>> Left1 Left2 Left3Right1 Right2 Right3
>>
I've been offered two approaches:
On Thursday, May 12, 2005 7:32 AM [GMT+0100=CET],Ingo Chao
<[EMAIL PROTECTED]> wrote:
> without floats:
>
> ul {margin:0; padding:0; line-height:1em;}
> li {display: inline;}
> ul.right {text-align: right; display:block; position:relative;
> top:-1em;}
On Thursday, May 12, 2005 6:58 AM [GMT+0100=CET],Roman Rudenko
<[EMAIL PROTECTED]> wrote:
> Just don't specify the width. The "mandatory width"
> requirement was dropped in CSS 2.1, and browsers deal with such floats
> quite fine, too.
My browser support requirements are IE 6 and Netscape 7. Both approaches
work in both browsers. Given that, does either approach have an advantage
over the other?
Thanks,
Rob
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two inline lists - one left, one right
Rob Freundlich schrieb:
Consider two lists:
Left1
Left2
Left3
Right1
Right2
Right3
I'd like to format them such that the "Lefts" are flush-left on the page and
the "Rights" are flush-right on the page:
Left1 Left2 Left3Right1 Right2 Right3
without floats:
ul {margin:0; padding:0; line-height:1em;}
li {display: inline;}
ul.right {text-align: right; display:block; position:relative; top:-1em;}
Ingo
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Two inline lists - one left, one right
On Thu, 12 May 2005 03:47:05 -0700, Rob Freundlich <[EMAIL PROTECTED]> wrote: The lists are code-generated, so I can't (for example) float the entire UL sections left and right because I don't know their widths. Yes you can. Just don't specify the width. The "mandatory width" requirement was dropped in CSS 2.1, and browsers deal with such floats quite fine, too. Roman. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
