Foros del Web » Creando para Internet » CSS »

3 columnas en portada, 2 en interior

Estas en el tema de 3 columnas en portada, 2 en interior en el foro de CSS en Foros del Web. Hola, Este post puede ir tanto en XHTML como en CSS, si no está bien ubicado ruego me lo mueva algún moderador por favor. Estoy ...
  #1 (permalink)  
Antiguo 25/06/2009, 16:53
 
Fecha de Ingreso: septiembre-2005
Mensajes: 37
Antigüedad: 12 años, 2 meses
Puntos: 0
3 columnas en portada, 2 en interior

Hola,

Este post puede ir tanto en XHTML como en CSS, si no está bien ubicado ruego me lo mueva algún moderador por favor.

Estoy intentando maquetar una página para un periódico.

La idea es que en portada aparezcan 3 columnas con los contenidos de este modo:



Una vez que estén en alguna sección interior, la columna 3 desaparecerá (mediante php la desactivaré), de modo que sólo queden la 1 y la 2, ocupando la primera el espacio dejado libre por la 3, es decir, una página interior ha de verse así:



Llevo todo el día dándole vueltas pero no consigo que la columna principal varíe su ancho según una u otra circunstancia.

Si alguien puede echarme una mano le estaré eternamente agradecido :)

Gracias!

Última edición por Knibal; 25/06/2009 a las 17:24 Razón: Actualización de las imágenes
  #2 (permalink)  
Antiguo 25/06/2009, 17:00
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: 3 columnas en portada, 2 en interior

no entiendo cuál es el problema? no podes hacer las 3 columnas o no podes hacer 2 de 3?

Tenes algo hecho? podmeos verlo?
  #3 (permalink)  
Antiguo 25/06/2009, 17:23
 
Fecha de Ingreso: septiembre-2005
Mensajes: 37
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: 3 columnas en portada, 2 en interior

Siento no poder mostraros, estoy desarrollando el sitio en un servidor local, pero amplío un poco más. La maquetación es para Joomla.

En cada columna se cargaran una serie de módulos uno debajo de otro.

En portada estarán activas las 3 columnas, pero cuando se entra a una sección interior, para dar más espacio al contenido, la columna 3 desaparece (con "php if modules count...")

El problema está en que si declaro un ancho fijo a la columna 1, cuando la 3 desaparece, la 1 no ocupa todo el espacio sobrante, sino que se queda al mismo ancho.

Si le aplico 100% de ancho, me saltan de linea las otras dos columnas.

El problema es además que el contenedor tiene un ancho fijo, no como en el caso que propone kseso que lleva width 100%, por tanto, tiene que fluir el tamaño de la columna 1 pero siempre adaptándose a ese ancho máximo del contenedor.
  #4 (permalink)  
Antiguo 25/06/2009, 17:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: 3 columnas en portada, 2 en interior

Bueno, ya lo siento que no te sirva.
Lo borro, entonces, ya que no puedes cambiar cuatro width (ya sean a px o %)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 25/06/2009, 17:41
 
Fecha de Ingreso: septiembre-2005
Mensajes: 37
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: 3 columnas en portada, 2 en interior

kseso agradezco tu ayuda, pero no entiendo tu cabreo.

Dije que a priori pensaba que no me servía ese código porqua ya había experimentado con widths al 100% y no me funcionaban.

De todas formas, copié el código antes de que lo eliminaras (?¿), así que de nuevo gracias, e intentaré darle una vuelta.
  #6 (permalink)  
Antiguo 25/06/2009, 17: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: 3 columnas en portada, 2 en interior

No importa en absoluto que el contenedor tenga ancho fijo: en realidad lo importante es cómo pongas las columnas interiores, y en eso sí te sirve el ejemplo de kseso? (la maquetación a 3 columnas simple).
¿Por qué? porque el truco está en que las columnas izquierda y derecha ocupan un ancho fijo, siendo flotadas respectivamente a derecha e izquierda, y la central ocupa el resto disponible sin flotar. De esa manera, si desaparece la izquierda, aun así la central ocuarpá todo el ancho disponible, incluído lo que deja libre la derecha.

Si no puedes adaptar esto, aun tendrías otra posible solución:
creo que en joomla el contenedor principal es "main" y en en interiores "main2", o algo así. De cualquier modo, hay una diferencia en el contenedor.
Pues bien, podría hacer que una columna tenga unas propiedades cuando esté en main y otra cuando esté en main2:

#main .col_central {width: 150px... etcétera}
#main2 .col_central {width: 300px... etcétera}

Busca cómo diferenciarlas desde el contenedor. Si no puedes, pon el código que te genera.

P.D.: ahora que te leo, no creo que kseso? se haya cabreado. Hacía referencia a este ejemplo, ¿no?
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 25/06/2009, 17:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: 3 columnas en portada, 2 en interior

Cita:
Iniciado por Knibal Ver Mensaje
kseso agradezco tu ayuda, pero no entiendo tu cabreo.

Dije que a priori pensaba que no me servía ese código porqua ya había experimentado con widths al 100% y no me funcionaban.

De todas formas, copié el código antes de que lo eliminaras (?¿), así que de nuevo gracias, e intentaré darle una vuelta.
No es cabreo. Símplemente, no sobrecargo la BD con ejemplos que no sirven.

Mik, era esta respuesta tuya con una columna añadida. Con un enlace a ese tema para poder ver los dos códigos y compararlos (en uno 2, en el modificado 3) y una nota para ocultar la columna con "display: none"
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 26/06/2009, 04:00
 
Fecha de Ingreso: septiembre-2005
Mensajes: 37
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: 3 columnas en portada, 2 en interior

He estado dándole una vuelta y casi lo tengo, pero en IE (6,7 y 8) tengo un pequeño fallo, pongo el código que estoy usando:

Código:
      <!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>3 columnas</title>

      <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

      <style type="text/css">

      * {margin:0;padding:0;}

      html, body {height: 100%; background-color:#ccc;}

      #contenedor {width: 900px; height: 100%; clear:both;
      }
      #col_der, #col_izq, #col_central {height: 100%;}
      #col_der {float: right; background-color: blue; width: 200px;}
      #col_izq {float: right; width: 300px; background-color: green;}
      #col_central {background: red; }
      </style>
      </head>
      <body>
		  <div id="contenedor">
			  <div id="col_der"> </div>
			  <div id="col_izq"> </div>
			  <div id="col_central"> </div>
		  </div>
      </body>
      </html>
Si lo veis en Firefox, Safari, Chrome, las 3 columnas están pegadas, mientras que en cualquier de los IExplorer, la columna roja y verde están levemente separadas, ¿de dónde sale esa separación? :\
  #9 (permalink)  
Antiguo 27/06/2009, 06:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: 3 columnas en portada, 2 en interior

Hola Knibal.
Creo que es efecto óptico. Al menos yo lo veo igual en FF 3 e ie7.
Si cambias los colores de cada div ese efecto de transición entre color y color desaparece.
Para asegurarme hice una captura de pantalla ampliando al máximo las uniones y este es el resultado:



Como verás, no hay ni separación ni color distinto en los límites.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 27/06/2009, 08:16
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: 3 columnas en portada, 2 en interior

En IE7 no hay separación. En IE6 sí la hay, que se resuelve con esto, que no afecta al resto:

#col_izq {float: right; width: 300px; background-color: green;margin-left: -3px;}
__________________
Visita mi nueva web idplus.org
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 08:33.