Pasar este ejemplo a CSS

Jamati · #1 (**permalink**) 31/07/2008, 22:29

Este es mi codigo:

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table.tabla {width:550px;border:0;font:12px Arial;}
table.tabla td {height:35px;border-bottom:1px solid #000000;}
table.tabla td.tit {width:250px;background:#DD0000;}
table.tabla td.des {width:200px;background:#00CCCC;text-align:center;}
table.tabla td.link {width:100px;background:#E5E5E5;text-align:right;}

div.tabla {width:550px;border:0;font:12px Arial;position:relative;}
div.tabla span.tit {width:250px;font-weight:bold;position:absolute;top:0;left:0;background:#DD0000;}
div.tabla span.speech {width:250px;position:absolute;top:15px;left:0;background:#DD0000;}
div.tabla span.des {width:200px;position:absolute;top:0;left:250px;text-align:center;background:#00CCCC;}
div.tabla span.link {width:100px;position:absolute;top:0;left:450px;text-align:right;background:#E5E5E5;}
div.tabla span.link2 {width:100px;position:absolute;top:15px;left:450px;text-align:right;background:#E5E5E5;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="tabla">
<tr> 
<td class="tit"><b>TITULO DE PRUEBA</b><br>Descripción de prueba</td>
<td class="des">Prueba</td>
<td class="link">Prueba</a></td>
</tr>
<tr> 
<td class="tit"><b>TITULO DE PRUEBA</b><br>Descripción de prueba</td>
<td class="des">Prueba 1<br>Prueba 2</td>
<td class="link">Prueba 1<br>Prueba 2</a></td>
</tr>
</table>
<br>
<br>
<br>
<br>
<div class="tabla">
  <span class="tit">TITULO DE PRUEBA</span>
  <span class="speech">Descripción de prueba</span>
  <span class="des">Prueba 1</span>
  <span class="link">Prueba 2</span>
  <span class="link2">Prueba 3</span>
</div>
</body>
</html>

Tengo una tabla, la cual la quiero pasar a div, ul, span o lo que haga falta, solamente quiero que esté realizado sin tablas.

Entonces tratando de imitar al funcionamiento de la tabla, hice mi prueba con el llamado div.tabla.... pero hay cosas que no sabría realizar, por ejemplo:

1) está bien usar solo span y no ul ?

2) En el span.des al tener un solo renglon, quiero que aparezca a media altura, como el ejemplo de la tabla.

3) lo mismo con el span.link, y que si llega a tener el span.link2, se acomode solo como el otro ejemplo de la tabla.

4) en la tabla tengo solo la td.tit y a lo que quiero remarcarse debo agregarle la etiqueta <b>, entonces al pasarlo a CSS quiero hacerlo desde el archivo .css y por eso lo puse en otro span, está bien ?

me entiendo ?
bueno, perdón por lo extenso y desde ya agradezco sus ayudas.

PD: puse varios colores para distinguirlos

kazafun · #2 (**permalink**) 01/08/2008, 06:49

Llevas una cacao tremendo, no se como explicarte... mi consejo es que olvides las tablas COMPLETAMENTE, y empieces a estudiar CSS desde 0.
Usa las tablas exclusivamente para contenido tabular.

Mikmoro · #3 (**permalink**) 01/08/2008, 08:41

jamati:

Fíjate que yo lo creo es que eso que pones son justamente los datos tabulados de los que hablábamos.

Si tú tuvieras que presentar eso en un informe (tipo .doc, .rtf, .odt o lo que sea), ¿lo presentarías como una tabla visualmente o no parecería una tabla?. Esto lo que te podría hacerte decidir si los datos que estás presentando deberían verse como una tabla o no.

Yo he cogido tu código, lo he visto y a mi juicio diría que eso lo presentaría como una tabla de datos. Pero es sólo mi forma de verlo. Quizá sea por los colores de fondo que has puesto, como dices, pero a mi me parece una tabla.

Jamati · #4 (**permalink**) 01/08/2008, 09:13

Gracias por las respuestas, paso a comentar:

Quizás es verdad, conviene hacerlo en tablas el ejemplo, pero me gustaría que no sea así ya que las tablas te crean mucho código, entre el tr, td y todo eso es más dificil modificar aparte desde un block de notas que haciendo con ul, li o span... por eso quiero hacerlo sin tablas.

Aparte, sin tablas, manejando ul, li o span, desde el CSS puedo modificarlo y agregarle más utilidades más facilmente que en las tablas.

Saqué mi intento de pasarlo sin tablas, entonces adjunto mi codigo con tablas solamente:

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table.tabla {width:550px;border:0;font:12px Arial;}
table.tabla td {height:35px;border-bottom:1px solid #000000;}
table.tabla td.tit {width:250px}
table.tabla td.des {width:200px;text-align:center;}
table.tabla td.link {width:100px;text-align:right;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="tabla">
<tr> 
<td class="tit"><b>TITULO DE PRUEBA</b><br>Descripción de prueba</td>
<td class="des">Prueba</td>
<td class="link">Prueba</a></td>
</tr>
<tr> 
<td class="tit"><b>TITULO DE PRUEBA</b><br>Descripción de prueba</td>
<td class="des">Prueba 1<br>Prueba 2</td>
<td class="link">Prueba 1<br>Prueba 2</a></td>
</tr>
</table>
</body>
</html>

Entonces, en base a esto, quiero hacer lo mismo pero sin tablas. Mi pregunta sería como se hace para maquetar esto porque no me sale.

Mis dudas son:

1) En el td.des al tener un solo renglon, aparece a media altura, en cambio si tiene dos renglones, queda equiparado con la columna izquierda que siempre tendrá 2 renglones.... esto no lo pude hacer con span o ul.

2) lo mismo con el td.link, quiero que se acomode solo como la segunda fila del ejemplo.

3) en la tabla tengo td.tit y a lo que quiero remarcarse debo agregarle la etiqueta <b>, entonces no quiero ir agregando esta etiqueta siempre cuando lo puedo hacer en otro span por ejemplo y eso lo toco desde la clase.... ya que si el día de mañana quiero sacarle la negrita, no quisiera tener que entrar a uno por uno para sacarle ese atributo.

Algun ejemplo de ayuda ?, ya sé que soy muy extenso, pero no sé como explicarlo de otra forma.

Si ya se aburrieron, igualmente les agradezco su predisposición.

Saludos.

Fernand0 · #5 (**permalink**) 01/08/2008, 10:30

Si lo queres alineado como la gente.. no te va a quedar otra que usar tablas (o bueno.. matarte con DIVs y demas etiquetas -_-)....

No uses otro elemento porque te sea mas "laborioso" escribirlo.. porque al final va a terminar costandote mas (para algo esta cada elemento)... debe haber programas gratuitos de edicion por ahi en que no tenes que hacer demasiado..

Cita:

Iniciado por Jamati

1) En el td.des al tener un solo renglon, aparece a media altura, en cambio si tiene dos renglones, queda equiparado con la columna izquierda que siempre tendrá 2 renglones.... esto no lo pude hacer con span o ul.

DIVs creo que podrias usar(ya los expertos te diran que otra etiqueta podras usar)... pero sigue siendo mejor las tablas :/

Cita:

Iniciado por Jamati

3) en la tabla tengo td.tit y a lo que quiero remarcarse debo agregarle la etiqueta <b>

font-weight: bold;

Jamati · #6 (**permalink**) 01/08/2008, 11:28

gracias Fernand0:

por lo visto, el ejemplo que puse de las tablas, tal como dijo Mikmoro, a eso se llama precisamente "datos tabulados"... veré si me vuelvo loco y encuentro alguna forma de hacerlo con capas y que me quede igual.

Porque esta pagina la trabajo con bloc de notas, y al agregar y quitar tr y td me vuelvo loco y se me confunde mas, por eso quería usar otra cosa.

Si encuentro alguna solución se las paso, y si alguien encuentra otra solución, será bienvenida. Igualmente desde ya muchas gracias.

Saludos

Fernand0 · #7 (**permalink**) 01/08/2008, 11:56

Cita:

Iniciado por Jamati

1) En el td.des al tener un solo renglon, aparece a media altura, en cambio si tiene dos renglones, queda equiparado con la columna izquierda que siempre tendrá 2 renglones.... esto no lo pude hacer con span o ul.

2) lo mismo con el td.link, quiero que se acomode solo como la segunda fila del ejemplo.

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table.tabla {
	width:550px;
	border:0;
	font:12px Arial;
}
table.tabla td {
	height: 20px;
}
table.tabla td.tit {
	width:250px;
	padding-top: 12px;
	border-bottom:1px solid #000000;
	font-weight: bold;
}
table.tabla td.des {
	width:200px;
	text-align:center;
}
table.tabla td.link {
	width:100px;
	text-align:right;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="tabla">
<tr><td class="tit" colspan="3">TITULO DE PRUEBA</td></tr>
<tr><td>Descripción de prueba</td><td class="des">Prueba</td><td class="link">Prueba</td></tr>
<tr><td class="tit">TITULO DE PRUEBA</td><td class="tit" align="center">titulo 1</td><td class="tit" align="right">titulo 2</td></tr>
<tr><td>Descripción de prueba</td><td class="des">Prueba 1</td><td class="link">Prueba 1</td></tr>
<tr><td>Descripción de prueba 2</td><td class="des">Prueba 2</td><td class="link">Prueba 2</td></tr>
</table>
</body>
</html>

No habia leido bien.. disculpas.. ahi tenes la solucion... no uses <br>

Vos le podes poner el estilo que quieras.. pero para eso tenes que saber CSS..

saludos

Jamati · #8 (**permalink**) 01/08/2008, 12:35

es un buen ejemplo, pero no es necesariamente lo que yo estaba buscando... ya que el ejemplo que me pasaste, no queda igual al ejemplo mío de las tablas.

Donde está el título de prueba, eso siempre queda posicionado superiormente de las columnas que tendrá a la derecha... me explico ?

Igualmente muy valioso tu aporte y esperaré a ver si un iluminado en CSS me puede dar una mano....

no sabía que era tan complicado desde una tabla pasarla a capa.

Fernand0 · #9 (**permalink**) 01/08/2008, 12:58

yo veo posicionado TITULO DE PRUEBA arriba :/

si lo queres sin "titulo 1" y "titulo 2" lo modificas y ya... es basico..

proba esto a ver si es lo que queres...

Código:

table.tabla {
	width:550px;
	border:0;
	font:12px Arial;
}
table.tabla td {
	height: 20px;
	border-bottom:1px solid #000000;
}
table.tabla td.tit {
	width:250px;
	padding-top: 12px;
	font-weight: bold;
	border-bottom: 0;
}
table.tabla td.des {
	width:200px;
	text-align:center;
}
table.tabla td.link {
	width:100px;
	text-align:right;
}

y no hay que ser ningun iluminado.. con ponerse a leer y probar alcanza.. -_-

Cita:

no sabía que era tan complicado desde una tabla pasarla a capa.

no es complicado(si sabes..).. pero es mas rapido con tablas..

Mikmoro · #10 (**permalink**) 01/08/2008, 16:42

Como de costumbre, este código funciona perfectamente bien en FF, Opera y Safari, pero para IE habría que usar trucos sucios:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Jamati</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
div.tabla {width:550px;font:12px Arial;position:relative;display: table;}
div.titulo, div.prueba, div.prueba2 {height:35px;display: table-cell;vertical-align: middle;border-bottom:1px solid #000;}
div.titulo {width:250px;background:#DD0000;}
div.prueba {width:200px;background:#00CCCC;text-align: center;}
div.prueba2 {width:100px;background:#E5E5E5;text-align: right;}
span.tit, span.speech {display: block;}
div.tabla span.tit {font-weight:bold;padding-top: 2px;}
div.tabla span.speech {padding-bottom: 4px;}
div.tabla span.link {text-align:right;}
</style>
</head>
<body>
<div class="tabla">
<div class="titulo">
<span class="tit">TITULO DE PRUEBA</span>
<span class="speech">Descripción de prueba</span>
</div>
<div class="prueba">
<span class="des">Prueba 1</span>
</div>
<div class="prueba2">
<span class="link">Prueba 2</span><br/>
<span class="link">Prueba 3</span>
</div>
</div>
</body>
</html>

Jamati · #11 (**permalink**) 01/08/2008, 17:32

Excelente Mikmoro, eso es precisamente lo que quería hacer.

Lo probé, y te paso a comentar:

1) En IE se ve cada div uno debajo del otro
2) IE no reconoce la propiedad de vertical-align:middle

entonces si podemos (o mejor dicho si podés) resolver esto sería muy bueno. Yo leyendo en este foro, en muchos casos vi que vos usás los comentarios y si el explorador que se usa es IE, entonces construís la tabla, pero eso no me convence porque tardaría una eternidad en hacer un listado grande.

existe otra solución ??

Mil gracias a todos los que me ayudaron y contestaron mi consulta.

Mikmoro · #12 (**permalink**) 01/08/2008, 17:41

Cita:

Iniciado por Jamati

Lo probé, y te paso a comentar:

1) En IE se ve cada div uno debajo del otro
2) IE no reconoce la propiedad de vertical-align:middle

Esto es precisamente lo que decía cuando he puesto:

Cita:

pero para IE habría que usar trucos sucios:

Cita:

Iniciado por Jamati

Yo leyendo en este foro, en muchos casos vi que vos usás los comentarios y si el explorador que se usa es IE, entonces construís la tabla, pero eso no me convence porque tardaría una eternidad en hacer un listado grande.

En este caso no se necesita algo así. El primer problema se solucina fácil, añadiendo esto a la cabecera, justo debajo de la etiqueta de cierre </style>:

Cita:

El problema principal está en el centrado vertical, que hay que hacer algo más elaborado para IE.

Mikmoro · #13 (**permalink**) 01/08/2008, 17:57

El código completo con los retoques necesarios para IE:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Jamati</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
div.tabla {width:550px;font:12px Arial;position:relative;display: table;}
div.titulo, div.prueba, div.prueba2 {height:35px;display: table-cell;vertical-align: middle;border-bottom:1px solid #000;position: relative;}
div.titulo {width:250px;background:#DD0000;}
div.prueba {width:200px;background:#00CCCC;text-align: center;}
div.prueba2 {width:100px;background:#E5E5E5;text-align: right;}
span.tit, span.speech {display: block;}
div.tabla span.tit {font-weight:bold;padding-top: 2px;}
div.tabla span.des, div.tabla span.link {position: relative;top: -50%;}
div.tabla span.speech {padding-bottom: 4px;}
div.tabla span.link {text-align:right;}
</style>

</head>
<body>
<div class="tabla">
<div class="titulo">
<span class="tit">TITULO DE PRUEBA</span>
<span class="speech">Descripción de prueba</span>
</div>
<div class="prueba">
<div class="vertical">
<span class="des">Prueba 1</span>
</div>
</div>
<div class="prueba2">
<div class="vertical">
<span class="link">Prueba 2</span><br/>
<span class="link">Prueba 3</span>
</div>
</div>
</div>
</body>
</html>

Jamati · #14 (**permalink**) 01/08/2008, 20:08

Ahora ya es tarde y me está agarrando sueño... mañana lo pruebo bien tanto para IE como para FF y luego te comento.

Saludos