listas de difinicion a dos columnas

dabas · #1 (**permalink**) 02/03/2009, 02:35

deseo mostrar una lista de deficinicion a dos columnas y se ve mal en Firefox y bien en Internet Explorer. aunque yo diria "se ve bien, solo que hay algo que hago mal", porque no entiendo que esta ocurriendo.
resulta que se pintan las columnas pero el firefox no permite ningun elemento a la derecha de los DT de la columna de la izquierda, y el explorer si que lo hace como quiero

Código HTML:

<html>
<head>

<style type="text/css">

.izq {
  border: 1px solid blue;
  padding:0;
  margin: 0;
  width: 45%;
  float: left;
  clear: left;
}
.der {
  border: 1px solid red;
  padding:0;
  margin: 0;
  width: 45%;
  float: right;
  clear: right;
}
.espacio {
  clear:both;
}

</style>

</head>

<body>

<dl>
<dt class="izq">item1</dt>
<dd class="izq">descripcion1</dd>
<dt class="der">item2</dt>
<dd class="der">descripcion2</dd>
<dt class="espacio"></dt>

<dt class="izq">item3</dt>
<dd class="izq">descripcion3</dd>
<dt class="der">item4</dt>
<dd class="der">descripcion4</dd>
<dt class="espacio"></dt>

<dt class="izq">item5</dt>
<dd class="izq">descripcion5</dd>

</dl>

</body>
</html>

como hacer que se vea bien las columnas?

gracias por vuestra ayuda

dabas · #2 (**permalink**) 02/03/2009, 09:34

sera algun bug de Firefox?

no le veo forma humana de hacer que se vea bien en firefox

lucasan · #3 (**permalink**) 02/03/2009, 10:28

Hay la posibilidad de que pongas la página para poder visitarla o por lo menos una captura de pantalla? así será mas facil ayudarte.

Saludos.

Mikmoro · #4 (**permalink**) 02/03/2009, 11:43

No sé a qué te refieres pero yo lo veo prácticamente igual en FF2 que en IE6 (columna azul izquierda y columna roja derecha).
¿Hablabas de otros navegadores?

jomaruro · #5 (**permalink**) 02/03/2009, 16:24

Hola:

Yo lo veo así, los item de la columna de la derecha a la altura de la descripción de la izquierda y tu quieres que los item de la derecha estén a la misma altura de los de la izquierda ¿no?, mira tu código:

Código:

        <dl>
            <dt class="izq">item1</dt>
            <dd class="izq">descripcion1</dd>
            <dt class="der">item2</dt>
            <dd class="der">descripcion2</dd>
            <dt class="espacio"></dt>
            <dt class="izq">item3</dt>
            <dd class="izq">descripcion3</dd>
            <dt class="der">item4</dt>
            <dd class="der">descripcion4</dd>
            <dt class="espacio"></dt>
            <dt class="izq">item5</dt>
            <dd class="izq">descripcion5</dd>
        </dl>

Te posiciona el item1 a la izquierda, después la descripción1 tambien a la izquierda, despues el item2 a la derecha ¿No?

Debería posicionar el item 1 a la izquierda, el item2 a la derecha, la descricion1 a la izquierda, la descripcion 2 a la derecha y así sucesivamente, entonces tendrías que cambiar el orden de la lista.

No se si me he explicado.

Saludos.

Mikmoro · #6 (**permalink**) 02/03/2009, 17:23

Ah, vaya si es eso ahora lo entiendo.
Creo que es mucho mejor en dos listas independientes.

jomaruro · #7 (**permalink**) 02/03/2009, 17:50

Cita:

Iniciado por Mikmoro

Creo que es mucho mejor en dos listas independientes.

Eso no se me había ocurrido.

Saludos.

dabas · #8 (**permalink**) 03/03/2009, 02:09

gracias por responder

no tengo publicado nada de esto, pero no hace falta, solo queria centrarme en esta lista

parece ser que por tema de accesibilidad no se puede partir una lista en dos. sabeis algo sobre esto?

de todas formas esto funciona perfectamente

Cita:

Iniciado por jomaruro

Debería posicionar el item 1 a la izquierda, el item2 a la derecha, la descricion1 a la izquierda, la descripcion 2 a la derecha y así sucesivamente, entonces tendrías que cambiar el orden de la lista.

