cambiar table x div

[xamilo]

si bien en las preguntas frecuentes esta y todos dicen
que hay que armarce de paciensia y leer mucho para lograr esto

es tan conveniente? no es tan facil como remplazar table x div?


eso... salu2

[ElJavista]

No creo que sea tanto así como dices: No sé como lo intentarás tú, pero yo solo uso las propiedaes width y float y todo me queda ok, de manera simple y rápida. Definitivamente al menos para mi es más conveniente maquetear usando divs porque resulta menos complicado y un código más simple.

Talvez hayas visto algún manual que enseñe a maquetear usando position: absolute y left en porcentaje. Eso puede ser necesario siempre cuando se te ocurra la genialidad de hacer una web que se ajuste a la resolución de la pantalla. Lo más conveniente siempre es definir un ancho determinado a la página. Haciendo esto, el tema de la maquetación con divs se hace mucho más simple, tanto que para hacer dos coloumnas contiguas solamente tienes que hacer esto:

<div style="width: 300px; float: left; margin-right">
Izquierda
</div>
<div style="width: 300px; float: left">
Derecha
</div>

Así de fácil, también para algunos casos se puede usar la propiedad clear para evitar que algunos elementos floten a lado de otros. En fin amigo. Si eres de lo que de todos modos quieren hacer páginas que se ajusten a la resolución del monitor lo que te dije no tiene valor, no sirve. Pero si no, es la opción más simple y conveniente que hay. Espero que mis comentarios te hayan servidor de algo. Suerte!

[xamilo]

si me ayudo bastante =)

ahora estoy cambiando todo.....
y eso de resolucion de pantalla automatica para una pagina
NA!!!!!!!!!! no pretendia hacer eso no me gusta :P

ya salu2 y gracias

[Ryo]

Iniciado por xamilo

si me ayudo bastante =)

ahora estoy cambiando todo.....
y eso de resolucion de pantalla automatica para una pagina
NA!!!!!!!!!! no pretendia hacer eso no me gusta :P

ya salu2 y gracias

Tienes que tener en cuenta que no eres el único visitante de tu página y ajustarse a la resolución de pantalla hoy en día es algo no solo recomendable, sino imprescindible. No puede ser que una página tenga las mismas medidas absolutas se vea en un teléfono móvil o en un televisor de 42".

[xamilo]

odbiamente los campos e imagenes dentro del contenedor estan al 100%
asi cambian segun la resolucion de pantalla ....

pero no era lo que YO estaba preguntando ^^

[ElJavista]

Iniciado por Ryo

Tienes que tener en cuenta que no eres el único visitante de tu página y ajustarse a la resolución de pantalla hoy en día es algo no solo recomendable, sino imprescindible. No puede ser que una página tenga las mismas medidas absolutas se vea en un teléfono móvil o en un televisor de 42".

