Foros del Web » Creando para Internet » CSS »

Diferentes posibilidades 3 columnas

Estas en el tema de Diferentes posibilidades 3 columnas en el foro de CSS en Foros del Web. Hola amigos, Ya sé que éste es un tema que se ha hablado millones y millones de veces y que se seguirá hablando porque mucha ...
  #1 (permalink)  
Antiguo 17/10/2009, 10:28
 
Fecha de Ingreso: octubre-2003
Ubicación: FMSite
Mensajes: 336
Antigüedad: 14 años, 1 mes
Puntos: 2
Diferentes posibilidades 3 columnas

Hola amigos,

Ya sé que éste es un tema que se ha hablado millones y millones de veces y que se seguirá hablando porque mucha gente se encuentra con el mismo problema cuando empieza a usar CSS.

Yo ya lo hago desde hace unos años pero siempre que armo una web nueva me topo con el mismo debate: las columnas.

Hay varias formas de hacerlo, todas correctas supongo, pero quería saber vuestra opinión, vuestra experiencia.

Hasta ahora, yo siempre lo había hecho de la siguiente forma:

<div id='menuIzq'></div>
<div id='menuDer'></div>
<div id='Centro'></div>

menuIzq con float left, menuDer con float right y la Centro haciendo que se meta en medio.

Sin embargo, con la última web que diseñé, llegué a una conclusión: No me gusta que el contenido aparezca después del menú derecho ni en el código, ni a la hora de cargar.
Más de una vez, poniendo publicidad en mi menú derecho, se me quedaba la página "colgada" unos segundos hasta que cargaba el menú derecho y por fin llegaba el turno del contenido.

Por eso, en ésta ocasión he decidido cambiar pero me salen las dudas:

Cual es la mejor forma de diseñar una página en 3 columnas? Es normal que primero carguen los menús y después el contenido?

Me puse a probar cosas y finalmente llegué a probar los valores de "position". Los relative.
Hice una capa que englobara a las tres columnas y a la primera le di left=0, segunda left=160 y tercera left=800 (o algo parecido).
El problema? No me funciona el style='clear: both' de la última capa para hacer que el fondo llegue hasta el final.

Así que, finalmente lo resolví dándole a las tres capas el valor de float:left; para que quedara:

<div id='menuIzq'></div>
<div id='Centro'></div>
<div id='menuDer'></div>

Ahora mi pregunta final:

Qué es lo más adecuado? Qué hacéis los expertos? Cómo os las arregláis?
Usáis el <div style='clear: both'></div>? o es una solución... "cutre"
?

Pues nada, aquí está el debate, ojalá aprendamos el resto de vuestras experiencias :)

Saludos!
__________________
http://www.fmsite.net/
  #2 (permalink)  
Antiguo 17/10/2009, 10:37
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Diferentes posibilidades 3 columnas

soy un hombre visual no de letras... perdona... pero a lo de tu pregunta final...
almenos yo...
trato de tener un "div" contenedor y dentro estras 3 columnas o 2... y a este contenedor le doy un "overflow:hidden;" y yap...
usar
<div style='clear: both'></div>se ve horrible jaja...
aunque si tienes un "footer" le das dicho estilo "clear: both" y de la misma manera te lo soluciona solo que, "camuflajeado"...

si tienes mas dudas revisa en
http://araudi.net/
antes chao y suerte!...
  #3 (permalink)  
Antiguo 17/10/2009, 16:22
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: Diferentes posibilidades 3 columnas

La primera pregunta es: ¿las columnas tienen ancho fijo? ¿y el contenedor? Esto es fundamental para una solución u otra.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 17/10/2009, 17:01
 
Fecha de Ingreso: octubre-2003
Ubicación: FMSite
Mensajes: 336
Antigüedad: 14 años, 1 mes
Puntos: 2
Respuesta: Diferentes posibilidades 3 columnas

Sí, el ancho de las 3 columnas es fijo. En total, unos 1000px

Gracias
__________________
http://www.fmsite.net/
  #5 (permalink)  
Antiguo 18/10/2009, 08:28
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Diferentes posibilidades 3 columnas

Siendo así, sería relativamente sencillo, e incluso en cierto momento ya se comentó.
¿Quizás buscas algo como esto?.

De tu cuenta queda meter contenidos pesados para que se note el orden de carga

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 18/10/2009, 08:47
 
