Foros del Web » Creando para Internet » CSS »

centrado de varias capas

Estas en el tema de centrado de varias capas en el foro de CSS en Foros del Web. Buenas gente tengo muchas dudas sobre las capas, y espero los masters del css me guien :)... para empezar me creo una capa central centrada ...
  #1 (permalink)  
Antiguo 21/10/2009, 12:44
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 3 meses
Puntos: 49
centrado de varias capas

Buenas gente tengo muchas dudas sobre las capas, y espero los masters del css me guien :)...

para empezar me creo una capa central centrada de unos 800px para ello hago

Código css:
Ver original
  1. <div style="margin: 0 auto;width: 800px;">
  2. </div>

hasta aqui todo bien, pero dentro de esa capa quiero crear tres columnas para ello se que se usa float:left; por ejemplo, pero resulta que me fijo que si pongo contenido en alguna de las 3 capas con float:left; la capa principal no crece, en concecuencia no hace height?

Código css:
Ver original
  1. <div style="margin: 0 auto;width: 800px;">
  2. <div style="width: 200px;float:left;">asdasd<br />asfdsdf</div>
  3. <div style="width: 400px;float:left;">asdasd<br />asfdsdf</div>
  4. <div style="width: 200px;float:left;">asdasd<br />asfdsdf</div>
  5. </div>

me di cuenta al poner un border: 1px solid #BB0000; a la capa principal....
para que esto? es para poner un background a la capa principal.

esa es una pregunta, la segunda es, tengo esas mismas tres capas...
pero la capa 1 y 2 puede que a veces no tenga contenido, entonces me pidieron que la capa central de 400px abarque la capa que no tiene contenido, o sea
en el caso de que la capa 1 de 200px no tenga contenido, la capa central tome la capa 1 y se le sume llegando a los 600px, y lo mismo con la capa 3, con lo cual en el caso de no haber contenido en la capa 1 y 3 la capa central sea de 100%
alguna idea? solucion esta pregunta me aflije y preocupa mas que la anterior, espero me puedan ayudar, si necesitan mas datos me dicen, saludos.
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #2 (permalink)  
Antiguo 21/10/2009, 14:41
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: centrado de varias capas

Hola:

A la capa principal añadele overflow:auto

La segunda pregunta con CSS no se puede deberás utilizar algún lenguaje de programación Javascript, AJAX, PHP, ASP, etc.

Saludos:

  #3 (permalink)  
Antiguo 21/10/2009, 15:39
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: centrado de varias capas

Cita:
Iniciado por jomaruro Ver Mensaje
La segunda pregunta con CSS no se puede deberás utilizar algún lenguaje de programación Javascript, AJAX, PHP, ASP, etc.
Me odiarás, Jomaruro, lo se
Para pruebas, sólo tienes que poner los fondos iguales y suprimir los <h3> de las columnas adyacentes a <div id="centro">

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 21/10/2009, 16:10
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: centrado de varias capas

Hola:

Cita:
Iniciado por kseso? Ver Mensaje
Me odiarás, Jomaruro, lo se
Nooo, nunca por estos motivos.

Lo que pasa es que tengo una mente un poco retorcida y mi primer pensamiento fue que la desaparición de alguna de las capas se debiera a alguna condición externa (si es más tarde de las 23 horas no hay contenido) no detectable, lógicamente, con CSS pero si con algún lenguaje de programación.

No sé si me he explicado correctamente (más que nada porque no se me ocurría ningún ejemplo claro).

Saludos.

  #5 (permalink)  
Antiguo 21/10/2009, 21:14
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 3 meses
Puntos: 49
Respuesta: centrado de varias capas

muchas gracias, la verdad esto me viene como anillo al dedo :)
necesitaba algo ajustable de css y no de otro lenguaje por que es para una plantilla en joomla y sabemos que estas manejas modulos y el central lo necesitaba estirar automaticamente al ancho completo, la verdad me cabecee sin lograr nada se agradece mucho este tips saludos ;)
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #6 (permalink)  
Antiguo 21/10/2009, 21:39
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 3 meses
Puntos: 49
Respuesta: centrado de varias capas

