Hola amigos de la lista: Llevo varios días con un problemilla. Tengo un layout con cabecera y con 3 columnas fluidas y con valor de altura de 100%
Ya he posicionado todo, he probado con un contenedor que aloje las 3 columnas y he probado las columnas independientes, pero no logro que FF el contenedor central (la columna del centro) se auto ajuste al contenido y arrastre todo el contenido de las otras columnas para que ajusten al 100% de altura. En IE6 IE7 y Opera se ve bien, pero se pierde la altura al ajustar la pantalla y creo que es por el mismo problema. Ya leí 1.- http://simplelogica.net/caoticoneutral/?p=33 -Español y otros sitios pero no he logrado dar con el problema Comparto mi código a ver si es posible hallar una solución a este problema La estructura <body> <script language="JavaScript1.2" type="text/javascript">mmLoadMenus();</script> <div id="encabezado"> <h1><a title="Su logo aquí: Descripción para SEO" href=" http://www.sulogoaqui.com";>Su Logo Aquí: Este es el encabezado H1 </a></h1> <div id="nav-prin"> <ul class="nav"> <li><a title="Su logo aquí" href="#">Inicio</a></li> <li><a title="Quienes Somos" href="#">Quienes Somos</a></li> <li><a title="Productos" href="#">Productos</a></li> <li><a title="Servicios" href="#">Servicios</a></li> </ul> </div> </div> <div id="contenedor"> <div id="col1"> <div class="extra4"> <ul class="menulateral" id="menu-lateral"> <li><a href="inicio.html">Inicio</a></li> <li><a href="#" name="link1" id="link1" onmouseover="MM_showMenu( window.mm_menu_0517182955_0,116,0,null,'link1')" onmouseout="MM_startTimeout();">Quienes Somos</a></li> <li><a href="productos.html">Productos</a></li> <li><a href="servicios.html">Servicios</a></li> <li><a href="noticias.html">Noticias</a></li> <li><a href="contactenos.html">Contáctenos</a></li> <li><a href="faq.html">FAQ</a></li> </ul> </div> <img src="img/img-col1.jpg" alt="Alguna descripción conteniendo palabras claves del cliente" width="113" height="67" /> <ul class="menulateral" id="menu-secundario"> <li><a href="comunicaciones.html">Comunicaciones</a></li> <li><a href="vision-corporativa.html">Visión Corporativa</a></li> <li><a href="desarrollos.html">Desarrollos</a></li> <li><a href="industrias.html">Industrias</a></li> <li><a href="proyectos.html">Proyectos</a></li> <li><a href="licitaciones.html">Licitaciones</a></li> <li><a href="contratos.html">Contratos </a></li> </ul> </div> <div id="col2"> <h2>CONTACTENOS</h2> <p>Las fuentes tipográficas utilizadas para el programa de identidad de Casagri son Joanna y Frutiger. Procuraremos utilizar estas fuentes en todos nuestros materiales de comunicación tanto internos como externos.</p> <p>Joanna es una fuente tipo serif, o con rabillo y luce mejor como fuente de texto para cartas, reportes, memorias, brochures, etc. Frutiger es una tipografía tipo sans serif o palo seco. Puede ser utilizada como contraste señalización, rotulaciones, o bien como fuente de contraste en textos.</p> <h2>Formulario</h2> <form id="form1" name="form1" method="post" action=""> <p>Este formulario es de muestra para test de los siguientes rubros</p> <p>Selección Múltiple </p> <select name="seleccionmultiple" size="5" multiple id="seleccionmultiple"> <option value="HTML">Manejo del Código HTML</option> <option value="CSS">Uso del css</option> <option value="Javascript">Uso de Javascript</option> <option value="Problemas">Resolución de Problemas</option> </select> <p> <label>Selección Única</label> <br /> <label> <input type="radio" name="seleccionunica" value="Flash" /> Manejo de Flash a nivel de animación linea de tiempo</label> <br /> <label> <input type="radio" name="seleccionunica" value="Action Script" /> Conocimiento de action Script</label> <br /> <label> <input type="radio" name="seleccionunica" value="Dependencia" /> Dependencia de Software para edición de Código</label> <br /> <label> <input type="radio" name="seleccionunica" value="Diseño" /> Conocimientos de diseño</label> <br /> <label>Comentarios acerca del Trabajo <br /> <textarea name="textarea" cols="40" rows="5"></textarea> </label> </p> <p> <input type="reset" name="Reset" value="Limpiar" /> <input name="Submit" type="submit" value="Submit" /> </p> </form> <div class="limpia"> <ul class="nav"> <li><a href="#">Inicio</a></li> <li><a href="#">Quienes Somos</a></li> <li><a href="#">Productos</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Noticias</a></li> <li><a href="#">Contáctenos</a></li> <li><a href="#">FAQ </a></li> </ul> </div> </div> <div class="extra1"></div> <div class="extra2"></div> <div id="col3"> <ul class="menulateral" id="menu-col2"> <li><a href="#">Comunicaciones</a></li> <li><a href="#">Visión corporativa</a></li> <li><a href="#">Desarrollos</a></li> <li><a href="#">Industrias</a></li> </ul> <p>Las fuentes que son las tipografías utilizadas para el programa de identidad Casagri son Frutiger y arial Procuraremos utilizar estas fuentes en todos nuestros marteriales</p> <img src="img/img-col2.jpg" alt="Otra imagen con palabras claves para SEO" width="65" height="80" /> <p>Para el programa identidad social y coorporativa.</p> </div> </div> </body> El CSS /*--------<<<Reseteo General>>>------*/ *{margin:0; padding:0} html, body{height: 100%;} /*-------------Generales------------*/ body{ font: 0.6em/1.3em Verdana, Arial, Helvetica, sans-serif; color: #000; background: #FFF; position: relative; min-width: 770px; min-height:100%; width: 100%; } .limpia{ clear:both; text-align:center; } ul, li{ list-style:none; margin:0; padding:0; } p{text-align:justify; margin-bottom:10px;} img{ margin-top:10px; margin-bottom:10px; } /*-------------Encabezados-----------------*/ h1{ width:104px; height:67px; position:absolute; top:50%; margin-top:-33px; left:2%; } h1 a{ width:104px; height:67px; display:block; text-indent:-1000em; background: url(../img/h1-home.gif) no-repeat; } h2{ font-size:1.5em; margin-top:10px; margin-bottom:20px; } /*---------Estructura----------*/ #encabezado{ width:100%; height:115px; background: #000 url(../img/bg-encabezado.gif) no-repeat center center; position:relative; } #contenedor{ position:relative; width:100%; height:100%; display:block; } html > body #contenedor{ min-height:100%; } #col1{ width:18%; min-height:100%; position:absolute; top:0; left:0; background: #D3D3D3 url(../img/bg-col1.gif) repeat-y right top; text-align:center; } * html #col1{ height:100%; } #col2{ position:absolute; left:18%; width:52%; min-height:100%; padding-left:6%; padding-right:6%; background: url(../img/marca-agua.gif) no-repeat fixed 70% 80%; } * html #col2{ height:100%; } #col3{ position:absolute; top:0; right:0; width:16%; min-height:100%; background-color:#FFCB05; text-align:center; padding-left:1%; padding-right:1%; } * html #col3{ height:100%; } /*-------------Listas----------*/ #nav-prin{ position:absolute; top:1em; right:1em; } ul.nav{ } ul.nav li{ display:inline; border-right:1px solid #AEAEAE; } ul.nav li a{ color:#AEAEAE; text-decoration:none; padding:2px 3px; } ul.menulateral{ margin:10px auto; width:113px; padding-top:10px; padding-bottom:10px; text-align:left; } ul.menulateral li{ border-bottom:1px solid #818181; } ul.menulateral li:first-child{ border-top:1px solid #818181; } ul.menulateral li a{ color:#fff; display:block; padding:3px 0 3px 10px; text-decoration:none; } ul#menu-lateral{ background-color:#740000; } ul#menu-secundario li a, ul#menu-col2 li a{ color:#000; } /*-----------Extras-----------*/ .extra1{ position:absolute; top:0; right:17.5%; width:41px; height:353px; background: url(../img/extra1.gif) no-repeat; z-index:10; } .extra2{ position:absolute; width:367px; height:10px; top:0; right:20%; z-index:10; background: url(../img/extra2.gif) no-repeat; } .extra4{ width:100%; height:182px; background: url(../img/bg-tab.gif) no-repeat right top; } Si alguno pudiera echarme una mano se los agradecería.... Pueden verlo trabajando en http://www.alfawebcr.com/personal/ Gracias Fabián Vargas -- Fabián Vargas Diseño web en CSS y XHTML www.alfawebcr.com [EMAIL PROTECTED] _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