Fecha de Ingreso: octubre-2003
Ubicación: FMSite
Mensajes: 336
Antigüedad: 14 años, 1 mes
Puntos: 2
Respuesta: Diferentes posibilidades 3 columnas

Hola kseso?

Sí, ese era el efecto que quería, además, aún mejor de lo que yo ideaba, con el div central el primero :)
Ahora, tengo varias preguntas en cuanto al código.

La primera de todas... por curiosidad, por qué casi todos los ejemplos de CSS van con textos en latin? quiere decir algo eso? jaja. Me resulta curioso.
Y la otra... No entiendo el porqué de que ambos menús tengan el valor del position absolute. absolute no es para posicionar respecto a la posición 0,0 de la ventana y relative para posicionar respecto al div "padre"?

Voy a probar a ver qué tal me va ;)

Gracias nuevamente por vuestra paciencia con todas estas preguntas que se repiten una y otra vez.

EDITO:

Bien, lo que me ocurre es lo siguiente:
Tengo un div de ID "wrap" que engloba cabecera+página y tiene un fondo que hace mostrar unas sombras tanto por la izq de la página como por la derecha.
Tal como lo tengo montado, con floats left (pregunto de nuevo, se suele diseñar con floats las columnas y acabar con un clear both?), la capa wrap llega hasta abajo del todo.

Sin embargo, si le meto debajo de la cabecera un DIV nuevo con position: relative que contenga a las tres columnas, la capa wrap sólo llega hasta donde finaliza la cabecera.

Espero vuestras respuestas ;)

Saludos!
__________________
http://www.fmsite.net/

Última edición por Black_River; 18/10/2009 a las 10:06
  #7 (permalink)  
Antiguo 18/10/2009, 10:56
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Diferentes posibilidades 3 columnas

Cita:
La primera de todas... por curiosidad, por qué casi todos los ejemplos de CSS van con textos en latin?
lorem ipsum
Cita:
¿absolute no es para posicionar respecto a la posición 0,0 de la ventana y relative para posicionar respecto al div "padre"?
Creo que te vendrá más que bien esta guía de Mikmoro, en este caso, lo relativo a las posiciones.

Sobre tu edición:
Quizás lo que tengas es el típico problema de las cajas que se sacan del flujo del html: no hacen crecer a su contenedor. Pasa por librosweb.es. Esa técnica (uso de un div de corte) o añadiento la propiedad overflow puede que sea lo que necesitas.

Pero en estos casos, viene bien que junto a la descripción del problema se ponga un enlace a una página donde se manifieste el error, así la respuesta podrá ser en forma de código ajustado a las necesidades.

Un saludo.

P.D.: creo que no me he dejado nada
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 18/10/2009, 11:14
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: Diferentes posibilidades 3 columnas

Hola:

Se te olvidó esto, supongo todavía no será reconocido por los navegadores actuales pero es un nuevo paso.

Saludos.

  #9 (permalink)  
Antiguo 18/10/2009, 11:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Diferentes posibilidades 3 columnas

Hola Jomaruro.
Creo que en este caso no es de aplicación (aparte que sea o no soportado).
Esa propiedad lo que hace es estructurar un texto (no párrafo <p>, sino texto) en múltiples columnas.

Lo planteado era que la parte principal de contenidos sea lo primero que se cargue (aparezca antes en el html) y que se muestre en la parte central. Y lógicamente, que en caso de desactivarse el css, aparezca antes el contenido central que los sidebars.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 18/10/2009, 11:46
 
Fecha de Ingreso: octubre-2003
Ubicación: FMSite
Mensajes: 336
Antigüedad: 14 años, 1 mes
Puntos: 2
Respuesta: Diferentes posibilidades 3 columnas

Bueno, no tengo tiempo de investigar ahora.

Tengo activado el server, si queréis ver un ejemplo de lo que quiero, aquí está: http://85.86.212.67/fmsitev7/

Aún está con los float left. Podéis hacer las pruebas si queréis ;)

Después me miro lo del overflow ;)
__________________
http://www.fmsite.net/
  #11 (permalink)  
Antiguo 18/10/2009, 11:49
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Diferentes posibilidades 3 columnas

Cita:
Iniciado por Black_River Ver Mensaje
Bueno, no tengo tiempo de investigar ahora.
Creo que a más de uno nos pasará lo mismo: no tendremos tiempo para hacerte las pruebas tuyas.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 18/10/2009, 12:00
 
