Foros del Web » Creando para Internet » CSS »

Pasar este ejemplo a CSS

Estas en el tema de Pasar este ejemplo a CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/07/2008, 23:29
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Pasar este ejemplo a CSS

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
  #2 (permalink)  
Antiguo 01/08/2008, 07:49
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Respuesta: Pasar este ejemplo a CSS

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.
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #3 (permalink)  
Antiguo 01/08/2008, 09:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pasar este ejemplo a CSS

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.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 01/08/2008, 10:13
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 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.
  #5 (permalink)  
Antiguo 01/08/2008, 11:30
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 12 años, 2 meses
Puntos: 19
Respuesta: Pasar este ejemplo a CSS

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 Ver Mensaje
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 Ver Mensaje
3) en la tabla tengo td.tit y a lo que quiero remarcarse debo agregarle la etiqueta <b>
font-weight: bold;
  #6 (permalink)  
Antiguo 01/08/2008, 12:28
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Pasar este ejemplo a CSS

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
  #7 (permalink)  
Antiguo 01/08/2008, 12:56
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 12 años, 2 meses
Puntos: 19
Respuesta: Pasar este ejemplo a CSS

Cita:
Iniciado por Jamati Ver Mensaje
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
  #8 (permalink)  
Antiguo 01/08/2008, 13:35
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Pasar este ejemplo a CSS

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.
  #9 (permalink)  
Antiguo 01/08/2008, 13:58
Avatar de Fernand0  
Fecha de Ingreso: septiembre-2005
Ubicación: Buenos Aires
Mensajes: 610
Antigüedad: 12 años, 2 meses
Puntos: 19
Respuesta: Pasar este ejemplo a CSS



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..
  #10 (permalink)  
Antiguo 01/08/2008, 17:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pasar este ejemplo a CSS

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>
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 01/08/2008 a las 18:58
  #11 (permalink)  
Antiguo 01/08/2008, 18:32
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Pasar este ejemplo a CSS

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.
  #12 (permalink)  
Antiguo 01/08/2008, 18:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pasar este ejemplo a CSS

Cita:
Iniciado por Jamati Ver Mensaje
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 Ver Mensaje
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:
<!--[if IE]><style>div.titulo, div.prueba, div.prueba2 {float: left;}</style><![endif]-->
El problema principal está en el centrado vertical, que hay que hacer algo más elaborado para IE.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 01/08/2008, 18:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pasar este ejemplo a CSS

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>
<!--[if IE]><style>div.titulo, div.prueba, div.prueba2 {float: left;} .vertical {position: absolute;top: 50%;left: 0;width: 100%;} div.tabla span.speech {padding-bottom: 0px;}
</style><![endif]-->
</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>
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 01/08/2008, 21:08
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Pasar este ejemplo a CSS

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
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 09:41.