imagen de matsuyuki
Una mirada al box model
¿Sabes exactamente de que se trata el padding, border y margin en CSS?, pues todo eso está basado en cómo el CSS ve los elementos, el box model.
La idea del box model es que el CSS trata a cada elemento como si fuera una caja (box).
¿Box Model?
Imagina que tus elementos HTML (no importa cuales) son cajas, veamos de que se trata.
Area de Contenido
Todo elemento tiene contenido, no importa si es texto o una imagen. Se encuentra dentro de una caja que es del tamaño exacto de ese contenido, es decir que no hay espacio en blanco entre él y los bordes de la caja:
Padding
Te puedes imaginar al padding como espacio vacío alrededor del contenido, el padding es opcional y es usado para crear espacio en blanco:
Border
Los elementos pueden tener un borde, el borde siempre se encontrará alrededor del padding.
El CSS te permite darle ancho, color y estilo a los bordes.
Margin
El margen es también opcional y rodea al borde, se usa para separar a los elementos visualmente.
Margin y Padding
Puede ser un poquito dificil entender la diferencia entre padding y margin, El margen da espacio entre elementos diferentes mientras que el padding te da espacio extra alrededor del contenido (esto se entiende mucho mejos cuando el elemento tiene un borde).
Piensa en el padding como parte del elemento mientras que el margen rodea al elemento y lo separa del resto.
Aquí hay algunos ejemplos de los que se puede hacer con padding, border y margin
¿Que se puede hacer con el box model?
Ahora ya conocen el box model, es hora de empezar a practicarlo...
Etiquetas:
si te gustó esta entrada, tal vez quieras suscribirte via RSS
Hola, soy
Comentarios
deja un comentario
Excelente, el tema es que siguiendo el estándar vamos a tener mil y un problemas debido al box model de IE(<=6) :(
Jj, tengo la esperanza de que pronto desaparezca IE6 :P, mi teoría es simple (y la puedes ver al final de este post: http://aprendiendoweb.com/2008/08/no-todos-los-navegadores-fueron-creados-iguales ).
La gente que usa IE6 está acostumbrada a ver las páginas mal, no saben lo que se pierden.
Hey tio IE6 no ha desaparecido ni de Norte America ni de Europa. Sabes cuantos años pasarán para que desaparezca de PERÚ???
Si solo diseñas para IE7, Firefox y Opera estas perdiendo una gran audiencia(al menos en Perú) que usa IE6.
Vamos que si te lo propones puedes hacer un website soportable en todos los navegadores. Yo siempre lo logro y sin usar condicionales.
PD: tienes un buen blog y este es un buen articulo sobre box model aunque no se trata de como lo ve el CSS sino el navegador :p
Saludos
Hola Laren,
no hablo de no soportar IE6 en ninguna página, me refiero simplemente a usar las características de los navegadores modernos y si IE6 no las soporta pues piña.
Si quieres bordes redondeados por ejemplo puedes usar CSS3 y olvidarte de usar imágenes (que al final lo único que hacen es o ensuciar el marcado o hacer que la página sea más pesada).
Aquí lo único que pasará será que en IE6 los bordes se verán rectos.
Ahora, el layout sí debería verse bien en cualquier navegador.
Lo único que digo es que hay que aceptar de una vez las diferencias entre navegadores y darle a la gente que tiene un navegador moderno la mejor experiencia posible.
Hummm yo optaría más por intentar ser siempre crossbrowser así mi web llega de la misma forma a más gente. Aveces un cuadro redondeado queda tan bien en un diseño y tan mal si no se usa...:D
Además ahi esta el reto no?
Laren, está discusión está de lo más interesante.
Para mi crossbrowser no es es necesariamente que la página se vea igual en todos los navegadores, es más bien que sea funcional.
En mi opinión el HTML debe ser 1 sólo, y si empezamos a agregar etiquetas HTML sólo para que un navegador específico pueda tener ese borde redondeado, entonces estamos ensuciando el código.
Para mi más bien el reto es exprimir hasta la última gota de estilos que puedo usar con navegadores antiguos y usar el resto de funcionalidades de los navegadores modernos para que esas personas tengan una experiencia acorde con sus navegadores.
¿Que opinas?
Pues para mi la idea es parecida. Pero opino que conociendo bien CSS puedes hacer que un website se vea IGUAL en IE6, IE7 y Firefox 2 y 3.
------
"Imagina que tienes un website para niños y está hecho a base de cuadros redondeados con CSS3.
En navegadores antiguos mi website se verá cuadrado totalmente, así ya no le gustará mucho a los niños y perderé a mi publico." :(
------
Es a esto a lo que me refiero cuando digo que una web debe verse igual en los navegadores que mi público usa. Es cierto que es difícil, pero es posible.
------
Por otro lado, como diseñadores no estamos obligados a hacer un "DISEÑO" crossbrowser. Aveces el tiempo es corto para un proyecto y uno opta por alternativas que no son correctas pero sirven.
Con respecto a lo de crossbrowser tienes razón. Se trata que el website funcione igual en los navegadores que tu publico usa y eso va mas allá del diseño(aunque no lo ignora). Función y diseño van de la mano en ese sentido.
@Laren, es sólo en parte posible hacer eso si conoces CSS, básicamente porque IE6 no reconoce todos los selectores que hay en CSS.
Sip...justo ahi esta el problema. Si fuera facil todos serían diseñadores Web.
-
IE6 no soporta algunos selectores(muchos...!!!) asi que necesitas manipular de forma diferente tu hoja de estilo para amoldarla a ese navegador.
-
La manera más facil de salir de ese tipo de problemas es usando condicionales y llamar a hojas de estilo diferentes para versiones anteriores a IE7. Tu codigo HTML no se ensucia con esto y ahorra muchos dolores de cabeza.
-
Pero también está la forma dificil. Que es usando una sola hoja de estilo.
Siempre es mejor usar los condiconales, hacer más pesada tu hoja de estilos sólo para un navegador es poco eficiente.
Y a veces es imposible hacerlo sin ensuciar el HTML.
Yo también estoy a la espera de que muera IE6 y amigos...
Por suerte un par ya han dejado de soportarlos
http://37signals.blogs.com/products/2008/07/basecamp-phasin.html
http://www.apple.com/mobileme/
Esperemos que más de nosotros tengamos los huevos para hacerlo también :D
Como dicen muchos, una buena filosofía es diseña para estándares y luego hackea para IE6 (por ahí hay un piechart muy divertido sobre la inversión de tiempo en diseños y el tiempo gastado por IE6)
Si he visto ese piechart... xD y no se puede negar que poco a poco IE6 va en bajada. Pero aqui en Perú creo que aún sigue en la cima y se le acerca IE7.
-
Ahora con respecto a los condicionales, hay que tener en cuenta que es un pequeño trozo de codigo que colocas en todos tus HTML y siempre se carga. En cambio CSS se carga una sola vez. Por ahi que puede haber equivalencias de peso.
Esto va a servir aqui:
http://www.w3counter.com/globalstats.php
Estadisticas de la W3C sobre el uso de navegadores. Dense cuenta que IE6 va de bajada pero aun esta en la cima mientras Firefox compite con IE7 por se el nuevo estandar.
Esta es una cuestión de filosofía, mi idea es no dejar que las limitaciones de IE6 me impidan darle la mejor experiencia de usuario a las personas que (con justa razón) prefieren usar un mejor navegador.
Cómo bien dice Jj, muchas compañías como 37 signals están dejando de soportar IE6.
Cuando creamos prezentit.com ya teníamos esta idea en mente, por eso es que ahí tampoco lo soportamos.
Como ya lo he dicho antes, depende mucho de tu publico. No creo que Prezentit.com haya sido diseñado para gente desactualizada.
Me atrevería a decir que el perfil de tu publico es gente que ya conoce algo de como funcionan las WebApp y sus beneficios.
----
Mi filosofia es ser accesible. Y ser accesible implica que la web es para todos o almenos la gran mayoría. Y la gran mayoría por ahora son gente que usa: (en orden de mayor a menor uso)
- Internet Explorer 6 (34%)
- Internet Explorer 7 (26%)
- Mozilla Firefox 2 (22%)
- El resto no suman ni 10%. Y cuando IExplorer 6, se encuentre en este lugar, con todo gusto del mundo (y con todo el soporte del mundo)dejaré de diseñar para el.
----
Saludos.... xD
Pues sí, yo estoy de acuerdo con Laren, a mi la mayoría de visitas también me vienen de con usuarios que utilizan Ie6.
Ahora,siempre intento calentarme un poco más la cabeza, y que los diseños se vean de la mejor manera posible en todos los navegadores, pero hasta que encuentre tiempo para lograr que en todos ellos se vea igual, seguiré probando sobre todo con IE6.
Hola te felicito por tu trabajo, tengo que confesarte que tu trabajo me esta ayudando para desarrollar el diseño de la pagina web de mi escuela, de verdad, haces un rol muy importante para los novatos, un saludo de REP. DOMINICANA, y sigue, asi, y no te dejes caer por las malas criticas, al contrario continua fortaleciondote.
Adios
---------------------------------------------------------------------
By DIMITRI.
Deja un comentario