JMiur [E]

En una página web, todo es relativo, casi no existen reglas absolutas que funcionen en el 100% de los casos y eso, pese a que muchos opinan lo contrario, no es malo; es lo que permite la variedad aunque también genera los problemas.

Uno de esos problemas suele darlo la propiedad float que es útil pero debe ser usada con prudencia (como todo) y sólo ahí donde sea necesario ya que "trastorna" la forma en que se genera una página, quitando ese contenido del orden natural que es el mismo que se utiliza para leer o escribir (de arriba hacia abajo y de izquierda a derecha).

Frente a cosas raras, lo primero que debería preguntarme es si la propiedad es necesaria o no pero, supongamos que si y tenemos dos DIVs que flotan a la derecha y un texto; el HTML es algo así:
<div class="demoflotante"> ....... </div>
<div class="demoflotante"> ....... </div>
<div> un texto </div>
Si esos DIVs tienen un ancho pequeño, veremos esto:


Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.


El texto, "rodea" a los dos DIVs flotantes pero ... ocupa un rectángulo mayor ¿Cómo puede verse ese espacio? por ejemplo, colocando un color de fondo:


Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.


Tal como hemos puesto el HTML, da la impresión que quisiéramos que el texto se viera debajo y ahi hay tres soluciones posibles básicas.

La primera es agregarle al DIV del texto, la propiedad clear:both; para "eliminar" las flotaciones previas y volver al orden natural o clear:right ya que los DIVs superiores flotan a la derecha:


Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.


¿Qué pasará ahora con el rectángulo? Quedará perfectamente ubicado porque clear hace justamente eso, restaura el orden:


Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.


¿Cuál es el problema de este método? Si el texto tiene un margen superior, este no tendrá ninguna utilidad, será ignorado. En el ejemplo tiene un margin-top: 100px; y como se ve, ni se inmuta.

El segundo método es incluir un DIV extra ANTES del texto; algo así (Blogger dispone de una clase autmática que hace lo mismo):
<div style="clear:both;"></div>
Aunque, dependiendo de la plantilla, tal vez deberíamos agregar más propeidades para resetear todas ya que es posible que tengamos reglas de estilo que establezcan fondos, bordes o cualquier otra cosa y lo único que queremos es hacer un corte así que deberíamos chequear font-size, line-height, margin, padding, border, background, etc o intentar poner height: 0; y ver si eso resuelve las cosas:


Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.


¿Qué pasa con los rectángulos? Se verán igual que en el caso anterior y ahora, el margen superior vuelve a funcionar:


Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.


El último método es el "moderno"; se ve en muchas plantillas nuevas tanto de Blogger como de WordPress y consiste en crear una clase con una regla genérica que se puede aplicar a cualquier etiqueta; se suele llamar clearfix pero puede llamarse de cualquier forma:
.clearfix:after {
  clear: both;
  content: "x";
  display: block;
  height: 0;
  visibility: hidden;
}
pero en nuestro ejemplo eso sólo eliminaría las flotaciones a la izquierda, para hacerlo con las de la derecha, sería igual pero usando :before así que lo genérico podría ser:
.clearfix:after, .clearfix:before {
  clear: both;
  content: "x";
  display: block;
  height: 0;
  visibility: hidden;
}
Esa clase la agregamos al DIV del texto.
<div class="demoflotante"> ....... </div>
<div class="demoflotante"> ....... </div>
<div class="clearfix"> un texto </div>


Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.


El resultado final será similar a la primera opción, los márgenes verticales funcionan de manera extraña y el rectángulo tampoco queda definido tal como uno deseaba.


Proin fringilla ultricies diam, id sodales ipsum suscipit sit amet. Vivamus in libero elit, eu cursus magna. Maecenas sagittis mollis sapien, at hendrerit dui viverra a! Nulla rutrum sapien vel tortor iaculis a amet.


¿Cuál es la mejor solución?

Ninguna de ellas y todas. Depende. Basta saber qué hace cada una de ellas y listo, el resto, depende de nosotros.

10 comentarios:

Alejandro  

Yo desde luego pienso como tú, y en base a la situación que tenga delante, elijo un método u otro. A veces me basta con el clear:both y otras tengo que servirme de un objeto "clearfix", normalmente un "hr", porque no me gusta mucho la idea de añadir un etiquetado extra y dejar elementos vacíos en el flujo... Gracias por el artículo!

