Foros del Web » Creando para Internet » CSS »

ordenar divs con css

 Estas en el tema de ordenar divs con css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/02/2011, 13:16
 
Fecha de Ingreso: febrero-2011
Mensajes: 2
Antigüedad: 13 años, 9 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
  #2 (permalink)  
Antiguo 16/02/2011, 16:09
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: ordenar divs con css
Una solución es dar la propiedad position:relative al contenedor #body.
El resto de los contenedores incluidos en él reciben posición absoluta (position:absolute) y estableces la posición de cada uno de ellos con top y left.

Otra solución es la siguiente:
El lateral derecho lo colocas al principio, por delante del izquierdo por ejemplo. A este lateral le das das la propiedad float:right.
Al resto le das float:left salvo al contenedor fondoabajo que lleva la propiedad clear:both.
En este otro caso te he centrado el contenedor #body.
Código HTML: 
Ver original
  1. <div id="body">
  2. <div id="lateralder"></div>
  3. <div id="lateralizq"></div>
  4. <div id="superiorgeneral"></div>
  5. <div id="superiorflotantemenu"></div>
  6. <div id="main"></div>
  7. <div id="pie"></div>
  8. </div>
Código CSS: 
Ver original
  1. #body {
  2.     font-family: Tahoma,Geneva,sans-serif;
  3.     font-size: 1em;
  4.     height: auto;
  5.     margin: 0 auto;
  6.     padding: 0;
  7.     width: 1194px;
  8. }
  9. #lateralizq {
  10.     background: none repeat scroll 0 0 #556677;
  11.     float: left;
  12.     height: 900px;
  13.     width: 59px;
  14. }
  15. #superiorgeneral {
  16.     background: none repeat scroll 0 0 #118899;
  17.     float: left;
  18.     height: 290px;
  19.     width: 1076px;
  20. }
  21. #superiorflotantemenu {
  22.     background: none repeat scroll 0 0 #661100;
  23.     float: left;
  24.     height: 90px;
  25.     width: 1076px;
  26. }
  27. #lateralder {
  28.     background: none repeat scroll 0 0 #224455;
  29.     float: right;
  30.     height: 900px;
  31.     width: 59px;
  32. }
  33. #main {
  34.     background: none repeat scroll 0 0 #FFFF22;
  35.     float: left;
  36.     height: 45px;
  37.     width: 1076px;
  38. }
  39. #pie {
  40.     background: none repeat scroll 0 0 #4455FF;
  41.     float: left;
  42.     height: 147px;
  43.     width: 1076px;
  44. }
  45. #fondoabajo {
  46.     background-color: #F2886E;
  47.     clear: both;
  48.     height: 34px;
  49.     width: auto;
  50. }
  #3 (permalink)  
Antiguo 16/02/2011, 16:09
Avatar de dreamkarkayu  
Fecha de Ingreso: junio-2010
Mensajes: 22
Antigüedad: 14 años, 5 meses
Puntos: 2
Respuesta: ordenar divs con css
Hola:

Veo que no dominas muybien el tema de los DIV. Los div son elementos que ocupan todo el ancho de la pagina. No puedes poner uno al lado de otro si no haces que floten (propiedad float).

Te recomendaria que, mientras estes creando la estructura, pongas bordes y alturas (estas al menos hasta que tengas contenido en los div's. Ya tendrás tiempo de quitar esas "guias" cuando domines un poco más el tema :)

Te he puesto bordes en los divs para guiarte (primera regla del CSS) y te he reorganizado los divs en el codigo HTML.

Yo he hecho que flote todo a la izquierda. Hay otras soluciones dependiendo de la dirección en la que los hagas flotar.

Espero que te sirva.

Código CSS: 
Ver original
  1. /* Esto lo pongo para que te guies */
  2.  div { border: 1px solid black;   }
  3.  
  4.   #envoltorio{
  5.     
  6.     font-family:Tahoma, Geneva, sans-serif;
  7.     font-size: 1.0em;
  8.     background-image:url(images/background1.jpg);
  9.     margin:0 auto;
  10.         padding:0;
  11.     width:1202px;  /* he tocado esta medida para que quepan los bordes */
  12.     height:auto; 
  13.        overflow: hidden;   
  14. }
  15.  
  16. #lateralizq {
  17.     
  18.     background:url(images/index_01.jpg);
  19.     width:59px;
  20.     height:900px;
  21.     float: left;
  22. }
  23.  
  24. #centro{
  25.  
  26.    float:left;
  27. }
  28.  
  29. #superiorgeneral {
  30.     
  31.     background:url(images/index_02.jpg);
  32.     width:1076px;
  33.     height:290px;
  34.     
  35. }
  36.  
  37. #superiorflotantemenu {
  38.     
  39.     width:1076px;
  40.     height:90px;    
  41. }
  42.  
  43.  
  44. #main {
  45.     
  46.     background:url(images/index_04.jpg);
  47.     width:1076px;
  48.     height:auto;    
  49. }
  50.  
  51. #pie {
  52.     
  53.     background:url(images/index_06.jpg);
  54.     width:1076px;
  55.     height:147px;
  56.     
  57. }
  58.  
  59.  
  60. #lateralder {
  61.     
  62.     background:url(images/index_03.jpg);
  63.     width:59px;
  64.     height:900px;
  65.         float: left;    
  66.  
  67. }
  68.  
  69.  
  70. #fondoabajo {
  71.     background-color:#f2886e;
  72.     width:1202px;
  73.     height:200px;
  74.     
  75. }


Código HTML:
<div id="envoltorio">
  <div id="lateralizq"></div>
  <div id="centro">
    <div id="superiorgeneral"></div>
    <div id="superiorflotantemenu"></div> 
    <div id="main"></div>
    <div id="pie"></div>
  </div>
  <div id="lateralder"></div>
</div>
<div id="fondoabajo">fondo abajo</div>
Al primer DIV le he llamado 'envoltorio' en vez de 'body' por que a mi no me gusta usar palabras del HTML para nombrar Id's o clases. Es una chorrada, lo se, pero para gustos, colores :)
Última edición por dreamkarkayu; 16/02/2011 a las 16:22 Razón: faltas de ortografía
  #4 (permalink)  
Antiguo 17/02/2011, 13:48
 
Fecha de Ingreso: febrero-2011
Mensajes: 2
Antigüedad: 13 años, 9 meses
Puntos: 0
Respuesta: ordenar divs con css
Genial, me habeis ayudado mucho.

Gracias sinceramente

Etiquetas: Ninguno
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:00.