con lo cual la lista la pinta bien asi

Código:

<dl>
   <dt class="izq">item1</dt>
   <dt class="der">item2</dt>
   <dd class="izq">descripcion1</dd>
   <dd class="der">descripcion2</dd>
   <dt class="espacio"></dt>

   <dt class="izq">item3</dt>
   <dt class="der">item4</dt>
   <dd class="izq">descripcion3</dd>
   <dd class="der">descripcion4</dd>
   <dt class="espacio"></dt>

   <dt class="izq">item5</dt>
   <dd class="izq">descripcion5</dd>

</dl>

salu2

jomaruro · #9 (**permalink**) 03/03/2009, 14:31

Cita:

Iniciado por dabas

parece ser que por tema de accesibilidad no se puede partir una lista en dos. sabeis algo sobre esto?

Hola:

A eso no te puedo responder porque no lo sé, pero ¿porqué no pruebas con una lista desordenada?

Código:

<ul>
   <li class="izq">item1</li>
   <li class="der">item2</li>
   <li class="izq">descripcion1</li>
   <li class="der">descripcion2</li>
   <li class="espacio"></li>
   <li class="izq">item3</li>
   <li class="der">item4</li>
   <li class="izq">descripcion3</li>
   <li class="der">descripcion4</li>
   <li class="espacio"></li>
   <li class="izq">item5</li>
   <li class="izq">descripcion5</li>
</ul>

Saludos.

Mikmoro · #10 (**permalink**) 03/03/2009, 16:38

Cita:

Iniciado por dabas

parece ser que por tema de accesibilidad no se puede partir una lista en dos. sabeis algo sobre esto?

No tengo el más mínimo indicio de que hacer dos listas en lugar de una sea algo inaccesible. Quizá alguien tenga alguna noción, pero la verdad es que lo dudo.

jomaruro · #11 (**permalink**) 03/03/2009, 17:01

Cita:

Iniciado por Mikmoro

No tengo el más mínimo indicio de que hacer dos listas en lugar de una sea algo inaccesible. Quizá alguien tenga alguna noción, pero la verdad es que lo dudo.

Hola:

No se si me equivoco pero yo interpreto que dabas se refiere a una sola lista dividida en dos partes no a hacer dos listas independientes, pero ya digo que no se si me equivoco.

Saludos

:adiios:

Mikmoro · #12 (**permalink**) 03/03/2009, 17:08

"parece ser que por tema de accesibilidad no se puede partir una lista en dos"

Pero es que hacer una lista en dos partes es hacer dos listas, ¿no?

Claro, no vas a dejar una lista sin cerrar, cerrar el div, abrir otro y comenzar una lista sin abrir

Eso no tiene ningún sentido, pero una lista en dos, son dos listas.

Un coche partido en dos no son dos coches, pero una carretera partida en dos son dos carreteras

Aresillo · #13 (**permalink**) 03/03/2009, 17:31

Así lo hice yo aquí:
Multi-Competencia

Y sí, una lista partida en dos, son dos listas..

Daniel Ulczyk · #14 (**permalink**) 03/03/2009, 17:41

Cita:

Iniciado por dabas

parece ser que por tema de accesibilidad no se puede partir una lista en dos. sabeis algo sobre esto?

Me hago a la idea que tal práctica no supone una barrera hacia la Accesibilidad Web.

Podría sí, presentarse como una objeción, de alguna manera (se me ocurre), el sin-sentido semántico de forzar una partición por que prevalezca un aspecto visual.

De todas maneras, si ese "parecer" tiene un fundamento, referencia o fuente; sería muy interesante que se diese a conocer ¿no es cierto?

Mikmoro · #15 (**permalink**) 03/03/2009, 17:44

Probad esto.

Igualito en FF y IE

Cita:

<html>
<head>
<style type="text/css">
dl {padding:0;
margin: 0;
width: 45%;}
dl.izq {float: left;}
dl.der {float: right;}
dl.izq dd, dl.izq dt {border: 1px solid blue;}
dl.der dd, dl.der dt {border: 1px solid red;}
dt {margin-top: 20px;}
</style>
</head>
<body>
<dl class="izq">
<dt>item1</dt>
<dd>descripcion1</dd>
<dt>item3</dt>
<dd>descripcion3</dd>
<dt>item5</dt>
<dd>descripcion5</dd></dl>

<dl class="der">
<dt>item2</dt>
<dd>descripcion2</dd>
<dt>item4</dt>
<dd>descripcion4</dd>
</dl>
</body>
</html>

Mikmoro · #16 (**permalink**) 03/03/2009, 17:45

Cita:

Iniciado por Daniel Ulczyk

De todas maneras, si ese "parecer" tiene un fundamento, referencia o fuente; sería muy interesante que se diese a conocer ¿no es cierto?

Así es. Estuve a punto de ponerlo en el anterior mensaje pero no quise parecer desconfiado en un primer mensaje.

jomaruro · #17 (**permalink**) 03/03/2009, 17:48

Cita:

Iniciado por Mikmoro

"
Un coche partido en dos no son dos coches, pero una carretera partida en dos son dos carreteras

Vale, un coche partido en dos son dos medios coches.

Saludos.

Mikmoro · #18 (**permalink**) 03/03/2009, 17:54

En mi ejemplo podria haber un problemita semántico en caso de mantener esa numeración y empeñarse que fuera el 1 a la izquierda y el 2 a la derecha, si no, tener varias listas diferentes, siempre y cuando estas sean realmente listas de definición, no presenta ningún problema de accesibildad (no tiene mucho sentido), ni semántico, a mi juicio.

dabas · #19 (**permalink**) 05/03/2009, 06:19

Cita:

Iniciado por Daniel Ulczyk

Me hago a la idea que tal práctica no supone una barrera hacia la Accesibilidad Web.

Podría sí, presentarse como una objeción, de alguna manera (se me ocurre), el sin-sentido semántico de forzar una partición por que prevalezca un aspecto visual.

De todas maneras, si ese "parecer" tiene un fundamento, referencia o fuente; sería muy interesante que se diese a conocer ¿no es cierto?

si, cierto, me cambie de proyecto y deje esto un poco a un lado.
estaba colaborando con un proyecto que exigen accesilidad web prioridad 2 y bueno hay una serie de directivas que se deben cumplir.

www[.]w3[.]org/TR/WCAG10-TECHS/

creo que aqui se puede ver todo eso.

y bueno me han dicho a grandes rasgos que
- el codigo fuente ha de seguir el mismo flujo que como se lee en un navegador (por lo tanto la solucion que puse anteriormente me imagino que no vale)
- todo lo que sea una lista se ha de representar adecuadamente. si lleva descripcion, lista de definicion, sino lista desordenada, o lista ordenada si indica algun orden.... y una sola lista (por eso decia que no se puede dividir en dos)
- las imagenes tendran un texto alternativo, para que se muestre en caso de no existir la imagen
- etc, etc

se puede hacer perfectamente con dos listas, o las que sean, pero si hay que ceñirse a estas directivas la presentacion sera muy rigida y dificil de hacer las cosas como uno la piensa

gracias por las opiniones

Mikmoro · #20 (**permalink**) 05/03/2009, 07:56

Cita:

Iniciado por dabas

- todo lo que sea una lista se ha de representar adecuadamente. si lleva descripcion, lista de definicion, sino lista desordenada, o lista ordenada si indica algun orden.... y una sola lista

se puede hacer perfectamente con dos listas, o las que sean, pero si hay que ceñirse a estas directivas la presentacion sera muy rigida y dificil de hacer las cosas como uno la piensa

Eso no son directivas: en todo caso, directrices de quien te encarga el trabajo (que él sabrá a qué responden), pero no directivas. No encontrarás nada al respecto en ningún tratado sobre accesibilidad. Y si no, como te dijo Daniel, pídele por favor que nos indique dónde está esa directiva y qué dice exactamente. Mi ejemplo sigue el flujo de lectura sin ningún problema, claro, como dije, siempre que los elementos no se llamen "item 1", "item 2", que imagino que no

En fin, caprichos.

dabas · #21 (**permalink**) 05/03/2009, 09:36

Cita:

Iniciado por Mikmoro

