Más CSS
Me había emocionado al encontrar en el manual de Sidar.org las propiedades min-width y max-width. Pensé que había encontrado la solución a los problemas de anchos fijos vs. anchos variables. Qué ilusa; no funcionan ni a palos.
Daniel Clemente afirma que ya no hay que usar .gif y en cambio hay que usar .png (excepto en los animados). El Fireworks resolvió la misma imagen en 2/3 del peso del mismo archivo .gif. Pero supongo que no será solo por eso.
En el Firebird me aparecía un espacio (de 30 px aproximadamente) antes de cada div y no podía solucionarlo con nada (margin:0 no andaba). Extrañamente, si le asignaba un border de mínimo 1 px ese espacio desaparecía. Pero esta no era una solución. Finalmente lo resolví con position: absolute; top: 0px; pero sospecho seriamente que no debe estar bien usarlo de esta manera.
Aquí está el archivo html y el archivo de estilos con los que me estoy peleando y esta es la imagen de la home a la que quiero llegar. Como se ve, me falta bastante…
Más trucos
Elementos After y Before
Selector de estilos (no apto IE).
11 comentarios
max-width y min-width no trabajan con IE, es una lástima porque solo con esa propiedad y los ems se puede alcanzar ese ideal que es el diseño elástico. 🙁 . Existe un hack, que usa javascript http://www.svendtofte.com/code/max_width_in_ie/ pero para ser sinceros yo no lo pude utilizar :S.
Lo de PNG y GIF a lo mejor tienen mas bien raíces ideológicas… puesto que el GIF es un formato propietario y PNG es abierto. Aunque PNG puede ser la onda ya que soporta transparencia alfa … pero el navegador mas usado del mundo, IE lo soporta muy piñateramente…
Para evitar los espacios no deseados debes usar margin:0 y padding:0; por alguna razon que ya olvidé, pa variar debe ser culpa de IE…
Tu diseño ya no se ve tan lejos de la meta, si necesitas ayuda a lo mejor te puedo ayudar 😀
Te felicito en aprender CSS, es muy groso de verdad. CSS3 va a estar todavía mejor.Ahora una cosa, cuado empieces a diseñar con CSS/XHTML en serio vas a empezar a odiar a Internet Explorer… Es una basura, de verdad, no soporta ningun estandar y es inseguro.. En mi sitio les doy un popup a los que vienen con IE.. en fin.. en tu post dijiste Firebird.. Firebird no existe más.. es viejisimo.. te recomiendo que te actualizes a Firefox 1.0 http://www.getfirefox.com . Me gusta mucho tu blog.. Saludos – Marc
Algunos consejos prácticos. No van a ser del agrado de los puristas, pero sí van a servir en el mundo real (conozco a varios puristas que se cagan en los usuarios y van a la letra del estándar).
Nunca debe usarse margin: 0 sino margin: 0px. Es obligatorio poner la unidad, aunque los browsers se lo banquen igual.
En tu lucha con el CSS te recomiendo ir a los sitios con tablas de bugs y partir de lo que funca bien en la mayoría de los browsers. Te sugiero ponerte un piso al menos tan viejo como el Internet Explorer 5.0 (que es el que se instala en Windows 2000). Con Mozilla y Firefox podés ser más estricta ya que el que usa esos browsers es poco probable que mantenga una versión muy vieja. De Mac no te puedo decir nada, excepto que aparentemente son pocos los que usan Internet Explorer 5 y más los que usan el otro navegador (¿Konkeror?).
Ojo que el «box-model» (es decir, el significado de margin, padding, border) cambia según el DOCTYPE que uses. Vos estás usando TRANSITIONAL (que es lo que más te recomiendo).
No uses nunca posiciones absolutas para elementos que se dibujan en el flujo normal de la página. La posición absoluta es para elementos flotantes. Cuando vos ponés algo en posición absoluta, esto «sale» del flujo normal, y las cosas se le pueden poner arriba o abajo (normalmente abajo). Lo que sí podés usar (aunque es una chanchada) es posición relativa, y usando top/left/bottom/right podés correrlo hacia las cuatro direcciones una cantidad de pixels. Por ejemplo, top: -3px lo corre tres pixels para arriba, pero -a diferencia de la posición absolulta- el elemento sigue ocupando un espacio en el flujo de la página.
No hagas demasiado uso de atributos y selectores raros (tipo attr(cite), :first, etc.). Muchos browsers no se los bancan. Incluso el :hover, que está hace mil años, en Mozilla y derivados sólo funciona para el tag «A». Tampoco uses mucho selectores del tipo «el A que está dentro de un DIV que sea de clase miclase» porque son lentísimos. Ej:
DIV.miclase A { algo }.
Eso es lento, porque a cada A que encuentra el browser tiene que recorrer el árbol para arriba a ver si hay o no alguna DIV con clase miclase. Es preferible que definas otra clase para el A.
Finalmente, no son necesariamente malas las tablas. Las tablas SÍ deben usarse para información tabular. Están para eso. No deberían usarse para generar una grilla de trabajo para posicionar los elementos más fácilmente, pero hoy en día aún es necesario usarlas en muchos casos.
Un sitio que me resultó muy útil es:
http://www.quirksmode.org/
Si bien el flaco no es diseñador sino programador, tiene justamente mucha experiencia en hacer funcionar los sitios en muchos browsers y lo más compatible posible.
Me parece que (hasta donde recuerdo) un cero es un cero, y no hace falta incluirle la unidad de medida.
Sobre el GIF, creo que la patente que lo «protegía» ya se venció.
Estuve tocando un poco el archivo CSS y no hubo problemas en borrar los position:absolute.
Igualmente todavía me faltaría lograr el efecto en la navegación (del que ya tengo planeado como hacerlo).
Acá te dejo el archivo CSS y la imagén de fondo modificada para lograr ese efecto de «fondo amarrillo a la derecha».
CSS
Imagen de fondo
Por último, para hablar de la UBA, usá acronym, no s.
Sosa: voy a ver a qué te referís con que el IE no soporta muy bien el PNG… por ahora no tuve problemas ¿es en otras versiones?.
Ya estoy mirando mal a Microsoft, para no ser menos 😛
Marc E.: Acabo de descubrir que tenía un lindo lío con el Firebird y Firefox. En algunos lados figuraba de una manera y en otros de otra. Supongo que habré instalado el Firefox sin desinstalar el otro, pero no veo porqué se armó semejante lío. En fin. Borré lo que quedaba del Firebird e instalé el Firefox (¡cosa que ya creía haber hecho!). Gracias.
Guille 😉 : ya estoy corrigiendo… a ver como resulta.
Federico: ¡Muchas Gracias! Ahora lo voy a chusmear a ver qué tocaste. No sé a qué te referís con el efecto de navegación, pero lo que más me preocupa es lograr que al hacer over sobre cada link, se vea el titular correspondiente. Tengo una vaga idea de como debe hacerse (con div’s que se ocultan) pero no lo implementé todavía.
Acronym, ok, anotado 🙂
Gracias, gracias, gracias…
Cualquier cosa si queres mas ayuda, ahí queda el mail. Me copa hacer estas cosas de CSS.
Sobre lo de la navegación: en la foto, el boton que dice home muestra como un borde naranja debajo de «IRENE FERNANDEZ». ¿Tu idea es que ese borde aparezca en cada :hover? Lo de los titulares me temo que no lo entiendo.
Por cierto, todo lo que está comentado en el archivo CSS puede ser borrado sin problemas (por eso lo comente 😉
Guille dijo:
«No hagas demasiado uso de atributos y selectores raros (tipo attr(cite), :first, etc.). Muchos browsers no se los bancan. Incluso el :hover, que está hace mil años, en Mozilla y derivados sólo funciona para el tag «A».»
Creo que estás confundido, tanto los selectores atributos funcionan en Mozilla, Opera y otros.
Lo otro que creo que estás confudido es que la propiedad :hover funciona sólo en el tag A, esto sin dudas no es cierto, yo lo aplico en un montón de casos A, TR, TD, CITE, P, etc.
Los selectores del tipo padre-hijo, hijo-padre son tan y más útiles que cualquier cosa.
La velocidad de un CSS no pasa por los selectores, sino por el mismo navegador cuando las procese (si tienes una máquina super rápida te aseguro que no notarás ni la más mínima diferencia.)
div a es un selector tan rápido como otro, y trae menos problemas ya que, se aprovecha mejor la naturaleza de las hojas de estilo (cascada, herencia, peso) y no se clasea toda la página, no tienes que reescribir reglas, ni tampoco tienes que llenar el código HTML.
Irene, te conviene leerte y experimentar más con las especificaciones de W3.org o sino también un recurso interesante y muy bien explicado: http://www.tierradenomadas.com/
No cometas el error de clasear toda la css, utiliza siempre las propiedades de herencia y cascada.
Con el tiempo y la experimentación notarás que es más práctico y correcto utilizar las propiedades como te lo acabo de explicar.
No para corregir sino aportar: Mini-d tiene razón sobre el hover, pero vale aclarar que IE sólo soporta esa clase para el elemento a. Incluso sería con IE donde tendría problemas si usas ciertos selectores (por ejemplo, el de atributos, el de hijos directos). No es que no haya que usarlos, pero por el momento es mejor usarlos con precaución.
Si lamentablemente IE soporta muy pocos selectores que son de suma utilidad. Por ejemplo los de secuencia E + E, los de atributos a[atrb], y la cantidad de comandos que no responden como content: y otros… IE es un limitante a la hora de experimentar con CSS.
En criollo yo diría, por ejemplo, para que utilizar una clase .titulo si para título ya tienes H1, H2, H3 – H6?
Creo que es también lo que explica Mini-d.
De cualquier manera me parece buenísimo que te estés ocupando de este tema, un gran porcentaje de diseñadores recién saliditos del horno prefieren la comodidad de creer que internet es Flash … que triste, no?