2 vertical synchronized lists (liquid design) in Webmasters and Developers

Re: 2 vertical synchronized lists (liquid design)

Tue, 18 Nov 2008 08:04:09 EDT

geekamongus : If you are referring to accessibility, this article shows you how to construct accessible tables, which should keep you within the realm of Section 508 or whatever accessibility test you are seeking to pass.

»jimthatcher.com/webcourse9.htm

Re: 2 vertical synchronized lists (liquid design)

Tue, 18 Nov 2008 06:46:48 EDT

JAAulde :

said by alien9999999 :

I understand your sentiments, however; we ABSOLUTELY NEED blind-surfing certification.

I don't even know what that means. If you mean you need to be accessible to the blind, a table has nothing to do with that when used properly, as this would be. Tables are for tabular data.

Re: 2 vertical synchronized lists (liquid design)

Tue, 18 Nov 2008 05:54:03 EDT

alien9999999 : I understand your sentiments, however; we ABSOLUTELY NEED blind-surfing certification.
--
Alien is my name and headbiting is my game.

Re: 2 vertical synchronized lists (liquid design)

Fri, 14 Nov 2008 14:26:37 EDT

twizlar :

said by JAAulde :

said by geekamongus :

Seems like a good time to use a table.

Agreed. Moving away from tables is good, unless you're working with tabular data.

+1
--
Broadline Networks Inc.

Re: 2 vertical synchronized lists (liquid design)

Fri, 14 Nov 2008 09:30:02 EDT

JAAulde :

said by geekamongus :

Seems like a good time to use a table.

Agreed. Moving away from tables is good, unless you're working with tabular data.

Re: 2 vertical synchronized lists (liquid design)

Fri, 14 Nov 2008 09:03:18 EDT

geekamongus : Seems like a good time to use a table.

2 vertical synchronized lists (liquid design)

Fri, 14 Nov 2008 08:41:10 EDT

alien9999999 : I'm looking at the following:

<div class="results">  <div class="results_wrapper">    <div class="results_left">      <div class="item"><span class="result_value">example 1</span></div>      <div class="item"><span class="result_value">example 2: extremely long value here making this break over 2 lines...</span></div>      <div class="item"><span class="result_value">example 3</span></div>      <div class="item"><span class="result_value">example 4 is a bit longer.</span></div>    </div>    <div class="results_right">      <div class="item"><span class="result_subvalue">value 1</span><div class="clear-twoblocks"></div></div>      <div class="item"><span class="result_subvalue">value2</span><div class="clear-twoblocks"></div></div>      <div class="item"><span class="result_subvalue">example 3 is here the longest one, possibly resulting in 2 lines or more...</span><div class="clear-twoblocks"></div></div>      <div class="item"><span class="result_subvalue">example 4</span><div class="clear-twoblocks"></div></div>    </div>    <div class="clear-block"></div>  </div></div>

the idea is that the results_left div is as small as it should be (liquidly) and that the results_right is next to it.

when the data can be on 1 line, it works fine. but when the left or the right takes up 2 lines, it starts to give problems, it isn't aligned properly anymore.

The idea is to have a list of data which has a key and a value. So that the left side is aligned left and the right side is also aligned left, but it should start at the same X-position (but still as left as possible liquidly).

The alignment is the problem of course, i want the left and the right on the same starting line (no matter what) and the right side to start at the same X-position. but i can't use pixels because the one list has small keys and large values and another one has large keys and small values...

anyone any idea?

--
Alien is my name and headbiting is my game.