Foros del Web » Creando para Internet » CSS »

Pasar una tabla a divs

Estas en el tema de Pasar una tabla a divs en el foro de CSS en Foros del Web. Hola compañeros, les queria hacer la siguiente pregunta, estoy montando una pagina en joomla y estoy tratatando de eliminar todas las tablas posibles y ando ...
  #1 (permalink)  
Antiguo 16/10/2009, 16:51
 
Fecha de Ingreso: octubre-2009
Mensajes: 4
Antigüedad: 8 años, 2 meses
Puntos: 0
Pasar una tabla a divs

Hola compañeros, les queria hacer la siguiente pregunta, estoy montando una pagina en joomla y estoy tratatando de eliminar todas las tablas posibles y ando perdido para eliminar la siguiente tabla que tengo en casi todas mis noticias, les agradeceria me indicaran como podria simular esta tabla pero con div.

Les dejo el codigo de ejemplo aquí

<table border="0" width="95%" align="center"><tbody><tr><td><table border="1" cellspacing="0" cellpadding="1" width="32%" bordercolor="#000000"><tbody><tr><td colspan="3"><div align="center"><strong>Texto 1 </strong><strong></strong> + fecha </div></td></tr><tr><td width="16%"><div align="center"><strong>Ciudad 1 </strong></div></td><td width="12%"><div align="center"><strong>Ciudad 2 </strong></div></td><td width="16%"><div align="center"><strong>Ciudad 3 </strong></div></td></tr><tr><td><div align="center">1,29</div></td><td><div align="center">6,40</div></td><td><div align="center">14,00</div></td></tr><tr><td><div align="center"><img src="images/imagen1.gif" border="0" width="75" height="16" /></div></td><td><div align="center"><img src="images/imagen2.gif" border="0" width="75" height="16" /></div></td><td><div align="center"><img src="images/imagen3.gif" border="0" width="75" height="16" /></div></td></tr></tbody></table></td></tr></tbody></table>

Por adelantado muchas gracias
  #2 (permalink)  
Antiguo 16/10/2009, 16:56
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 9 años, 1 mes
Puntos: 175
Respuesta: Pasar una tabla a divs

Cuanto nos pagaras por tu trabajo?

te doy una pista... un div en CSS se emplea con el operador #..

Puedes darle el tamaño que quieras con WIDTH

SI necesitas que se vean uno a lado de otro, los div afectados deben llevar FLOAT:

Si no quieres que otros div adyacentes se vean afactados con el FLOAT, usa CLEAR

MAS CLARO, AGUA!!

Seria importante puedas hacerlo tambien tú basado en esas hipotesis que te deje.. y no pedir disfrazadamente que te hagan el trabajo..

va con toda buena onda
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #3 (permalink)  
Antiguo 16/10/2009, 18:36
 
Fecha de Ingreso: octubre-2009
Mensajes: 4
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Pasar una tabla a divs

Hola de nuevo, he tratado de simular la tabla que tenia en div con este codigo

<head>
<meta name="generator" content="" />
<style>
#contenedor{
width:40%;
border: #000 1px solid ;
}
#titulo{
width:100%;
padding: 5px;
margin-bottom: 1px ;
background-color: rgb(213, 219, 225);
border: #000 1px solid ;
}
#columizq{
float: left;
width:33% ;
margin: 0;
margin-left: ;
padding: 5px;
background-color: rgb(235, 235, 235);
border-top: #000 1px solid ;
border-left: #000 1px solid ;
border-right: #000 1px solid ;

}
#columder{
float: right;
width: ;
margin: 0;
margin-left: ;
padding: 5px;
background-color: rgb(235, 235, 235)
border-top: #000 1px solid ;
border-left: #000 1px solid ;
border-right: #000 1px solid ;

}
#centro{
padding: 5px;
margin-left: ;
margin-right: ;
background-color: #CCCC99;
border-top: #000 1px solid ;
border-left: #000 1px solid ;
border-right: #000 1px solid ;
}
#pie{
width: ;
border: #000 1px solid ;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="titulo">&nbsp;Titulo</div>
<div id="columizq">&nbsp;columna izquierda </div>
<div id="columder">Esta es la columna derecha &nbsp;</div>
<div id="centro">&nbsp;contenido central </div>
<div id="columizq">&nbsp; izquierda </div>
<div id="columder">Esta es la columna derecha &nbsp;</div>
<div id="centro">&nbsp;contenido central </div>
<div id="pie">Pie</div>
</div>
</body>
</html>

pero me ha surgido dos dudas, que en la parte superior (div cabecera) al ponerlo width:100% es más ancho que el resto de las filas y no se como arreglarlo, y visto que si pongo 98% lo ajusto pero creo que eso sera de forma chapuza. Y quisiera saber porque al intentar poner las tres columnas al mismo porcentaje widht =33% (div columiz,div columder y div centro) se me descuadran.

Por adelantado muchas gracias y siento si mi anterior mensaje parecia un caradura
  #4 (permalink)  
