pasar de tabla/div a div/div...

vani18 · #1 (**permalink**) 29/10/2012, 22:09

hola no se bien el tema de maquetar con divs...
.. si masomenos se colocar cada tanto,, un div en un lugar

resulta que se me complico con el tema de poner uno al lado del otro , otro encima de otro....

si queria poner uno encima del otro , ambos tenian que ser position absolute.. pero si despues tenia que poner otro al lado de esos dos que estaban uno encima de otro tenia que ponerles floatleft.... a ambos y se me desparrama todo...

yo las cosas que hacia , las hacia con tablas pero ahora , no me salia esto de los div...

al final lo hice con tablas/divs...

vean, como es el resultados final... me pueden decir como va acomodado si quiero que todo sea div... intente hacerlo , pero ya estuve un tiempo con esto....

Código PHP:

              <table width="800px"  style="margin-left:-4px;" height="150px" border="0"> 
              <tr> 
                <td width="300">             <div style="width:300px;height:30px; background-color:blue;position:relative;">lklklk 
</div> 
            <div style="width:300px;height:120px; background-color:yellow;position:relative;">lklk 
</div> 
</td> 
                <td width="200">             
                 
                <div style="width:200px;height:120px; background-color:red; ">lklk 
</div> 
            <div style="width:200px;height:30px; background-color:green; ">fdffffffffff 
</div> 
</td> 
 
                <td width="300"> 
                <div style="width:280px;height:150px; background-color:orange; ">fdffffffffff 
</div> 
                 
                 
                </td> 
              </tr> 
            </table>

ese es el maquetado que ya tire la toalla y lo deje asi...

no se como seria con solo divs.. position absolute a algunos y otros no , float left a todos?

tommy_tony · #2 (**permalink**) 29/10/2012, 23:26

Hola , la solución sencilla al menos para mí sería con float:left y sería la siguiente

Código:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>tu titulo</title>
    
    	<style>
		
		#bloque_central{
			background-color:black;
			height:600px;
			width:900px;
			margin:auto;

			
		}
		#columna1{
			float:left;
		}
		#zona_azul{
			background-color:blue;
			width:300px;
			height:100px;
		}
		#zona_amarilla{
			background-color:yellow;
			width:300px;
			height:500px;

		}
		#columna2{
			float:left;
		}
		#zona_roja{
			background-color:red;
			width:300px;
			height:500px;
		}
		#zona_verde{
			background-color:green;
			width:300px;
			height:100px;
		}
		#zona_naranja{
			background-color:orange;
			height:300px;
			height:600px;		

		}



	</style>
</head>

<body>
 
	<div id="bloque_central">
		<div id="columna1">
			<div id="zona_azul"></div>	
			<div id="zona_amarilla"></div>
		</div>
		<div id="columna2">
			<div id="zona_roja"></div>
			<div id="zona_verde"></div>
		</div>
		<div id="columna3">
			<div id="zona_naranja"></div>
		</div>
	</div>

</body>
</html>

A mí no me suele gustar mucho leer , como que aburre pero siempre es bueno te recomiendo que leas sobre maquetación , si estas interesado claro en profundizarte en este tema de CSS. Saludos espero y te sirva

tommy_tony · #3 (**permalink**) 30/10/2012, 00:09

Me he dado cuenta de un error xD , pero bueno en zona_naranja reemplaza por este y aumente columna3 tal y como te lo dejo abajo.

#columna3{
float:left;
}
#zona_naranja{
background-color:orange;
width:300px;
height:600px;
}