Fecha de Ingreso: octubre-2003
Ubicación: FMSite
Mensajes: 336
Antigüedad: 14 años, 1 mes
Puntos: 2
Respuesta: Diferentes posibilidades 3 columnas

No me lo tomes a mal kseso, ando liado ahora con un trabajo de la Uni. La información que me proporcionas es muy interesante. De hecho, ayer estuve leyendo la guía de Mikmoro, pero parece que no la entendí bien. De ahí que antes dijera que el absolute pensaba que lo posicionaba respecto a la ventana y relative respecto a su capa padre.

Obviamente, cuando termine el trabajo seguiré con las pruebas que llevo haciendo un par de días ;)

Perdón si me di mal a entender.

Saludos!
__________________
http://www.fmsite.net/
  #13 (permalink)  
Antiguo 18/10/2009, 12:49
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: Diferentes posibilidades 3 columnas

En un sitio donde la gente entrega su tiempo ayudando a los demás por puro gusto, hay que procurar evitar frases como "no tengo tiempo de investigarlo", "sólo necesito que me den el código", o "es que me da pereza", porque pueden dar lugar a malentendidos como este.

Si es cierto lo que dices de la uni, y lo que preguntas en tu consulta no parece algo tan urgente, dejamos aquí la consulta y cuando tengas tiempo de ponerte la retomamos, porque al menos yo, no voy a darte una explicación para que no tengas tiempo de pensarla y desarrollarla y se la lleve el viento. No sé si me explico.

P.D.:

"parece que no la entendí bien. De ahí que antes dijera que el absolute pensaba que lo posicionaba respecto a la ventana y relative respecto a su capa padre."

Si es cierto que vas a la universidad, no es que no lo entendiste, es que no lo leiste, si no es materialmetne imposible que te quedara esa duda tras la lectura

P.D.2: no me parece buena idea que aparezca el contenido antes que los menús (cuestión personal del concepto sobre el orden y la semántica).

P.D.3: No hace falta que flotes las 3 columnas: sólo las dos primeras y la tercera no, y eso hará que sobre el clear.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 18/10/2009 a las 13:00
  #14 (permalink)  
Antiguo 18/10/2009, 13:12
 
Fecha de Ingreso: octubre-2003
Ubicación: FMSite
Mensajes: 336
Antigüedad: 14 años, 1 mes
Puntos: 2
Respuesta: Diferentes posibilidades 3 columnas

Hola Mikmoro,

No, el asunto no me urge. Estoy editando el diseño de mi página web y no tengo excesiva prisa porque tengo que cambiar todo el código a parte del diseño puesto que he realizado cambios en la estructura de la base de datos.

Desde luego, yo no soy de los que hacen CTRL C + CTRL V. Mi objetivo principal es aprender, lo que llevo haciendo desde hace varios años y siempre a través de internet, nunca tomé una clase ni de HTML, CSS, PHP. En gran parte, gracias a este foro al que estoy muy agradecido. Empecé chapurreando en html, pasando a chapurrear php y poco a poco he ido adquiriendo conocimientos en modo hobbie.

Aunque no os importa lo más mínimo, como ponéis en duda mi acceso a la universidad, estudio Ingeniería Informática, estoy ya en 3º. Tengo ganas de que los horarios me permitan el año que viene coger una asignatura donde veré cosas relacionadas con la web (Herramientas Avanzadas del Software, por si alguien la conoce). Aunque en vez de PHP lo haré en Java. La web es algo que me apasiona, y en un futuro me gustaría dejar de ganar un dinerillo a dedicarme a ello de forma profesional. Así que aquí estoy para aprender y no para copiar y pegar ;)

También pones en duda que lo leyera o no, y te cito a continuación lo que me hizo pensar eso:

Cita:
La posición absoluta también es colocada con arreglo a los cuatro parámetros descritos antes (arriba, derecha, abajo e izquierda), pero en este caso no serán desplazamientos con respecto a su posición natural, sino a las cuatro coordenadas de la página.
Pero bueno, ahora, leyendo más detenidamente, en el siguiente párrafo pone bien claro que si esa capa está dentro de una relativa, toma la referencia de ésta. Por lo tanto, me disculpo por mis palabras.

En fin, saludos y por favor, no me toméis como una persona que simplemente viene a sacaros el código y pegarlo en mi web.

Espero que haya quedado todo aclarado.

Saludos!
__________________
http://www.fmsite.net/
  #15 (permalink)  
Antiguo 18/10/2009, 13:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Diferentes posibilidades 3 columnas

