Pasar una tabla a divs

magovenecia · #1 (**permalink**) 16/10/2009, 15:51

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

loncho_rojas · #2 (**permalink**) 16/10/2009, 15:56

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

magovenecia · #3 (**permalink**) 16/10/2009, 17:36

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"> Titulo</div>
<div id="columizq"> columna izquierda </div>
<div id="columder">Esta es la columna derecha  </div>
<div id="centro"> contenido central </div>
<div id="columizq">  izquierda </div>
<div id="columder">Esta es la columna derecha  </div>
<div id="centro"> 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

loncho_rojas · #4 (**permalink**) 16/10/2009, 17:45

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

magovenecia · #5 (**permalink**) 16/10/2009, 18:30

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"> Cabecera</div>
<div id="columizq"> Esta es la columna derecha </div>
<div id="columder"> Esta es la columna derecha  </div>
<div id="centro"> contenido central </div>
<div id="columizqimg">  izquierda </div>
<div id="columderimg"> Esta es la columna derecha  </div>
<div id="centroimg"> contenido central </div>
<div id="pie">Pie</div>
</div>
</body>
</html>

Por adelantado muchas gracias

magovenecia · #6 (**permalink**) 16/10/2009, 18:33

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

kseso? · #7 (**permalink**) 17/10/2009, 07:00

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

jomaruro · #8 (**permalink**) 17/10/2009, 12:02

Hola:

+1

Saludos.