Tema: poner capa en el centro de dos capas laterales
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 07/11/2010, 03:32
Avatar de jomaruro
jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: poner capa en el centro de dos capas laterales
Hola:

Interpreto que menu_izq y menu_izq2 (así como menu_derecho y menu_derecho2) los quieres uno encíma de otro, en ese caso debes crear otro div col_iz en el que incluirás los menús de la izquierda (y otro col_der, para los menus de la derecha), algo así:

Código HTML: 
Ver original
  1. <body>
  2.     <div id="contenedor"> <!-- inicio contenedor -->            
  3.         <div id="cabecera"></div><!-- si kito el punto, se me ensima la capa barra_menu....no se por que??-->
  4.         <div id="barra_menu"></div>
  5.         <div id="col_iz">
  6.             <div id="menu_izq"></div>
  7.             <div id="menu_izq2"></div>
  8.         </div>
  9.         <div id="col_der">
  10.             <div id="menu_derecho"></div>
  11.             <div id="menu_derecho2"></div>
  12.         </div>
  13.         <div id="contenido">contenido de la pagina....CONSTRUCCION!</div>
  14.         <div id="footer"></div>
  15.     </div><!-- fin de contenedor -->
  16. </body>

Y en tu CSS:

Código CSS: 
Ver original
  1. #contenedor{ 
  2.     width: 720px; 
  3.     height:600px;
  4.     margin: 10px auto; 
  5.     background-color : #cfffff; 
  6.     position:relative;
  7. } 
  8.     
  9. #cabecera {
  10.     /*background-color:#FF00FF;*/
  11.     background : #FF00FF url(imagenes/cabecera-2.jpg) center no-repeat;
  12.     width:720px;
  13.     height:170px;
  14.     /*float:right;*/
  15.     top:10px;
  16. }
  17.  
  18. #col_iz {
  19.     float:left;
  20.     width:150px;
  21. }
  22.  
  23. #menu_izq {
  24.     background-color:#00F;
  25.     float:left;
  26.     width:150px;
  27.     height:150px;
  28. }
  29.  
  30. #menu_izq2 {
  31.     background-color:black;
  32.     float:left;
  33.     /*clear:both;*/
  34.     width:150px;
  35.     height:150px;
  36. } 
  37.  
  38. #col_der {
  39.     float:right;
  40.     width:150px;
  41. }
  42.  
  43. #menu_derecho {
  44.     background-color:green;
  45.     float:right;
  46.     width:150px;
  47.     height:150px;
  48. } 
  49.  
  50. #menu_derecho2 {
  51.     background-color:yellow;
  52.     float:right;
  53.     width:150px;
  54.     height:150px;
  55. } 
  56.  
  57. #barra_menu {
  58.     background : url(imagenes/barra-menu.jpg) center no-repeat;
  59.     width:720px;
  60.     height:30px;
  61.     /*clear:both;*/
  62. }
  63.  
  64. #contenido {
  65.     background-color:#FF0000;
  66.     width:100%;
  67.     height:300px;
  68.     /*clear:both;*/
  69.     margin:0;
  70. }

Saludos.