Responder
Abaddon Ormuz  

Creo que para evitarme problemas siempre uso clear:both, y eso sólo si en lo que quiero hacer no puedo usar position:absolute y alinearlo con margin.

Responder
FANTASIAS NICKY´S  

hola buen día,ojala pudieran ayudarme, hice mi plantilla para blog en artisteer y todo bien, el problema viene cuando la quiero subir al blog, me aparece el siguiente mensaje -Solo puede existir una única máscara en la plantilla, y hemos encontrado: 0

Error 500-

pero con el código que me genero el artisteer sale sin muchas cosas que si aparecen el el explorador,del documento html que me genero el artister.
no se mucho de esto pero me encantaría subir la plantilla que cree,y no puedo,ya abrí el documento y copie el código de fuente de la pagina,ya la pegue en dw, pero lamentablemente no se mucho de ese programa, pero al momento de darle visualizar se ve perfecto el detalle es para subirlo a blog no aparece como yo lo diseñe; ojala pudiesen ayudarme de verdad se los agradecería mucho

JMiur  

Ese mensaje de Blogger aparece porque en la plantilla no hay una etiqueta <b:skin> </b:skin>

Si cuando hablas del explorador te refieres al código fuente, no, claro, es completamente distinto del de la plantilla ya que justamente, se trata de eso:una plantilla y no una página web común por l otanto, Dreamweaver de poco servirá ya que no podrá interpretarla.

Responder
Ania FM  

Los margin no los interpretan correctamente en estos casos, o como lo que nosotros consideramos correctamente, pero basta cambiar en tu primer ejemplo (en el que se ve el fondo coloreado) el margin-top:30px; por padding-top:30px; y funciona perfectamente.
Si se trata de dar un margin además a todo el bloque lo mejor es englobarlo en otro div que será el que introduzca correctamente el margin.
A mi tampoco me gusta meter código sin contenido, pero para crossbrowsing es de lo más efectivo si quieres remontarte a versiones de ie como la 7 (en la 6 por suerte no me he tenido que meter) y no volverte loc@ en el intento.

JMiur  

Si en ese ejemplo se utilizar padding, el resultado final sería distinto ya que el margen y el padding son dos cosas completamente distintas.

No existe error alguno de interpretación de los navegadores.Son propiedades que funcionan de ese modo y que poseen esas características. Basta saber cuáles son esas características para generar las estructuras que cada uno requiera y que no son universales sino totalmente personales, varían de página en página, dependiendo de lo que se quiera hacer o cómo se lo quiera mostrar.

Responder
Ania FM  

Debe haber algún problema ya que hace más de una semana que le envié respuesta comentando que si bien había tenido (yo) un fallo de comprensión de lo que pretendía hacer realmente en este ejemplo también le comentaba mi discrepancia con lo que decía de los errores de interpretación de los navegadores, exponiendo un ejemplo práctico del caso.
Pero veo que no está publicado a pesar de haber actividad en el blog por lo que imagino será un fallo con el sistema, de ser así hágamelo saber y reescribo el post.
Muchas gracias!

Responder
Ania FM  

Deduzco que sí lo ha habido, intentaré repetir todo lo que dije.

En primer lugar comentaba lo que ya he dicho: que no era eso lo que quería decir con el padding, pero en realidad el problema había sido mío ya que creía que el ejemplo intentaba que el texto fluyera y rodeara las cajas, pero que la capa englobara tanto a texto como a cajas, por lo que el padding sería la solución, es lo que tiene leer a primera hora de la mañana, no pillas del todo.
De todas formas también comentaba que son dos cosas completamente distintas (dicho a modo bruto: uno separa el contenido de fuera del borde de lo que sea que lleve el margin y otro separa el contenido de dentro de ese mismo borde) pero a efectos prácticos y más en tema de crossbrowsing según sea el caso se usará uno u otro para separar los contenidos. Creo que en el otro que escribí me explicaba mejor, pero hoy no estoy tan inspirada. Igualmente no tengo ejemplo de esto, pero a la hora de maquetar en ie7 (que he visto que por otro post decías, de forma resumida, que no hace falta tener en cuenta, hay que tener cuidado con eso. Piensa que el ie7 es el último de los ie que no requiere validar el windows para actualizarlo, así que muchos equipos que siguen manteniendo xp por distintas razones, mantendrán el ie7) esto es muy importante ya que no interpretará de igual forma dos capas contiguas que tengan margin y padding... hará un poco lío.

