JMiur [E]

Cuando a un elemento le agregamos la propiedad float, lo convertimos en un bloque pero con una característica especial: su ancho no ocupa el 100% del contenedor sino sólo el de su contenido pero, además, lo quitamos del orden natural de la página; de este modo, todo lo que lo rodea se moverá y se acomodará como pueda para hacerle lugar.

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
Anónimo  

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
Fantasías 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
Anuskhia  

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
Anuskhia  

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
Anuskhia  

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.

Anuskhia  

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 ...

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