Eso no son directivas: en todo caso, directrices de quien te encarga el trabajo (que él sabrá a qué responden), pero no directivas. No encontrarás nada al respecto en ningún tratado sobre accesibilidad. Y si no, como te dijo Daniel, pídele por favor que nos indique dónde está esa directiva y qué dice exactamente. Mi ejemplo sigue el flujo de lectura sin ningún problema, claro, como dije, siempre que los elementos no se llamen "item 1", "item 2", que imagino que no

En fin, caprichos.

bueno directrices o como se diga :P

aqui se puede ver a lo que me refiero, ya lo he encontrado. apartado 5.3

www[.]discapnet[.]es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.html#gl-table-markup

y el ejemplo que has puesto Mikmoro, sigue un flujo visual correcto, pero el software que lee paginas web y las convierte en audio, lo leera en orden incorrecto

Mikmoro · #22 (**permalink**) 05/03/2009, 10:07

Cita:

Iniciado por dabas

y el ejemplo que has puesto Mikmoro, sigue un flujo visual correcto, pero el software que lee paginas web y las convierte en audio, lo leera en orden incorrecto

No, ya he dicho en dos ocasiones anteriores: "excepto que los elementos se llamen "item 1" e "item 2", que lo dudo.

¿Irán numerados de alguna manera como para saber que el primero está a la izquierda y el segundo a la derecha? en ese caso, como ya dije, tenemos un pequeño problema semántico. Pero si no es así, no hay razón para que importe cuál es el uno o el dos.

¿La directiva 5.3?

Cita:

5.3 No utilice tablas para maquetar, a menos que la tabla tenga sentido cuando se alinee. Por otro lado, si la tabla no tiene sentido, proporcione una alternativa equivalente (la cual debe ser una versión alineada ). [Prioridad 2]
Nota. Una vez que las aplicaciones de usuario soporten la colocación mediante hojas de estilo, las tablas no se deben utilizar para maquetar. Consultar también punto de verificación 3.3.
Técnicas para el punto de verificación 5.3.

Ni me imagino a qué te refieres ni qué relación tiene eso con las listas de definiciones, y mucho menos con que sólo pueda haber una.

dabas · #23 (**permalink**) 05/03/2009, 10:25

Y si accedemos al enlace donde indica "tabla alineada" dice:

Cita:

Tabla alineada
Proceso de interpretación de una tabla donde los contenidos de una celda se convierten en una serie de párrafos uno tras otro (Por ejemplo, página abajo). Los párrafos se sucederán en el mismo orden que las celdas definían en el documento original. Las celdas deben tener sentido cuando se lean en orden y deben incluir elementos estructurales (que generan párrafos, encabezamientos, listas, etc.), así la página tendrá sentido tras su transformación para ser leída línea a línea.

Mi lista no esta numerada, pero si lo estuviera no debe ocurrir lo que ocurre en este ejemplo cuando pulsamos la tecla "tabulador". ya que el orden de los elementos en el codigo HTML esta puesto en un orden que nos conviene.
espero dejar algo mas claro el asunto, no se explicarlo mejor:

Código HTML:

<html>
<head>
<style>
dl {padding:0; margin: 0; width: 45%;}
dl.izq {float: left;}
dl.der {float: right;}
dl.izq dd, dl.izq dt {border: 1px solid blue;}
dl.der dd, dl.der dt {border: 1px solid red;}
dt {margin-top: 20px;}
</style>
</head>
<body>
<dl class="izq">
<dt><a href='#'>item1</a></dt>
<dd><a href='#'>descripcion1</a></dd>
<dt><a href='#'>item3</a></dt>
<dd><a href='#'>descripcion3</a></dd>
<dt><a href='#'>item5</a></dt>
<dd><a href='#'>descripcion5</a></dd></dl>

<dl class="der">
<dt><a href='#'>item2</a></dt>
<dd><a href='#'>descripcion2</a></dd>
<dt><a href='#'>item4</a></dt>
<dd><a href='#'>descripcion4</a></dd>
</dl>
</body>
</html>

saludos

Mikmoro · #24 (**permalink**) 05/03/2009, 10:37

Ya no sé cómo decirlo: ¿los items se llaman así? ¿es imprescindible el orden por algún tipo de numeración? en ese caso, hace varios mensajes que he dicho el asunto semántico (de hecho en el primero que hablé de eso).
Si no es así, no tiene ningún sentido que te preocupes.
O no me lees o no quieres entender.
Establecer una relación entre esa pauta de accesibilidad y tu caso es echarle cierta imaginación.