Y esto me lleva a la otra cuestión que comentaba.
Las propiedades siguen unos estándares definidos y que obviamente hay que conocer, pero ie suele ir bastante a su bola en ese tema (cada vez menos, por suerte) por supuesto que es muy personal el modo en que se emplean los estilos, desde cómo los nombramos hasta qué propiedades se da a cada elemento. Pero lo que sí es cierto es que hay muchos problemas que surgen cuando tratas de maquetar para que se vea exactamente igual en todos los navegadores (cross-browser)y para esto, que sí que tengo un ejemplo, sí hace falta conocer y las variaciones no son tantas:
Imagina un enlace que lleva imagen, que está colocado en una determinada posición y que tiene un espacio limitado, entre otras características. Este sería uno de los muchos ejemplos de estilos:
a { display:block; height:28px; background:#cccccc url(https://www.google.com/a/servicios-dpi.com/images/logo.gif?alpha=1&service=google_default) no-repeat left top; padding:7px 120px; float:left;}
El código es correcto, valida, funciona y se ve tal como quiero en firefox, chrome e incluso ie8. Pero cuando vamos a ie7 (y en mi trabajo mis especificaciones marcan que debe soportar ie7) la imagen del enlace se ve cortada. Para mi eso es un error de interpretación ya que no sigue los estándares marcados para esas propiedades y que se ven claramente en el resto de navegadores.
En este caso la solución mas simple y efectiva que conozco, que no quiere decir que no haya otras, es darle un line-height al texto y variar alguno de los parámetros.

Esta es mi experiencia en el tiempo que llevo trabajando en diseño y maquetación web con el tema de padding, margin y sobretodo estándares que no son estándares y requisitos de proyecto, que no tiene que ser la mejor, me conformo porque a mi me da buenos resultados :)

JMiur  

Por suerte, no existen soluciones únicas a nada de nada. A mi entender, IE7 no debería ser soportado ni tenido en cuenta, quien lo use deberá atenenerse a sus limitaciones; estando al borde de la salida de la versión 10, usar una versión tán vieja pasa a ser responsabilidad de cada usuario y, en última instancia, se debería usar un estilo condicional para ese navegador y nada más pero, aún esto me parece un exceso.

Jamás, ni en el pasado, ni ahora ni en el futuro, los navegadores mostrarán todo del mismo modo. Tienen diferencias, algunas sustantivas, otras no tantas pero jamá habrá un estandard porque eso es justamente lo que permite que evolucionen; aún más en estos tiempos donde se incorporan muchos otros dispositivos (móviles, tabletas,etc). No puede haber estándares cuando son empresas que compiten entre si.

Conocer las diferencias, ayuda a solucionar los inconvenientes y establecer las limitaciones de cualquier cosa que se cree.

Ania FM  

Estoy de acuerdo con lo que dices, al menos con la mayor parte.
De todas formas sí que diré en favor de ie7, además era algo que quería trasmitir antes pero creo que no quedó claro, es que no es tan difícil conseguir que la página se vea "perfecta" (es decir, igual que en el resto) simplemente con unas pequeñas buenas costumbres y sin necesidad de estilos condicionales (que a veces hacen que no valide el css, y vuelvo al tema de requisitos de un proyecto en una empresa que se debe hacer sí o sí, no para algo particular que hay más manga ancha) algo tan simple como usar un line-height en lugar de un padding y cosas por el estilo. Hace mucho que no me toca arreglar problemas de ese tipo cuando compruebo en todos los navegadores, así que me parece correcto, ya que se puede sin mayor esfuerzo, maquetar de forma que incluya a un porcentaje de gente que puede desconocer todo esto de lo que estamos hablando (recordemos que no todos los usuarios de nuestras páginas tienen por qué conocer estos detalles o muchos otros)y que en el caso de una página de una empresa eso puede marcar la diferencia entre un cliente y un usuario que se larga de nuestra página porque no le funciona correctamente.
Y con esto dejo de desviar el tema, que para mi es algo apasionante, pero hemos empezado con flotaciones y fondos y hemos acabado con las desventuras del ie7.
PD, de lo que sí me alegro profundamente es de no haber tenido que lidiar jamás con ie6, por suerte ese sí que ya está obsoleto totalmente...

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR