centrado de varias capas

kaninox · #1 (**permalink**) 21/10/2009, 11:44

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<div style="margin: 0 auto;width: 800px;">
</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<div style="margin: 0 auto;width: 800px;">
<div style="width: 200px;float:left;">asdasd<br />asfdsdf</div>
<div style="width: 400px;float:left;">asdasd<br />asfdsdf</div>
<div style="width: 200px;float:left;">asdasd<br />asfdsdf</div>
</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.

jomaruro · #2 (**permalink**) 21/10/2009, 13:41

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:

kseso? · #3 (**permalink**) 21/10/2009, 14:39

Cita:

Iniciado por jomaruro

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

jomaruro · #4 (**permalink**) 21/10/2009, 15:10

Hola:

Cita:

Iniciado por kseso?

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.

kaninox · #5 (**permalink**) 21/10/2009, 20:14

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 ;)

kaninox · #6 (**permalink**) 21/10/2009, 20:39

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body {font-size:99%; font-family:sans-serif; background:#FFFFFF;}
div.prueba {border: 1px solid #BB0000;}
#header {margin: 0 auto;width: 742px;overflow:auto;}
#contenedor2 {margin: 0 auto;width: 742px;overflow:auto;}
 
#centro-izquierda {float:left; width:180px; padding:10px; background:#91D0D0;}
#centro-izquierda {background: #50D0D0}
#centro-derecha {float:right; width:180px; padding:10px; background:#65684A;}
#centro-derecha {background: #27684A;}
#centro {background:#e0e0e0; margin-top:10px; overflow:hidden;}
 
#centro-izquierda, #centro, #centro-derecha {padding-bottom:10000px; margin-bottom:-10000px;}
 
#contenedor {overflow:hidden; background:#e0e0e0;display:inline-block; min-width:742px;}
.caja-top {margin: 0 auto;width: 742px;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#centro {float:left; display:inline; margin-left:10px; margin-right:10px;}
#contenedor {display:inline-block; width: expression(document.body.clientWidth < 743? "742px": "auto" );}
</style>
<![endif]-->
</head>
<body>
<div id="header" class="prueba">
<div class="caja-top">
Aki Banner y demas<br>
Banner imagenes y demces
</div>
</div>
<div id="contenedor2" class="prueba">
<div id="contenedor">
<div id="centro-izquierda">
fg
</div>
<div id="centro-derecha">
asdassdgsdfgdgdfgsdfgdsf dfgsdgsdfgsdfg
sdgsdfg sdfgdsf gsdf d
gsdfgdfgdsfgdg   dgsdfg sdfgdfsg
</div>
<div id="centro" style="text-align:justify;">
<h3>Centro variable</h3>
Al utilizar el 'min-width' no hay colapsos. El scroll horizontal aparece en una resoluciones menor a 1.024px
Puedes incluir en #contenedor un 'max-width', y su equivalente para ie, para evitar problemas estéticos en pantallas de "cine"
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.
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.</div>
</div>
</div>
</body>
</html>

willyfc · #7 (**permalink**) 21/10/2009, 21:09

Cita:

Iniciado por kaninox

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

kaninox · #8 (**permalink**) 21/10/2009, 21:34

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

willyfc · #9 (**permalink**) 21/10/2009, 21:39

si, lo probé en el 6 y 7, probá a borrar las cookies de tu navegador, quizás son tus temporales.

kseso? · #10 (**permalink**) 22/10/2009, 04:20

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

kseso? · #11 (**permalink**) 22/10/2009, 04:37

Cita:

Iniciado por jomaruro

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/

kaninox · #12 (**permalink**) 22/10/2009, 08:25

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 ;)

Mikmoro · #13 (**permalink**) 22/10/2009, 08:42

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.

kseso? · #14 (**permalink**) 22/10/2009, 08:51

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body {font-size:99%; font-family:sans-serif; background:#333;}
 
#header {background:#521E39;}
 
#izquierda {float:left; padding-top:10px; background:#91D0D0; margin-right: 10px;}
#izquierda p { width:180px;}
#derecha {float:right; width:180px; padding:10px; background:#65684A; margin-left: 10px;}
 
#centro {background:#e0e0e0; padding-top:10px; overflow:hidden;}
 
#contenedor {overflow:hidden; background:#444; width:995px; margin: 0 auto;}
 
#izquierda, #centro, #derecha {padding-bottom:10000px; margin-bottom:-10000px;}
 
#footer {clear:both; background:#191919;}
 
.caja-top {padding:10px;}
.caja-top img {background:#FFFFFF; display:inline; float:left;}
h1 {font-size:3em; margin:0; padding:10px 0; color:#fff; font-family: monospace;}
h3 {font-size:1.8em; margin:0; padding:8px 0; font-family: serif;}
p {font-size:1em; line-height:1.5em; margin:0; padding:5px;}
#footer p, #header p, #derecha p {color:#fff;}
.monospace {font-family: monospace; font-size: 1.2em; background: #FF6600;}
.codigo {font-family: monospace; font-size:1em; letter-spacing: .1em; border: 1px solid #f5f5f5; color: #f5f5f5; background:#191919;}
</style>
</head>
 
<body>
        <div id="header">
            <div class="caja-top">
               <img src="http://www.forosdelweb.com/customavatars/avatar184738_14.gif" alt="un pequeña imagen de adorno" />
                <h1>- KSESO? Jugando con CSS -</h1>
                <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>
            </div>
        </div>
 
        <div id="contenedor">
            <div id="izquierda">
                    
                    <!--
                    <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>
          -->
                </div>
            <div id="derecha">
                    <h3>Derecha</h3>
                    <p class="monospace">Puedes cambiar el valor de la anchura de las columnas laterales. <br/>
          Admiten valores en px, % o en em. Es indiferente.</p>
                    <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>
          <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>
            </div>
            <div id="centro">
                    <h3>Centro variable</h3>
                    <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>
                    <p>Al utilizar el 'min-width' no hay colapsos. El scroll horizontal aparece en una resoluciones menor a 1.024px<br />
          Puedes incluir en #contenedor un 'max-width', y su equivalente para ie, para evitar problemas estéticos en pantallas de "cine"</p>
          <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>
          <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>
          <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>
                <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>
                </div>
        </div>
        <div id="footer">
            <div class="content">
                <p>Este layout no es 100% elaboración propia. Siento no haber dejado constancia del original en el que está basado.</p>
                <p>Tanto la cabecera como el pie pueden ser suprimidos. No influyen en el comportamiento de la caja central.</p>
            </div>
        </div>
</body>
</html>

Quita y pon el comentario de "#izquierda"

Mikmoro · #15 (**permalink**) 22/10/2009, 09:06

Muy acertado también.

Cita:

Iniciado por kseso?

Sólo es cuestión de imaginación cuando se "juega" con css

+1 +1

jomaruro · #16 (**permalink**) 22/10/2009, 14:32

Hola:

Cita:

Iniciado por kseso?

Hazme vudú, José Manuel

http://www.forosdelweb.com/f53/cambi...matico-601804/

Ni aunque tenga razón te haré vudú.

Saludos.