Foros del Web » Creando para Internet » CSS »

poner capa en el centro de dos capas laterales

Estas en el tema de poner capa en el centro de dos capas laterales en el foro de CSS en Foros del Web. La cuestion es esta; estoy haciendo una pagina...esto es lo que llevo... pero no logro colocar la capa roja(capa contenido) en el centro, me la ...
  #1 (permalink)  
Antiguo 06/11/2010, 02:07
Avatar de ryu_on_ice  
Fecha de Ingreso: abril-2005
Mensajes: 315
Antigüedad: 18 años, 11 meses
Puntos: 0
poner capa en el centro de dos capas laterales

La cuestion es esta; estoy haciendo una pagina...esto es lo que llevo...




pero no logro colocar la capa roja(capa contenido) en el centro, me la pone abajo y por consecuencia la capa footer se pierde y no se ve ya en el navegador...este es el codigo CSS de las capas involucradas...
Código:
#contenedor{ 
width: 720px; 
height:600px;
margin: 10px auto; 
background-color : #cfffff; 
position:relative;
} 
#cabecera {
background-color:#FF00FF;
background : url(imagenes/cabecera-2.jpg) center no-repeat;
width:720px;
height:170px;
float:right;
top:10px;
}
#menu_izq {
background-color:black;
float:left;
width:150px;
height:150px;
}
#menu_izq2 {
background-color:black;
float:left;
clear:both;
width:150px;
height:150px;
} 
#menu_derecho {
background-color:green;
float:right;
width:150px;
height:150px;
} 

#menu_derecho2
 {
background-color:red;
float:right;
width:150px;
height:150px;
} 
#barra_menu {
background : url(imagenes/barra-menu.jpg) center no-repeat;
width:720px;
height:30px;
clear:both;
}
#contenido {
background-color:#FF0000;
width:400px;
height:300px;
clear:both;
margin:0;
}
saludos y gracias!!
  #2 (permalink)  
Antiguo 06/11/2010, 04:00
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: poner capa en el centro de dos capas laterales

Hola:

¿Y el HTML? Porque hablas de tres capas (sin contar la cabecera y el menú) y yo cuento cinco y no sé si van unas dentro de otras o debajo o donde las quieres (debo ser un poco corto).

Saludos.
  #3 (permalink)  
Antiguo 06/11/2010, 04:08
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 13 años, 7 meses
Puntos: 8
Respuesta: poner capa en el centro de dos capas laterales

Tímidamente me atrevo a decir: es que no cabe y se pone debajo.
Prueba a hacerlo un pelín más pequeño (alguno de los floats).

O a lo mejor tenga algo que ver el clear:both, en vez de both, poner left o right, según el html (falta verlo!)

PD: espero haber acertado y no haber dicho ninguna barbaridad, como me pille alguien que yo sé le inflaré más su hinchado orgullo.

Última edición por Paramericano; 06/11/2010 a las 04:23
  #4 (permalink)  
Antiguo 06/11/2010, 05:37
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 13 años, 5 meses
Puntos: 48
Respuesta: poner capa en el centro de dos capas laterales

Añádele a las capas lo siguiente:

Capa Izquierda: float: left;
Capa Centro: float: left;
Capa Derecha: float: right;
  #5 (permalink)  
Antiguo 06/11/2010, 05:52
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: poner capa en el centro de dos capas laterales

Hola:

Cita:
Iniciado por Paramericano Ver Mensaje
como me pille alguien que yo sé le inflaré más su hinchado orgullo.
Esto suena a envídia.

Saludos.

  #6 (permalink)  
Antiguo 06/11/2010, 15:27
Avatar de ryu_on_ice  
Fecha de Ingreso: abril-2005
Mensajes: 315
Antigüedad: 18 años, 11 meses
Puntos: 0
Respuesta: poner capa en el centro de dos capas laterales

ok aqui esta el HTML....
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>.mipagina.</title>
<link href="Estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="contenedor"> <!-- inicio contenedor -->            
         <div id="cabecera">.</div><!-- si kito el punto, se me ensima la capa barra_menu....no se por que??-->
         <div id="barra_menu"></div>
         <div id="menu_izq"></div>
         <div id="menu_derecho"> </div>
         <div id="menu_izq2"></div>
         <div id="menu_derecho2"> </div>
         <div id="contenido">contenido de la pagina....CONSTRUCCION!</div>
         <div id="footer"></div>
</div><!-- fin de contenedor -->

