Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/02/2011, 13:16
eucabrera
 
Fecha de Ingreso: febrero-2011
Mensajes: 2
Antigüedad: 13 años, 2 meses
Puntos: 0
ordenar divs con css

Buenas tardes a todos.

Antes de emepezar, quisiera agradecer al que se moleste en solucionarme la duda su tiempo.

He buscado y he leido pero la verdad es que estoy un pco pegado con el tema de los css y los div. Siempre he usado tablas, pero en esta ocasión quiero usar divs.


He diseñado una web en photoshop y al exportar con el slice me crea una tabla con las imágenes.

Lo que yo quiero es simular esa tabla mediante divs pero no consigo ordenarlos para que formen el "puzzle"

este es el código css:

Código:
/* CSS Document */

#body{
	
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 1.0em;
	background-image:url(images/background1.jpg);
	margin:0;
    padding:0;
	width:1194px;
	height:auto;

 
     
}

#lateralizq {
	
	background:url(images/index_01.jpg);
	width:59px;
	height:900px;
}

#superiorgeneral {
	
	background:url(images/index_02.jpg);
	width:1076px;
	height:290px;
	
}

#superiorflotantemenu {
	
	width:1076px;
	height:90px;
	float:inherit;
	
}

#lateralder {
	
	background:url(images/index_03.jpg);
	width:59px;
	height:900px;
	

}

#main {
	
	background:url(images/index_04.jpg);
	width:1076px;
	height:auto;
	
}

#pie {
	
	background:url(images/index_06.jpg);
	width:1076px;
	height:147px;
	
}

#fondoabajo {
	background-color:#f2886e;
	width:auto;
	height:auto;
	
}

y este el html
Código:
<html>
<head>
<title>xxxxxxx</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta name="description" content="xxxxxxxxx">
<link rel="shortcut icon" href="img/xxxxxx.ico" type="image/x-icon" />
<link href="contents.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="body">
<div id="lateralizq"></div>
<div id="superiorgeneral"></div>
<div id="superiorflotantemenu"></div>
<div id="lateralder"></div>
<div id="main"></div>
<div id="pie"></div>
</div>
<div id="fondoabajo"></div>
</body>
</html>
adjunto el esquema en imagen para que se me entienda

[URL=http://img80.imageshack.us/i/ejemplob.jpg/][IMG]http://img80.imageshack.us/img80/8338/ejemplob.jpg[/IMG][/URL]

Uploaded with [URL=http://imageshack.us]ImageShack.us[/URL]


gracias de nuevo por soportar a los novatos