Imprescindible dices? no lo creo, hasta existe una medida que se considera como un estándar y eso es 760px. He hecho una página con ancho fijo y se veía bien en un IPhone. La verdad no veo el problema, las personas que usen el televisor (querrás decir monitor de 42'' o 52'' la verán dependiendo de la resolución de su pantalla, no del tamaño del monitor. Si es una resolución muy alta, la verán muy pequeña, pero hacer que se ajuste a la resolución tampoco hará que todo se vea bien. Qué pasarán con las imágenes? Si tienen un ancho variable podrían pixelearse al agrandarse, como solucionas eso? mediante PHP con JavaScript? Pues esa solución es factible pero podría hacer demasiado proceso.

Uno debe saber que hagas lo que hagas es imposible que el 100% de visitantes lo vean perfecto. Eso es absolutamente imposible. Mi filosofía de trabajo es pensar en porcentajes, si la gran mayoría lo puede ver y usar bien para mi basta. Y la mayoría de personas usan la resolución 800 x 600 y 1024 x 768. Así que basta una medida fija para que la gran mayoría lo vea bien. Yo no voy a hacer el doble de trabajo pensando en el 1% de visitantes. No sale a cuenta. Esa es mi filosofía.

[Ryo]

Andas bastante desencaminado en lo que dices y usas malas referencias... Pero no seré yo quien te diga cómo tienes que hacer las cosas si no buscas consejo.

[ElJavista]

En serio? es fácil decir que uno está mal y no explicar por qué. Ni siquiera haz explicado como harías con los problemas de las imágenes, cualquiera diría que sabes como resolverlos. En fin, felizmente ya no hago páginas web, ahora hago sistemas web que se instalan en el servidor del cliente, de ese modo me ahorro muchos de los problemas que se mencionan en este tema.

[Ryo]

Imprescindible dices? no lo creo, hasta existe una medida que se considera como un estándar y eso es 760px.

Eso me quita, por ejemplo, la posibilidad de no tener maximizada la ventana de tu página (la navegación sería horrible), amén de todos los problemas que existirán si accedemos desde dispositivos móviles, a no ser que hayas diseñado una plantilla distinta para los usuarios que accedan así. En general, los anchos fijos quitan libertad al usuario y eso hoy en día se está intentando corregir.

He hecho una página con ancho fijo y se veía bien en un IPhone.

El iPhone precisamente no se comporta como otros teléfonos móviles a la hora de mostrar páginas web; no es la mejor referencia que podrías haber buscado. De todas formas, si para ti "bien" es ir teniendo que hacer zoom por las distintas secciones y que además exista la posibilidad de ver todo el ancho de la página a la vez sin poder leerse nada porque la letra es minúscula... Tenemos ideas distintas de lo que es "bien".

La verdad no veo el problema, las personas que usen el televisor (querrás decir monitor de 42'' o 52'' la verán dependiendo de la resolución de su pantalla, no del tamaño del monitor.

Evidentemente, pero normalmente un mayor tamaño en el monitor implica que también se usará una resolución mayor.

Si es una resolución muy alta, la verán muy pequeña, pero hacer que se ajuste a la resolución tampoco hará que todo se vea bien.

Tratar resoluciones muy altas puede ser complicado. A veces se usan para esto anchos fijos, pero no directamente en el width, sino en la propiedad max-width. De todas formas, en última instancia, un usuario de resolución alta que no se sienta cómodo con cómo ve una web concreta, puede no tener la ventana maximizada y asunto resuelto. O a lo mejor le gusta que la parte de contenido se vea con un ancho tan grande que quepa sin tener que usar la barra de desplazamiento.

Qué pasarán con las imágenes? Si tienen un ancho variable podrían pixelearse al agrandarse, como solucionas eso? mediante PHP con JavaScript? Pues esa solución es factible pero podría hacer demasiado proceso.

Las imágenes son un tema más complicado. Evidentemente son de ancho fijo, sí o sí. Eso sí, se pueden tener imágenes de distintas resoluciones a mostrar en función del tipo de dispositivo desde el cual se esté accediendo. También se puede tener un diseño alternativo a mostrar en dispositivos móviles, sin imágenes decorativas (ventajas en muchos sentidos).

Yo no voy a hacer el doble de trabajo pensando en el 1% de visitantes. No sale a cuenta. Esa es mi filosofía.

Hace poco salieron los resultados de un informe (http://download.aimc.es/aimc/03internet/macro2009.pdf) que dice que al menos en España el 33% de los internautas accede desde teléfonos móviles. No todas sus visitas serán desde un móvil, desde luego, pero me parece un dato a tener en cuenta. Y, desde luego, usar medidas absolutas no afecta sólo a ese 33%,

[ElJavista]

Gracias por tus explicaciones, aunque a decir verdad la primera explicación no entendí siquiera a qué te referías. En fin, tienes razón en varios puntos, de todos modos a Dios gracias que ya no hago páginas web, solo sistemas web. :D

[ehguacho]

Iniciado por Ryo

Tienes que tener en cuenta que no eres el único visitante de tu página y ajustarse a la resolución de pantalla hoy en día es algo no solo recomendable, sino imprescindible. No puede ser que una página tenga las mismas medidas absolutas se vea en un teléfono móvil o en un televisor de 42".

eso lo vi en facebook. en mi pc se veia re piola con mi monitor viejo y cuadrado... fui a lo de mi novia, q tiene un monitor wide screen y el facebook se veia como un palito en el medio y a la izquierda y derecha de la pantalla todo blanco. un espanto! me parecio rarisimo q en un sitio de la calidad de facebook no hayan considerado esa cuestion...

[ElJavista]

El Facebook se encuentra actualmente entre las 5 primeras páginas más vistas del mundo, y seguro sus desarrolladores piensan un poco como yo, para qué van a trabajar casi el doble para que unos cuantos privilegiados queden contentos? La gran mayoría no tiene quejas del facebook, al punto que es la Red Social más popular del mundo y la utilizan muchas empresas y hasta programas de televisión están ahi. Eso demuestra que el requerimiento de que una página web deba adaptarse a cualquier resolución no es tan indispensable que digamos.

[Ryo]

Iniciado por ElJavista

El Facebook se encuentra actualmente entre las 5 primeras páginas más vistas del mundo, y seguro sus desarrolladores piensan un poco como yo, para qué van a trabajar casi el doble para que unos cuantos privilegiados queden contentos? La gran mayoría no tiene quejas del facebook, al punto que es la Red Social más popular del mundo y la utilizan muchas empresas y hasta programas de televisión están ahi. Eso demuestra que el requerimiento de que una página web deba adaptarse a cualquier resolución no es tan indispensable que digamos.

A las resoluciones muy grandes no se les suele dar tanta importancia (o bien se pone un ancho máximo por considerarse que no ponerlo afecta demasiado al diseño), pero te aseguro que a Facebook no le falta, por ejemplo, su versión web (y aplicaciones) para teléfonos móviles, porque saben que en un móvil su diseño estándar no se va a ver bien.

[ElJavista]

Pues honestamente no sé si tendrá, pero eso es otra cosa, eso es algo recomendable si es que quieres que esos usuarios que seguro son muchos lo vean bien. De eso no estoy hablando yo.

[ehguacho]

Iniciado por ElJavista

Pues honestamente no sé si tendrá, pero eso es otra cosa, eso es algo recomendable si es que quieres que esos usuarios que seguro son muchos lo vean bien. De eso no estoy hablando yo.

totalmende de acuerdo! tampoco seria un trabajo demasiado arduo hacer que la resolucion se adapte a los wide screen. ademas no es q sean "unos pocos"... ese tipo de monitores esta muy en boga. como sera que tuve que comprar un monitor y estuve esperando dos semanas para que me consigan uno que no sea wide screen!

[Ryo]

Iniciado por ehguacho

totalmende de acuerdo! tampoco seria un trabajo demasiado arduo hacer que la resolucion se adapte a los wide screen. ademas no es q sean "unos pocos"... ese tipo de monitores esta muy en boga. como sera que tuve que comprar un monitor y estuve esperando dos semanas para que me consigan uno que no sea wide screen!

Una cosa es que la pantalla sea ancha (¡no hay ningún problema con eso!) y otra que uses una resolución exageradamente grande. Wide screen se refiere a la relación de aspecto (mayor a 4:3, normalmente 16:9 o 16:10, supongo, no estoy muy puesto en este tema), no a la resolución. Y tienes razón, los monitores con una relación 4:3 no son muy comunes hoy en día, ni se me ocurre el motivo por el que pudieras tener tanto interés en que tu monitor fuera de este tipo.

Pues honestamente no sé si tendrá, pero eso es otra cosa, eso es algo recomendable si es que quieres que esos usuarios que seguro son muchos lo vean bien. De eso no estoy hablando yo.

Hombre, pues sí, la idea es precisamente esa: que los usuarios puedan ver bien la página.

[ElJavista]

Bueno Ryo, ya que dices que es indispensable que la web se adepte a la resolución de la pantalla, dime como lo haces tú usando CSS y DIVs.

[ehguacho]

me gustan mas los monitores cuadrados viejos porque el cristal liquido me hace doler demasiado la cabeza, no se porque...

[Ryo]

Iniciado por ElJavista

Bueno Ryo, ya que dices que es indispensable que la web se adepte a la resolución de la pantalla, dime como lo haces tú usando CSS y DIVs.

Lo básico es utilizar medidas relativas en lugar de absolutas y tener un poco de cuidado con el tamaño de tus imágenes. Luego ya si haces una plantilla distinta para los dispositivos móviles, mucha gente podrá navegar de forma más cómoda.

De todas formas, seguro que hay por ahí un montón de documentos de ayuda sobre el tema que den explicaciones más profusas de las que te pueda dar yo.

[ElJavista]

Cierto y ya las leí, solo quería saber tu modo, pero no pude resolver un problema. El problema es que cuando usas medidas relativas el espacio entre DIVs no es constante y muchas veces son diferentes. Imaginate una web con bloques, o sea, que cada DIV tenga un borde y que se en tres columnas, eso haría que se vea claramente los espacios entre cada DIV, nunca conseguí que esos espacios sean iguales. No probé con porcentajes decimales, no sé si así funcionaría.

[Ryo]

No, claro, si los márgenes también son relativos, el espacio absoluto entre divs no será el mismo. De todas formas, no termino de ver cuál es el problema. Si las medidas son relativas a la configuración del usuario, es consecuencia inevitable que los usuarios no vean la web exactamente igual.

Para los márgenes y demás medidas que suelen ser pequeñas se puede usar perfectamente el tipo em (1em=ancho de la letra m en la configuración actual) y el resultado no me deja descontento, desde luego. Pero bueno, depende bastante de lo que quieras conseguir, cosa que no ha quedado del todo clara. ¿Cómo lo haces tú?

[ElJavista]

No me expliqué bien o no me entendiste bien, no hablo de que cuando cambia la resolución las márgenes cambien también relativamente. Hablo de que en una misma pantalla la margen que separa el bloque izquierdo del bloque central no me resultaba igual que la margen que separa el bloque central del bloque derecho. Ese era mi problema.

[Ryo]

Eso será porque los márgenes (o padding) que les das no es igual para las dos partes. Porque eso que comentas sí que no es un problema; se puede hacer perfectamente. Para decirte cómo corregirlo tendría que ver cómo lo has hecho exactamente.

[ElJavista]

No usaba margin para este caso y los paddings no tienen nada que ver. De todas maneras los paddings siempre eran iguales. Lo que pasaba era esto:

Según el manual que usé, la manera de hacerlo era mediante porcentajes y position absolute en los bloques. Digamos para hacer tres columnas:

<div class="left">Izquierda</div>
<div class="center">Centro</div>
<div class="right">Derecha</div>

Código:

.left {
  position: absolute;
  width: 30%;
  left: 0%;
}

.center {
  position: absolute;
  width: 48%
  left: 32%;
}
.right {
  position: absolute;
  width: 18%;
  left: 80%;
}

Esto así seguro funciona y se ve ok, pero si le ponemos un borde resulta que se aumentará el ancho total, con lo que el porcentaje no será exacto, talvez sea por eso que los espacios no quedaban iguales. De todas maneras esa es la forma que intenté, talvez haya una mejor forma, podrías decirme qué propiedades CSS utilizas tú para hacer la maquetación.

[Ryo]

Puede funcionar, pero te aconsejo evitar las posiciones absolutas en medida de lo posible... Se pueden utilizar y yo las he utilizado en alguna ocasión, pero mejor dejarlas para cuando efectivamente necesites que algo esté en una posición concreta. No es el caso. En este caso, como la posición es absoluta, si el ancho de algún div cambia eso no afectará a la posición de los demás y se puede desmoronar todo. Podría incluso quedar algún div encima de otro. Y es que eso es lo que hacen las posiciones absolutas: "de aquí no me mueve nadie", dicen los div.

Usa la opción que planteabas más arriba: los float (sin posiciones absolutas, por supuesto). Es la mejor solución que se me ocurre.

[ElJavista]

Ok, yo no lo hago de esa manera, tú sabes que yo no uso eso, solo lo vi en un manual, yo uso float, la gran pregunta es, tú qué propiedaes CSS usas, no te fijes en mi código, tú cómo lo haces?

[Ryo]

Con la propiedad float; ya te he dicho que me parece la mejor solución. Puedo meterlo todo dentro de otro div más general y el resto de propiedades "obligatorias" a usar suelen ser clear y margin...

No entiendo qué quieres saber exactamente. Me has expuesto un problema y me has preguntado cómo solucionarlo. Ese problema se debe a que se usan posiciones absolutas, por lo que la solución que he ofrecido es no usar posiciones absolutas... No entiendo qué parte de la pregunta queda por contestar.

[ElJavista]

Si si, ya entendí, solo quería que los demás, que no son tan expertos como tú y yo, vean la solución en código, pero en fin, ya lo tengo bien claro, lo vi claramente cuando terminé de enviarte la anterior pregunta. Gracias.

Yo mismo publico la solución en código:

Código:

.left {
  width: 30%;
  float: left;
}

.center {
  width: 48%
  float: left;
}
.right {
  width: 18%;
  float: right;
}

También podría emplearse margins, pero no es necesario en este caso. Ahí está la solución, me gustó porque es simple, no usa position: absolute (a mi me parecía aberrante hacer una diagramación con puras capas) y usa lo que siempre usé: float, lo único diferente es que se usa anchos porcentuales. Talvez debí buscar más manuales antes de decidirme por una opción. Eso es todo.

[Ryo]

Eso funcionaría, pero como nota decir que la clase .right no necesita el float: left;. Eso sería para poder poner más divs a su derecha, cuando se entiende que .right debe estar a la derecha del todo.

De todas formas, esto se está saliendo bastante de lo que debería ser, viendo que este tema trataba de tablas y divs y este foro en general trata de HTML y no de CSS... Así que mejor dejarlo aquí. Si quieres seguir debatiendo sobre estas cosas o similares, creo que lo mejor será que abras un nuevo tema en el foro de CSS.

[ElJavista]

No, ya no quiero debatir más, ya estamos de acuerdo, no? además lo que dices de .right ya fue corregido antes que lo mencionaras.