Ayuda con div y table

j84625 · #1 (**permalink**) 20/09/2009, 09:51

Hola diseñe una tabla que se redirecciona automáticamente con un mínimo de 450x100 px y quiero saber si existe alguna forma de hacer lo mismo con las etiquetas div les dejo el código

Código HTML:



<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #000;
}
.NC {
	text-align: center;
	background-color: #FFF;
}
-->
</style></head>

<body>
<p>&nbsp;</p>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100"><img src="01.jpg" width="100" height="100" /></td>
    <td width="100%" class="NC"><div align="center"><img src="03.jpg" width="250" height="100" alt="IMG" /></div></td>
    <td width="0"><img src="02.jpg" alt="" width="100" height="100" /></td>
  </tr>
</table>
</body>

Aquí pueden ver el diseño de las tablas si reduden el tamaño de la ventana podrán notar como conserva su estructura sin deformaciones
http://exta.uni.cc/test/test.html

si no entienden algo preguntar y facilito mas información jejej

deirdre · #2 (**permalink**) 20/09/2009, 09:58

Hola j84625

Lo que yo no entiendo es esto "una tabla que se edirección".

La tabla que pones de ejemplo conserva su relación con la ventana (se reduzca o se amplíe) porque su valor de ancho lo tiene en porcentaje (valor líquido), de esa forma (en tu ejemplo) siempre tendrá el 90% del ancho de la ventana, seal cual sea el tamaño de la misma.

Bye

j84625 · #3 (**permalink**) 20/09/2009, 10:16

Cita:

Iniciado por deirdre

Hola j84625

Lo que yo no entiendo es esto "una tabla que se edirección".

La tabla que pones de ejemplo conserva su relación con la ventana (se reduzca o se amplíe) porque su valor de ancho lo tiene en porcentaje (valor líquido), de esa forma (en tu ejemplo) siempre tendrá el 90% del ancho de la ventana, seal cual sea el tamaño de la misma.

Bye

si lo se, pero lo que yo quiero es hacer lo mismo pero usando div y no tablas

deirdre · #4 (**permalink**) 20/09/2009, 10:39

Y que tal si empiezas creando un div que sea contenedor de toda la página y le pones un ancho líquido (si quieres el 90% mencionado u otro), y dentro de ese div vas colocando tus partes de la página, posicionándolas respecto al contenedor.

Bye

j84625 · #5 (**permalink**) 20/09/2009, 10:43

Cita:

Iniciado por deirdre

Y que tal si empiezas creando un div que sea contenedor de toda la página y le pones un ancho líquido (si quieres el 90% mencionado u otro), y dentro de ese div vas colocando tus partes de la página, posicionándolas respecto al contenedor.

Bye

hice algo similar pero cuando redusco el tamoño de la venta se descuadra
si me puedes hacer un ejemplo quisas no sea lo que yo hice

andresbetancourt · #6 (**permalink**) 20/09/2009, 11:22

averigua un poco mas sobre como convertir un div en tabla

aca te dejo un link

http://dotpress.wordpress.com/2007/0...ando-con-divs/

le das a los divs el comportamiento de tabla

este es otro de diseños de tablas

http://icant.co.uk/csstablegallery/

adios

j84625 · #7 (**permalink**) 20/09/2009, 13:41

Solucionado

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Radio Exta - Musica Radio Online</title>
<style type="text/css">
<!--
body {
	background-color: #0F0;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#apDiv1 {
	position:absolute;
	width:33.33%;
	z-index:1;
	background-color: #F00;
	height: 100px;
	color: #FFF;
	font-size: 36px;
	text-align: center;
}
#apDiv2 {
	position:absolute;
	width:33.33%;
	height:100px;
	z-index:2;
	clip: rect(auto,auto,auto,66.3%);
	background-color: #FF0;
	float: left;
	margin-left: 33.33%;
	font-size: 36px;
	text-align: center;
	color: #FFF;
}
#apDiv3 {
	position:absolute;
	width:33.33%;
	height:100px;
	z-index:3;
	margin-left: 66.66%;
	background-color: #00F;
	color: #FFF;
	font-size: 36px;
	text-align: center;
}
-->
</style></head>

<body>
<div id="apDiv1">1</div>
<div id="apDiv2">2</div>
<div id="apDiv3">3</div>
</body>
</html>