Foros del Web » Creando para Internet » CSS »

Usar UL para crear layout de 3 columnas

Estas en el tema de Usar UL para crear layout de 3 columnas en el foro de CSS en Foros del Web. Estoy desarrollando un sitio que posee un layout de 3 columnas y lo estoy maquetando en XHTML estricto y CSS. El principal problema que tengo ...
  #1 (permalink)  
Antiguo 06/04/2006, 17:58
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Usar UL para crear layout de 3 columnas

Estoy desarrollando un sitio que posee un layout de 3 columnas y lo estoy maquetando en XHTML estricto y CSS.
El principal problema que tengo es que es un diseño "liquido" y las 3 columnas tienen un ancho variable y en todas las opciones que encontre en la red siempre hay alguna columna con ancho fijo o que usa imagenes de fondo para crear el efecto de columnas.
Si bien tras hacer muchas pruebas llegue a un resultado aceptable, en cada navegador el resultado se ve diferente (El principal problema lo da el usar margenes en %).
Entre tantas pruebas se me ocurrio probar usar una lista desordenada para lograr el efecto de las columnas y la verdad es que el resultado fue mejor que todos los que habia logrado.
Entonces, acá va lo que queria preguntar, ¿usar una UL para maquetar las columnas esta igual de mal que usar una tabla para hacerlo? no se si se entiendo mi dilema... la verdad yo creo que no es lo mas correcto, pero me gustaria conocer la opinion de gente mas especializada que yo.
__________________
oohh... quisiera ser godines!!!
  #2 (permalink)  
Antiguo 06/04/2006, 19:06
Avatar de jmn2k1  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires...
Mensajes: 489
Antigüedad: 16 años, 1 mes
Puntos: 2
yo creo que no es lo mas correcto, seria simplemente "no usar tablas" y estariamos olvidando el concepto de web semantica, que es en realidad lo importante... creo que deberias seguir intentando el efecto que querias con los elementos correspondientes...

Saludos!
__________________
JmN
  #3 (permalink)  
Antiguo 08/04/2006, 06:14
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
css3

Hola a todos.

Lamentablemente css2 no incluye ningún mecanismo para la disposición en multi-columnas,

Afortunadamente css3 si:

Código HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='es' lang='es'>
 <head> 
 <meta http-equiv='Content-Type' content='text/xml; charset=UTF-8'/>
 <title>tres columnas</title>
 <style type='text/css'>
div { -moz-column-count: 3; -moz-column-gap: 1em; }
 </style> </head>
<body>
<h1 lang='en'>Multi-columns in css3</h1>
<div> <q cite='http://www.w3.org/TR/css3-multicol/' lang='en'>
In the traditional CSS box model, the content of an element is flowed into the content box of the 
corresponding element. Multi-column layout introduces a new type of container between the content 
box and the content, namely the column box. Content is flowed into column boxes in the 
block-progression-direction, and column boxes (or "columns", for short) are flowed into content boxes 
in the inline-progression-direction. All columns of a content box have the same column width and column 
length. It is not possible to set properties/values on column boxes. For example, the background of a 
certain column box cannot be set and a column box has no concept of padding, margin or borders 
although they may in the future). The column box becomes the containing block for the block children 
(explicit or anonymous) of the element on which the columns are defined.
Between adjacent columns of the same element, there can be column gaps and column rules. Column gaps 
similar to padding areas in the sense that they take up space. Column rules are visually similar to 
borders, and they are described by the same values as borders. The column rule is placed in the middle 
of the column gap. Different from borders, column rules do not take up space.
In paged media, the size of columns is constrained by the page area.
Floats that appear inside multi-column layouts are positioned with regard to the column box where the 
float appears.
Content that extend outside the column box (e.g., long words and floats that are higher and/or wider 
than the column box) is clipped. This only applies to content for which the column box is the containing 
block (i.e., as if the column box had 'overflow:hidden').
Column boxes act as containing blocks for content in the columns. More specifically, column boxes act 
like block-level, table cell, and inline-block boxes as per CSS 2.1, section 10.1, item 2 [CSS21].</q> </div> 
</body> </html> 
  #4 (permalink)  
Antiguo 08/04/2006, 08:17
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Antes que nada gracias por sus respuestas.

jmn2k1: la verdad que yo pienso lo mismo que vos decis... creo que en el fondo queria ver si alguien me decia lo contrario y asi poder usarlo sin cargo de conciencia

Jorolo: SI bien eso que me mostras no era lo que necesitaba, es realmente maravilloso. De hecho todo lo que lei sobre CSS3 lo es. Creo que cuando todos los navegadores lo implementen el maquetado de un sitio va a ser mucho mas sencillo que usar tablas o lo que sea.

Saludos
__________________
oohh... quisiera ser godines!!!
  #5 (permalink)  
Antiguo 08/04/2006, 08:59
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola de nuevo.

Me alegro de que te gustase, y coincido con tus comentarios, con un matiz.

Esto es el futuro (css3), pero es usable hoy.
http://weblogs.mozillazine.org/roc/
  #6 (permalink)  
Antiguo 09/04/2006, 11:44
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola a todos.

Por si alguien tiene interés en esto de las multi-columnas.
  #7 (permalink)  
Antiguo 09/04/2006, 13:29
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
un notable artículo en A list apart...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #8 (permalink)  
Antiguo 10/04/2006, 13:08
Avatar de fullmental  
Fecha de Ingreso: octubre-2004
Ubicación: México DF, Xochimilco
Mensajes: 593
Antigüedad: 13 años, 1 mes
Puntos: 3
aunque no lo implementa es completamente posible, y no tan dificil.

utiliza float y veras que es posible
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:56.