Por mi parte no hay problema, ni lo hubo, Black_River.
Pero coincidirás conmigo que sonó feo, con independencia de tus intenciones, que ni juzgo ni pongo en duda.
Y es mejor ponerlo en evidencia y aclararlo, antes que por pasividad permitir que se extiendan (más todavía) por estos foros.

Como decía Mik, una vez que tus obligaciones te permitan retomar tu página, nos estaremos viendo por acá si en algo podemos seguir ayudándote.

Un saludo.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #16 (permalink)  
Antiguo 18/10/2009, 17:40
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: Diferentes posibilidades 3 columnas

No, no pongo en duda que estudies en la universidad, estaría bueno. Pero como tú mismo observas, con sólo leerlo era imposible que te hubiera quedado esa duda. Si acaso cualquier otra, pero esa era imposible. Como ves detecté que habías pasado los ojos por encima, pero no leído.

Y decía el: "si es cierto que vas a la universidad", como garantía de que eres una persona medianamente inteligente y capaz de entender ese texto tan simplón cuando lo lee, y de ahí mi extrañeza.

Y me alegro de que lo que más quieras es aprender. Lo de los "sólo dadme el código hecho" era un ejemplo de las frases malsonantes que conseguirán con facilidad que no obtengas ayuda, no que tú fueras uno de ellos.

Por mi parte no hay ningún problema. Justamente lo que nos divierte es que nos pongan a prueba, pero con ciertas garantías. Nos veremos en breve.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 19/10/2009, 07:29
 
Fecha de Ingreso: octubre-2003
Ubicación: FMSite
Mensajes: 336
Antigüedad: 14 años, 1 mes
Puntos: 2
Respuesta: Diferentes posibilidades 3 columnas

Hola de nuevo!

Me alegra que ya todo haya quedado aclarado, no quería que tuvierais ese pensamiento de mi ;)

Bueno, he sacado un tiempecillo este medio día y me he puesto a leer y a hacer pruebas.
Creo que ya lo tengo entendido todo y ya he conseguido que se visualicen adecuadamente las columnas.

Además, me he puesto a hacer pruebillas y he colocado un banner flotante que no influye en el posicionamiento (centrado) de la web y aparece en su derecha.
Dandole al div wrap un posicionamiento relativo y, dentro, una caja flotante en absolute.

En fin, lo que no permitía que se viera correctamente la página (se me corrían los menús hacia abajo hasta que terminaba mi columna central) era que olvidaba poner el top: 0 en ambas columnas de los extremos. Pensaba que tomaba top: 0 como valor por defecto pero ya he comprobado que no. Además es lógico que sea así, coño!

Ah, he tenido que dar a la columna central un min-height de 900px porque en alguna ocasión tengo la columna central con muy poco texto y eso hace que el fondo de sombra se corte al acabar la central. Eso es correcto, cierto? O es preferible evitar los min-height/width?

Me ha gustado mucho el funcionamiento del position, da mucho juego y seguramente hará que me olvide de los floats que hasta ahora había utilizado sin pensarlo.

Aún la tengo en local, así que si queréis ver el resultado (prácticamente es lo mismo que visteis antes pero cambiando los valores), si pillais mi ordenador online podréis observarlo a través del link que puse antes.

Ahora, si me permitís, os hago otra preguntilla que más bien es de "cómo lo hacen los expertos" que de otra cosa.

Cuando os encontráis en una web con la necesidad de dividir en un momento concreto la "tabla central" en dos o tres secciones (por ejemplo, para poner, yo que sé, las 5 últimas descargas, mensajes en los foros y guías), lo haríais con una tabla de tres columnas o tiraríais por cajas?

Para que veáis exactamente a lo que me refiero, en el enlace que os proporcioné antes, justo encima de las noticias tengo 3 columnas (últimos mensajes, últimos jugadores enviados y un hueco negro esperando a que se me ocurra que poner ahí, seguramente alguna imagen).
Actualmente lo tengo puesto con divs y con float left cada uno.

Buf, qué lío de preguntas que os lanzo.

Muchas gracias por vuestras experiencias.

Saludos!

P.D: Me olvidaba de algo, el segundo PD de Mikmoro: Es cierto que hacer que el menú izquierdo se cargue detrás del central no sea muy correcto. Pero no crees que eso favorecerá a la hora de realizar búsquedas? La información principal cargaría antes...
__________________
http://www.fmsite.net/
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 04:32.