Antiguo 16/10/2009, 18:45
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 9 años, 1 mes
Puntos: 175
Respuesta: Pasar una tabla a divs

Pon a tu Div cabecera una medida en Pixeles.. es decir width:950px; por ejemplo.. lo que ya contenga se adaptara al porcentaje.. o bien puedes utilizar el mismo porcentaje de tu tabla...

Es obligatorio usar porcentaje? prueba con pixeles como te dije..

En CSS no se puede repetir el ID.. es decir.. estas empleando varias veces elementos DIV con los mismo ID, cosa no valida.. para cada elemento ID, debes generar un estilo CSS con nombre distinto o usar el tipo CLASS, que se define mediante un punto (.) antes del nombre de la sentencia CSS
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #5 (permalink)  
Antiguo 16/10/2009, 19:30
 
Fecha de Ingreso: octubre-2009
Mensajes: 4
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Pasar una tabla a divs

Gracias por tus indicaciones que me han vuelto a servir de mucho, pero la idea es que el ancho fuera en % y no en pixeles, no se si se podria talvez maquillar con algun tipo de efecto en el borde o simplemente poniendolo a 98%.
He tratado de cambiar el ancho de las columnnas y como me indicabas he cambiado el nombra para cada celda en css, lo que no consigo es pones las tres al mismo ancho, mantengo la primera columna a 34% pero si trato de cambiar el porcentaje en las otras dos se me descuadra todo.¿Debo de aplicar alguna propiedad mas?.Dejo el codigo utilizado.

<head>
<style>
#contenedor{
width:40%;
border: #000 1px solid ;
}
#titulo{
width:98%;
padding: 5px;
margin-bottom: 1px ;
background-color: rgb(213, 219, 225);
border: #000 1px solid ;
text-align:center
}
#columizq{
float: left;
width:34% ;
margin-left: ;
padding: 5px;
background-color: rgb(235, 235, 235);
border-top: #000 1px solid ;
border-left: #000 1px solid ;
border-right: #000 1px solid ;
text-align:center

}
#columder{
float: right;
width: ;
margin: 0;
padding: 5px;
background-color: rgb(235, 235, 235)
border-top: #000 1px solid ;
border-left: #000 1px solid ;
border-right: #000 1px solid ;
text-align:center
}
#centro{
padding: 5px;
background-color: #CCCC99;
border-top: #000 1px solid ;
border-left: #000 1px solid ;
border-right: #000 1px solid ;
text-align:center
}
#columizqimg{
float: left;
width:34% ;
margin-left: ;
padding: 5px;
background-color: rgb(235, 235, 235);
border-top: #000 1px solid ;
border-left: #000 1px solid ;
border-right: #000 1px solid ;
text-align:center

}
#columderimg{
float: right;
width: ;
margin: 0;
padding: 5px;
background-color: rgb(235, 235, 235)
border-top: #000 1px solid ;
border-left: #000 1px solid ;
border-right: #000 1px solid ;
text-align:center

}
#centroimg{
padding: 5px;
width: %;
background-color: #CCCC99;
border-top: #000 1px solid ;
border-left: #000 1px solid ;
border-right: #000 1px solid ;
text-align:center
}
#pie{
width: ;
border: #000 1px solid ;
text-align:center
}
</style>
</head>
<body>
<div id="contenedor">
<div id="titulo">&nbsp;Cabecera</div>
<div id="columizq">&nbsp;Esta es la columna derecha </div>
<div id="columder">&nbsp;Esta es la columna derecha &nbsp;</div>
<div id="centro">&nbsp;contenido central </div>
<div id="columizqimg">&nbsp; izquierda </div>
<div id="columderimg">&nbsp;Esta es la columna derecha &nbsp;</div>
<div id="centroimg">&nbsp;contenido central </div>
<div id="pie">Pie</div>
</div>
</body>
</html>



Por adelantado muchas gracias
  #6 (permalink)  
Antiguo 16/10/2009, 19:33
 
Fecha de Ingreso: octubre-2009
Mensajes: 4
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Pasar una tabla a divs

Se me olvido en el anterior mensaje entre la columna central y la de la derecha la linea divisioria vertical no se llega a juntar entre el resto de las lineas, no se si puede ser por mi navegador IE8, pero el caso es que la otra linea vertical si llega a juntarse con las lineas horizontales. ¿A que puede ser debido?


Muchas gracias
  #7 (permalink)  
Antiguo 17/10/2009, 08:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Pasar una tabla a divs

Mira, Magovenecia, creo que mejor que esta línea que has emprendido sería que adquirieras una base mínima. Y para eso nada mejor que leas algo como puede ser el manual en .pdf que encontrarás en www.librosweb.es
Y para ver un caso real de conversión de una página en tablas a la misma realizada en xhtml+css, tienes las dos guías de Mikmoro en la cabecera de este foro.
Seguro que todos lo agradeceremos, tú el primero.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 17/10/2009, 13:02
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Pasar una tabla a divs

Hola:

+1

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 13:21.