problemon amigo kseso? lo adapte a 3 lineas para ocuparlo y en firefox va ok, pero en el IE :P pa variar no me funciona. alguna idea te dejo codigo...


Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding:0; outline: none; border: 0;}
  7. body {font-size:99%; font-family:sans-serif; background:#FFFFFF;}
  8. div.prueba {border: 1px solid #BB0000;}
  9. #header {margin: 0 auto;width: 742px;overflow:auto;}
  10. #contenedor2 {margin: 0 auto;width: 742px;overflow:auto;}
  11.  
  12. #centro-izquierda {float:left; width:180px; padding:10px; background:#91D0D0;}
  13. #centro-izquierda {background: #50D0D0}
  14. #centro-derecha {float:right; width:180px; padding:10px; background:#65684A;}
  15. #centro-derecha {background: #27684A;}
  16. #centro {background:#e0e0e0; margin-top:10px; overflow:hidden;}
  17.  
  18. #centro-izquierda, #centro, #centro-derecha {padding-bottom:10000px; margin-bottom:-10000px;}
  19.  
  20. #contenedor {overflow:hidden; background:#e0e0e0;display:inline-block; min-width:742px;}
  21. .caja-top {margin: 0 auto;width: 742px;}
  22. <!--[if lte IE 7]>
  23. <style type="text/css">
  24. #centro {float:left; display:inline; margin-left:10px; margin-right:10px;}
  25. #contenedor {display:inline-block; width: expression(document.body.clientWidth < 743? "742px": "auto" );}
  26. </style>
  27. <![endif]-->
  28. </head>
  29. <div id="header" class="prueba">
  30. <div class="caja-top">
  31. Aki Banner y demas<br>
  32. Banner imagenes y demces
  33. </div>
  34. </div>
  35. <div id="contenedor2" class="prueba">
  36. <div id="contenedor">
  37. <div id="centro-izquierda">
  38. fg
  39. </div>
  40. <div id="centro-derecha">
  41. asdassdgsdfgdgdfgsdfgdsf dfgsdgsdfgsdfg
  42. sdgsdfg sdfgdsf gsdf d
  43. gsdfgdfgdsfgdg   dgsdfg sdfgdfsg
  44. </div>
  45. <div id="centro" style="text-align:justify;">
  46. <h3>Centro variable</h3>
  47. Al utilizar el 'min-width' no hay colapsos. El scroll horizontal aparece en una resoluciones menor a 1.024px
  48. Puedes incluir en #contenedor un 'max-width', y su equivalente para ie, para evitar problemas estéticos en pantallas de "cine"
  49. Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat.
  50. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit
  51. suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.
  52. Cursus eget nulla libero fringilla tellus In elit et at felis. Vitae id in et risus elit Sed enim Nunc ac adipiscing. Ut massa leo nec
  53. leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue
  54. tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</div>
  55. </div>
  56. </div>
  57. </body>
  58. </html>
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #7 (permalink)  
Antiguo 21/10/2009, 22:09
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: centrado de varias capas

Cita:
Iniciado por kaninox Ver Mensaje
problemon amigo kseso? lo adapte a 3 lineas para ocuparlo y en firefox va ok, pero en el IE :P pa variar no me funciona. alguna idea te dejo codigo...
En que versión de IE no funciona?, lo he probado en el 6 y 7 y funciona bien, al quitar las laterales la central cubre todo o si se saca una también cubre el resto.

PD: Elías:excelente, el sistema no me dejo nuevamente darte Karma
__________________
WFC
codigo82
  #8 (permalink)  
Antiguo 21/10/2009, 22:34
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 3 meses
Puntos: 49
Respuesta: centrado de varias capas

probaste el codigo que puse yo?
no me funciono en IE 7 sera que se me paso algo, gracias y si a mi tampoco me dejo darle de nuevo karma :P

saludos
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #9 (permalink)  
Antiguo 21/10/2009, 22:39
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: centrado de varias capas

si, lo probé en el 6 y 7, probá a borrar las cookies de tu navegador, quizás son tus temporales.
__________________
WFC
codigo82
  #10 (permalink)  
Antiguo 22/10/2009, 05:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: centrado de varias capas

Kaninox, me alegra que te sea útil. Pero ajústalo bien a esa situación. Cuando lo hice no fue pensando en que desapareciese el contenido de una de las adyacentes sino la caja. Y como siempre se dice en estos casos: "con cada cambio su verificación".

Hey, amigo Willy.
Me está bien empleado que no puedas, porque lo puse sólo por llevarle la contraria a Jomaruro Y ahora me queda recuperar un tema para el tema de las horas y ya me apedreas

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 22/10/2009 a las 05:34
  #11 (permalink)  
Antiguo 22/10/2009, 05:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: centrado de varias capas

Cita:
Iniciado por jomaruro Ver Mensaje
Lo que pasa es que tengo una mente un poco retorcida y mi primer pensamiento fue que la desaparición de alguna de las capas se debiera a alguna condición externa (si es más tarde de las 23 horas no hay contenido)...
Hazme vudú, José Manuel
http://www.forosdelweb.com/f53/cambi...matico-601804/
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 22/10/2009, 09:25
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 3 meses
Puntos: 49
Respuesta: centrado de varias capas

pues no hay caso :( por que en Firefox me resulta y en el maldito IE no



que es lo que quiero, por el tema de los jdoc de joomla, si fuere por codigo para mi es facil sacar la caja pero los modulos del fuckin joomla se deben mantener, ya estoy empezando a odiar Joomla en mi lista :P
se supone que es un CMS para solucionarte la vida pero para cada cosa un modulo :/ bueno cualquier ayuda es bienvenida ;)
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #13 (permalink)  
Antiguo 22/10/2009, 09:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: centrado de varias capas

Pero con joomla los módulos puedes controlarlos al punto de indicar con exactitud en qué apartados aparecerán y en cuáles no, por lo tanto, siempre podrás decirle que en las secciones que no va a haber contenido en la columna izquierda no la ponga, ¿no?

Para eso tendrás en el index un IF tipo:
Cita:
<?php if ($showLeftColumn) : ?>
<div id="left">
...
<jdoc:include type="modules" name="user1" style="lo que sea" headerLevel="3" />
</div>
<?php endif; ?>
donde lo podrás controlar, creo yo.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 22/10/2009, 09:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: centrado de varias capas

Y además de la información de Mik, si el problema con ie es porque matiene el tamaño de la caja estando vacía y no permite el solapamiento, bastaría con retirar ese tamaño y que la anchura se la de un hijo (por ejemplo p). Sólo es cuestión de imaginación cuando se "juega" con css
Sin verificar en distintas situaciones, ni ajustar los detalles:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding:0; outline: none; border: 0;}
  7. body {font-size:99%; font-family:sans-serif; background:#333;}
  8.  
  9. #header {background:#521E39;}
  10.  
  11. #izquierda {float:left; padding-top:10px; background:#91D0D0; margin-right: 10px;}
  12. #izquierda p { width:180px;}
  13. #derecha {float:right; width:180px; padding:10px; background:#65684A; margin-left: 10px;}
  14.  
  15. #centro {background:#e0e0e0; padding-top:10px; overflow:hidden;}
  16.  
  17. #contenedor {overflow:hidden; background:#444; width:995px; margin: 0 auto;}
  18.  
  19. #izquierda, #centro, #derecha {padding-bottom:10000px; margin-bottom:-10000px;}
  20.  
  21. #footer {clear:both; background:#191919;}
  22.  
  23. .caja-top {padding:10px;}
  24. .caja-top img {background:#FFFFFF; display:inline; float:left;}
  25. h1 {font-size:3em; margin:0; padding:10px 0; color:#fff; font-family: monospace;}
  26. h3 {font-size:1.8em; margin:0; padding:8px 0; font-family: serif;}
  27. p {font-size:1em; line-height:1.5em; margin:0; padding:5px;}
  28. #footer p, #header p, #derecha p {color:#fff;}
  29. .monospace {font-family: monospace; font-size: 1.2em; background: #FF6600;}
  30. .codigo {font-family: monospace; font-size:1em; letter-spacing: .1em; border: 1px solid #f5f5f5; color: #f5f5f5; background:#191919;}
  31. </head>
  32.  
  33.         <div id="header">
  34.             <div class="caja-top">
  35.                <img src="http://www.forosdelweb.com/customavatars/avatar184738_14.gif" alt="un pequeña imagen de adorno" />
  36.                 <h1>- KSESO? Jugando con CSS -</h1>
  37.                 <p>Layout de tres columnas equilibradas, las laterales fijas y la central ocupando el resto de espacio. Si suprimes una de las laterales, su espacio es ocupado por la central.</p>
  38.             </div>
  39.         </div>
  40.  
  41.         <div id="contenedor">
  42.             <div id="izquierda">
  43.                    
  44.                     <!--
  45.                     <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
  46.          -->
  47.                 </div>
  48.             <div id="derecha">
  49.                     <h3>Derecha</h3>
  50.                     <p class="monospace">Puedes cambiar el valor de la anchura de las columnas laterales. <br/>
  51.           Admiten valores en px, % o en em. Es indiferente.</p>
  52.                     <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
  53.           <p>Cursus eget nulla libero fringilla tellus In elit et at felis. Vitae id in et risus elit Sed enim Nunc ac adipiscing. Ut massa leo nec leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</p>
  54.             </div>
  55.             <div id="centro">
  56.                     <h3>Centro variable</h3>
  57.                     <p>Esta caja ocupa el espacio restante que dejan las columnas laterales. Si se oculta una de ellas, se expande para rellenar el espacio liberado por ella.</p>
  58.                     <p>Al utilizar el 'min-width' no hay colapsos. El scroll horizontal aparece en una resoluciones menor a 1.024px<br />
  59.           Puedes incluir en #contenedor un 'max-width', y su equivalente para ie, para evitar problemas estéticos en pantallas de "cine"</p>
  60.           <p>Lorem ipsum dolor sit amet consectetuer velit semper elit volutpat mollis. Ligula Curabitur euismod at ut auctor porta enim vel neque consequat. Massa tempus libero dui ac elit platea tincidunt Vivamus Morbi ipsum. Dui mauris ac consectetuer id in congue sem Quisque dictumst metus. Hendrerit suscipit massa rhoncus risus Vestibulum vitae tortor cursus lorem Quisque. Sagittis Pellentesque interdum ipsum et ut dolor ipsum.</p>
  61.           <p>Cursus eget nulla libero fringilla tellus In elit et at felis. Vitae id in et risus elit Sed enim Nunc ac adipiscing. Ut massa leo nec leo accumsan est justo enim Morbi lorem. Ante dolor ante tincidunt interdum Pellentesque consectetuer Curabitur In interdum nibh. Diam congue tellus enim magna adipiscing risus metus dignissim Nam justo. Laoreet platea ut.</p>
  62.           <p>Felis ac mus Nam ante tortor Donec Aliquam nunc pulvinar pellentesque. Metus massa elit Fusce feugiat vel wisi enim neque Nulla est. Nulla Phasellus Lorem faucibus semper est vitae orci vel tristique nibh. Vitae tristique rhoncus felis Maecenas ligula dignissim justo ipsum orci orci. Velit id ante aliquam congue Nulla vitae gravida sapien elit sagittis. Mattis ac risus.</p>
  63.                 <p>Felis ac mus Nam ante tortor Donec Aliquam nunc pulvinar pellentesque. Metus massa elit Fusce feugiat vel wisi enim neque Nulla est. Nulla Phasellus Lorem faucibus semper est vitae orci vel tristique nibh. Vitae tristique rhoncus felis Maecenas ligula dignissim justo ipsum orci orci. Velit id ante aliquam congue Nulla vitae gravida sapien elit sagittis. Mattis ac risus.</p>
  64.                 </div>
  65.         </div>
  66.         <div id="footer">
  67.             <div class="content">
  68.                 <p>Este layout no es 100% elaboración propia. Siento no haber dejado constancia del original en el que está basado.</p>
  69.                 <p>Tanto la cabecera como el pie pueden ser suprimidos. No influyen en el comportamiento de la caja central.</p>
  70.             </div>
  71.         </div>
  72. </body>
  73. </html>

Quita y pon el comentario de "#izquierda"
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 22/10/2009, 10:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: centrado de varias capas

Muy acertado también.
Cita:
Iniciado por kseso? Ver Mensaje
Sólo es cuestión de imaginación cuando se "juega" con css
+1 +1
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 22/10/2009, 15:32
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: centrado de varias capas

Hola:

Cita:
Iniciado por kseso? Ver Mensaje
Ni aunque tenga razón te haré vudú.

Saludos.

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 18:05.