Autor Tema: [AYUDA] MAQUETACION DE COLUMNAS  (Leído 834 veces)

Desconectado maska

  • PHPer@ Fijo
  • ***
  • Mensajes: 126
  • Karma: 2
  • Nuev@ PHPer@
    • Ver Perfil
[AYUDA] MAQUETACION DE COLUMNAS
« en: 26 de Octubre de 2012, 17:51:41 pm »
Hola amigos. Escribo aquí en última instancia por estar desesperado. Ya que llevo varios días pensando y no consigo lograrlo. Adjunto imágenes y os explico más detalladamente.

IMAGEN CORRECTA: http://www.lacomparsademorta.16mb.com/img/correcto.PNG
IMAGEN INCORRECTA: http://www.lacomparsademorta.16mb.com/img/incorrecto.PNG

Mi objetivo es conseguir que todo este en position:fixed;, menos el div con el borde rojo. El div que tiene el borde rojo quiero que sea auto para leerse la información. Esto que he explicado lo he conseguido. Pero al darle zoom a la página y mover el scroll horizontal se mueve el div con el color de borde rojo y da como error la IMAGEN INCORRECTA.

Espero que me podáis ayuda amigos.
Gracias.



Código: [Seleccionar]
{include file="header.tpl"}
<div id="wrap" class="clearfix">
  <div id="container">
 
 
    <div id="cabecera">
      cabecera position:fixed
    </div><!-- class cabecera -->
   
   
    <div id="wrapContenedor">
   
      <div id="c1Wrap"> 
        <div id="c1">
          Columna 1 de menu position:fixed
        </div><!-- div c1 -->
      </div><!-- div c1Wrap --> 
     
      <div id="c23Wrap" class="sombra1">   
        <div id="c2Wrap">
          <div id="c2">
            Columna 2 de informarcion
          </div><!-- c2 -->
        </div><!-- c2Wrap -->
           
           
        <div id="c3Wrap">
          <div id="c3">
            Columna 3 de publicidad position:fixed
          </div><!-- div c3Wrap -->
        </div><!-- div c3Wrap -->
   
   
      </div><!-- div c23Wrap -->
    </div><!-- div wrapContenedor -->
   
   
  </div><!-- fin de container -->
  {include file="foother.tpl"}
</div><!-- FIN DE WRAP -->

Código: [Seleccionar]
#wrap {margin:0 auto; text-align:left; width:950px; overflow:hidden;}
#container {overflow:hidden; margin:60px 0px 0px 0px;}

#cabecera {width:908px; margin-top:-20px !important; padding:10px 20px; border:1px solid #CCC; border-top:none; overflow:auto; background:#FFF; z-index:200; position:fixed;}
#wrapContenedor {width:950px; padding-top:30px;}
#wrapContenedor #c1Wrap {float:left; width:100px; z-index:50;}
#wrapContenedor #c1Wrap #c1 {padding-top:20px; position:fixed;}
#wrapContenedor #c23Wrap {width:808px; float:left; margin-left:100px; margin-bottom:20px; padding:20px; padding-bottom:0px !important; background:#FFF; border:1px solid #CCC; border-top:none; -moz-border-radius:0px 0px 5px 5px; -khtml-border-radius:0px 0px 5px 5px; -webkit-border-radius:0px 0px 5px 5px; border-radius:0px 0px 5px 5px; z-index:40px;}
#wrapContenedor #c2Wrap {float:left; width:600px; position:relative;}
#wrapContenedor #c2Wrap #c2 {margin-right:20px;}
#wrapContenedor #c3Wrap {float:left; width:208px;}
#wrapContenedor #c3Wrap #c3 {width:208px; position:fixed;}
« Última modificación: 28 de Octubre de 2012, 12:32:45 pm por maska »

Comunidad PHPeros

[AYUDA] MAQUETACION DE COLUMNAS
« en: 26 de Octubre de 2012, 17:51:41 pm »

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:[AYUDA] MAQUETACION DE COLUMNAS
« Respuesta #1 en: 26 de Octubre de 2012, 18:11:28 pm »
¿Y que necesitas? ¿Que el fixed de la izquierda desaparezca de la pantalla?
¡No puedes hacer eso con fixed!

Quizás con absolute y algo de javascript puedas lograrlo.

Saludos
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado maska

  • PHPer@ Fijo
  • ***
  • Mensajes: 126
  • Karma: 2
  • Nuev@ PHPer@
    • Ver Perfil
Re:[AYUDA] MAQUETACION DE COLUMNAS
« Respuesta #2 en: 26 de Octubre de 2012, 18:20:44 pm »
¿Y que necesitas? ¿Que el fixed de la izquierda desaparezca de la pantalla?
¡No puedes hacer eso con fixed!

Quizás con absolute y algo de javascript puedas lograrlo.

Saludos

No. No quiero que el div de la izquierda desaparezca. Todo lo contrario. El div de la izquierda que contiene el menú en vertical quiero que permanezca fixed (cosa que ya tengo). Y el div del recuadro quiero que tenga height:auto.

El problema es que cuando le doy zoom y me sale el scroll horizontal, pues, lo muevo y me sale lo que puse en la IMAGEN INCORRECTA.

¿Alguna sugerencia? Quiero lograr este resultado https://plus.google.com/?hl=es

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:[AYUDA] MAQUETACION DE COLUMNAS
« Respuesta #3 en: 26 de Octubre de 2012, 19:17:16 pm »
Sin ver el código no me sé orientar.
Puedo darte 100 lineas de código que ya tengas implementadas.

Un saludo
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado maska

  • PHPer@ Fijo
  • ***
  • Mensajes: 126
  • Karma: 2
  • Nuev@ PHPer@
    • Ver Perfil
Re:[AYUDA] MAQUETACION DE COLUMNAS
« Respuesta #4 en: 28 de Octubre de 2012, 12:33:34 pm »
Sin ver el código no me sé orientar.
Puedo darte 100 lineas de código que ya tengas implementadas.

Un saludo

Ya escribí el código. A ver si me ayudas, amigo. Te lo agradeceré enormemente. GRACIAS, de antemano.