</body>
</html> 
ok..puse las puras capas, sin contenidos ni nada....hice lo que me recomiendan pero no llego a nada...
saludos..
  #7 (permalink)  
Antiguo 06/11/2010, 18:45
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 13 años, 5 meses
Puntos: 48
Respuesta: poner capa en el centro de dos capas laterales

Mira, para ver si el problema radica en el tamaño... Prueba a ponerle las anchuras con porcentajes.

No obstante si pones el código que te dije anteriormente te tiene que funcionar, porque lo hago a diario... Y funciona así.

¿Tienes tu web colgada?

Tienes dos menú izquierda y dos menú derecha... ¿Eso a qué se debe? ¿Para centrarlos? Si es asi no son necesarios.

Saludos.
  #8 (permalink)  
Antiguo 07/11/2010, 03:32
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 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.     <div id="contenedor"> <!-- inicio contenedor -->            
  2.         <div id="cabecera"></div><!-- si kito el punto, se me ensima la capa barra_menu....no se por que??-->
  3.         <div id="barra_menu"></div>
  4.         <div id="col_iz">
  5.             <div id="menu_izq"></div>
  6.             <div id="menu_izq2"></div>
  7.         </div>
  8.         <div id="col_der">
  9.             <div id="menu_derecho"></div>
  10.             <div id="menu_derecho2"></div>
  11.         </div>
  12.         <div id="contenido">contenido de la pagina....CONSTRUCCION!</div>
  13.         <div id="footer"></div>
  14.     </div><!-- fin de contenedor -->
  15. </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.

  #9 (permalink)  
Antiguo 07/11/2010, 03:45
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 15 años, 7 meses
Puntos: 20
Respuesta: poner capa en el centro de dos capas laterales

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:



Esto suena a envídia.

Saludos.

y a cansino...

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #10 (permalink)  
Antiguo 15/11/2010, 20:40
Avatar de ryu_on_ice  
Fecha de Ingreso: abril-2005
Mensajes: 315
Antigüedad: 18 años, 11 meses
Puntos: 0
Respuesta: poner capa en el centro de dos capas laterales

OK despues de varios dias de una pausa involuntaria...esto es lo he podido conseguir.....

http://www.oldiesradiomusic.com/

jomaruro segui tu idea de y todo esta bien hasta en la parte del contenido....que no logro acomodarlo en el centro enrte las columnas izq y der....con sus respectivos cueadros cada una...
Código:
<body>
    <div id="contenedor"> <!-- inicio contenedor -->            
        <div id="cabecera"></div><!-- si kito el punto, se me ensima la capa barra_menu....no se por que??-->
        <div id="barra_menu"></div>
        <div id="col_iz">
            <div id="menu_izq"></div>
            <div id="menu_izq2"></div>
        </div>
        <div id="col_der">
            <div id="menu_derecho"></div>
            <div id="menu_derecho2"></div>
        </div>
        <div id="contenido">contenido de la pagina....CONSTRUCCION!</div>
        <div id="footer"></div>
    </div><!-- fin de contenedor -->
</body>
y el CSS para la capa contenido es este...
Código:
#contenido {
    background-color:#FF0000;
    width:420px;
    height:300px;
    /
    margin:0;
}
en la capa contenido pretendo colocar un baner en flash que este rotando info de la pagina...

sale pues gracias desde ya......
  #11 (permalink)  
Antiguo 19/11/2010, 13:45
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: poner capa en el centro de dos capas laterales

Hola:

Cambia en tu css lo siguiente:

Código CSS:
Ver original
  1. #contenido {
  2. background-color:#FF0000;
  3. width:100&#37;;
  4. height:300%;
  5. /*clear:both;*/
  6. float:left;
  7. margin:0;
  8. }

Y coloca el div contenido entre col_iz y col_der.

Saludos.



P.D.: No hagas caso a los trolls.
  #12 (permalink)  
Antiguo 22/11/2010, 18:47
Avatar de ryu_on_ice  
Fecha de Ingreso: abril-2005
Mensajes: 315
Antigüedad: 18 años, 11 meses
Puntos: 0
Respuesta: poner capa en el centro de dos capas laterales

jomaruro muchas gracias..ya quedo como lo queria poner.!!

aun me faltan detalles...pero en eso estamos.

saludos!!
  #13 (permalink)  
Antiguo 23/11/2010, 13:11
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: poner capa en el centro de dos capas laterales

Hola:

De nada, me alegra haberte ayudado.

Saludos.


Etiquetas: capas, centro, dos, poner
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




La zona horaria es GMT -6. Ahora son las 04:08.