Ver Mensaje Individual
  #4 (permalink)  
Antiguo 01/08/2008, 09:13
Jamati
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años, 2 meses
Puntos: 3
Respuesta: Pasar este ejemplo a CSS

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.