dabas · #25 (**permalink**) 05/03/2009, 17:28

en algun momento nos entenderemos, no se...
la culpa es mia por preguntar si una lista se puede dividir en dos.

resulta que, todo empezo en ... xDD. tengo que retocar codigo html y css (una pequeña parte de un proyecto) para que cumpla las especificaciones XHTML, CSS y WAI-AA. no tuve que hacer gran cosa pero me tropece con la famosa lista de definicion <DL></DL>.

ademas tenemos un informe de auditoria (del que no voy a publicar nada) donde se comentan las pautas a grandes rasgos, dice en que fallan algunas paginas, etc etc, y no se si hablan de las paginas que estoy retocando, pero eso no es importante. con esto quiero decir que no me estoy inventando nada y es bastante serio el asunto.

...veamos, no tienen numeros, luego no esta numerada, pero si deben estar ordenados. la definicion que puse de "tabla alineada" esta clarisimo de como se lee una tabla convertida en una lista de dos columnas, creo yo vamos.

Mikmoro · #26 (**permalink**) 06/03/2009, 05:42

Cita:

Iniciado por dabas

ademas tenemos un informe de auditoria (del que no voy a publicar nada) donde se comentan las pautas a grandes rasgos, dice en que fallan algunas paginas, etc etc, y no se si hablan de las paginas que estoy retocando, pero eso no es importante. con esto quiero decir que no me estoy inventando nada y es bastante serio el asunto.

"del que no voy a publicar nada"
Qué extraña advertencia para alguien que busca ayuda.

No creo que nadie piense que te estés inventando nada

En fin, qué le vamos a hacer. No, creo que no, que no nos entenderemos al final.

La disposición de los elementos de una lista de definición no tiene nada que ver con las celdas de una tabla, en la que se ordenan horizontalmente de forma natural formando filas. De esa manera, en una tabla el orden lógico y natural sería de izquierda a derecha, no así en una lista, en la que el orden natural es de arriba a abajo.

Creo que esa directiva te ha confundido y no estás aplicando la lógica a una lista, que en nada se parece a una tabla.

P.D.: me gustaría que el auditor te dijera qué relación guardan la cantidad de listas (una o dos) con la accesibilidad.

Mikmoro · #27 (**permalink**) 06/03/2009, 17:53

Fíjate en esto: si tu lista fuera una tabla, estarías intentando leer las celdas en este orden:

porque en realidad los elementos DT y DD no forman una pareja indisoluble, y es de hecho lo que te está produciendo el problema: si la celda 2 (descripción 1) fuerza una nueva línea para estar debajo de la celda 1 (item 1) con clear: left, esto provoca un corte de la línea en el flujo del documento, por lo que la zona a la derecha de la celda 1 (item 1), la celda 3 (item 2) ya no está disponible, aunque ese item 2 esté flotado a la derecha.

Según tu teoría de la directiva 5.3 (que no tiene relación, créeme), estarías leyendo las celdas en un orden completamente equivocado. ¿Me explico?

dabas · #28 (**permalink**) 20/03/2009, 02:50

perdonar la demora en la respuesta, pero ya no colaboro en el proyecto y no le presto atencion a esto...

vale ahora ya entiendo las diferencias de visualizacion, ya que la propiedad clear provoca un corte en el flujo del documento (por eso aparece un espacio en blanco a la derecha).y la mejor forma de hacerlo seria con UL. yo lo haria asi.

en cuanto a la accesibilidad llegue a la conclusion de que es un rollo.

gracias por vuestra ayuda, en especial Mikmoro por currarse los ejemplos

Daniel Ulczyk · #29 (**permalink**) 20/03/2009, 09:20

Si bien he participado poco de esta conversación, he seguido la misma con mucho detenimiento y atención.
Hoy precisamente, intentando resolver un problema con características muy similares a algunos aquí planteados, he dado con un artículo de A List Apart.
Para el quiera, tenerlo como referencia, el enlace es:

CSS Swag: Multi-Column Lists

A mí (por mi caso) me ha sido muy útil.
Saludos!