Re: [Ovillo] Dar estilo a un div: Herencia o clase e specífica
2010/4/21 Camilo Kawerín
> 2010/4/21 Rafa Artacho
>
> > Me surge la siguiente duda:
> >
> > ¿Qué ventaja obtengo declarando una clase de este modo
> >
> > #footer .footer-links .bloque-links-imagen ul{
> >
> > respecto a aplicarle al ul en particular una clase específica?
> >
> > darle contexto de donde se está utilizando?
> >
> >
> >
> Antes que nada, una cuestión de concepto: "clase" se llama el tipo de
> selector precedido por un punto en CSS e indicado con el atributo class en
> HTML. La línea que citás se llama correctamente "selector" y forma parte de
> una "regla".
>
> La diferencia entre hacerlo de la forma en que citás o agregando un class
> al
> elemento en particular depende en parte del gusto de cada uno y en parte de
> mantener ciertas "buenas prácticas". Sobre esto último, te comento algunas:
> - si no es necesario, no conviene poner la "ruta" completa al elemento; por
> un lado porque para los navegadores es preferible mantener los selectores
> simples (tenía un enlace sobre eso, pero no lo encuentro ahora) y por otro
> porque en un futuro podrías hacer cambios en el HTML y te obligaría a
> editar
> también la hoja de estilos.
> - si el estilo de un elemento es muy específico, conviene seleccionarlo
> directamente agregándole un class al elemento mismo; de esa forma, si más
> adelante necesitás agregar un elemento similar en el mismo contexto, pero
> con diferente estilo, no necesitás modificar lo que ya está hecho.
> - no conviene "pegarle" directamente a elementos tan comunes como DIV o
> SPAN, por ejemplo, porque nunca se sabe cuándo hay que agregar uno extra;
> ni
> se puede evitar que si cae en mano de programadores .Net, por ejemplo, te
> llenen el código de elementos extras
>
>
> > Recomendáis siempre asignar una clase teniendo en cuenta su posición en
> los
> > divs principales de la página?
> >
> >
> Depende: si necesitás una regla para definir estilos de texto (font-size,
> font-style, color, etc.) conviene hacerlo con un class independiente (por
> ejemplo: .links a secas); y si necesitás una regla para definir
> posicionamiento de un elemento, conviene hacerlo con un selector
> relacionado
> al contexto (por ejemplo: #footer .links )
>
> Saludos
>
> --
> Camilo Kawerín
>
> Desarrollo Web
> Radio Nacional
> www.radionacional.com.ar
>
>
Rafa,
respecto la pregunta de si usar una ruta muy específica para cada estilo, o
aplicar un estilo distinto a cada tag, la respuesta es: ninguna de las dos.
Ambos ejemplos son los extremos opuestos. Ninguno es muy reutilizable. Lo
ideal es buscar un equilibrio a mitad de camino de los dos. No hay una regla
de si usar 1, 2, 3, 4 selectores es lo ideal. Yo creo que con uno o dos
selectores vas a poder aplicar la mayoría de tus estilos y a su vez,
mantenerlos reusables, pero eso obviamente depende de cada sitio y cada
persona...
En el ejemplo que pasaste, quizás podrías hacer algo asi:
.link-list ul { ... }
.link-list li { ... }
.link-list a { ... }
Lo que te serviría para definir los estilos de una sección que liste
distintos tipos de links. Eso te puede servir para el footer, o quizás para
un sidebar o lo que sea.
Ahora suponete que tenés una lista de links en un sidebar y otra en el
footer, pero querés cambiarle al footer algunos estilos, entonces podés
definir algo como esto:
#footer.link-list ul { ... }
entonces tenés estilos reutilizables (para cualquier lista de links), pero
diferenciados para el footer (son distintos a los del resto de la página)
Si buscás un poco de inspiración, date una vuelta por Zen
Gardenque tiene una galeria de sitios
donde, cambiando sólo el CSS y las imágenes
de fondo, se logran resultados sorprendentes, muy distintos entre si.
saludos,
Joaquín Vicente
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Dar estilo a un div: Herencia o clase e specífica
2010/4/21 Rafa Artacho
> Me surge la siguiente duda:
>
> ¿Qué ventaja obtengo declarando una clase de este modo
>
> #footer .footer-links .bloque-links-imagen ul{
>
> respecto a aplicarle al ul en particular una clase específica?
>
> darle contexto de donde se está utilizando?
>
>
>
Antes que nada, una cuestión de concepto: "clase" se llama el tipo de
selector precedido por un punto en CSS e indicado con el atributo class en
HTML. La línea que citás se llama correctamente "selector" y forma parte de
una "regla".
La diferencia entre hacerlo de la forma en que citás o agregando un class al
elemento en particular depende en parte del gusto de cada uno y en parte de
mantener ciertas "buenas prácticas". Sobre esto último, te comento algunas:
- si no es necesario, no conviene poner la "ruta" completa al elemento; por
un lado porque para los navegadores es preferible mantener los selectores
simples (tenía un enlace sobre eso, pero no lo encuentro ahora) y por otro
porque en un futuro podrías hacer cambios en el HTML y te obligaría a editar
también la hoja de estilos.
- si el estilo de un elemento es muy específico, conviene seleccionarlo
directamente agregándole un class al elemento mismo; de esa forma, si más
adelante necesitás agregar un elemento similar en el mismo contexto, pero
con diferente estilo, no necesitás modificar lo que ya está hecho.
- no conviene "pegarle" directamente a elementos tan comunes como DIV o
SPAN, por ejemplo, porque nunca se sabe cuándo hay que agregar uno extra; ni
se puede evitar que si cae en mano de programadores .Net, por ejemplo, te
llenen el código de elementos extras
> Recomendáis siempre asignar una clase teniendo en cuenta su posición en los
> divs principales de la página?
>
>
Depende: si necesitás una regla para definir estilos de texto (font-size,
font-style, color, etc.) conviene hacerlo con un class independiente (por
ejemplo: .links a secas); y si necesitás una regla para definir
posicionamiento de un elemento, conviene hacerlo con un selector relacionado
al contexto (por ejemplo: #footer .links )
Saludos
--
Camilo Kawerín
Desarrollo Web
Radio Nacional
www.radionacional.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Rediseño progresivo - reset.css o no reset.css
No pasa nada, si sólo vinculas las páginas nuevas al reset.css y no vinculas las antiguas. 2010/4/21 Rafa Artacho > Buenas tardes: > > Voy a acometer el rediseño de una web, durante el cual convivirán los > diseños antiguos y se irán incorporando progresivamente los nuevos. > > En el rediseño, voy a emplear una hoja de estilo reset.css, sin embargo, en > la primera versión no se usó ninguna. Así los diseños antiguos usarán la > hoja de estilo v1.0.css, y los diseños nuevos emplearán v2.0.css además de > reset.css. > > ¿Es posible que al pasar de una página nueva a una antigua se aplique el > reset.css a la antigua maquetación? > > De ser así se descuadraría la maquetación de la versión antigua, ¿existe > algún método para solucionar este posible desajuste? > > Gracias > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Rediseño progresivo - reset.css o no reset.css
Buenas tardes: Voy a acometer el rediseño de una web, durante el cual convivirán los diseños antiguos y se irán incorporando progresivamente los nuevos. En el rediseño, voy a emplear una hoja de estilo reset.css, sin embargo, en la primera versión no se usó ninguna. Así los diseños antiguos usarán la hoja de estilo v1.0.css, y los diseños nuevos emplearán v2.0.css además de reset.css. ¿Es posible que al pasar de una página nueva a una antigua se aplique el reset.css a la antigua maquetación? De ser así se descuadraría la maquetación de la versión antigua, ¿existe algún método para solucionar este posible desajuste? Gracias ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Dar estilo a un div: Herencia o clase e specífica
Me surge la siguiente duda:
¿Qué ventaja obtengo declarando una clase de este modo
#footer .footer-links .bloque-links-imagen ul{
respecto a aplicarle al ul en particular una clase específica?
darle contexto de donde se está utilizando?
Recomendáis siempre asignar una clase teniendo en cuenta su posición en los
divs principales de la página?
Gracias
2010/4/20 Joaquín Vicente
> 2010/4/20 Gerardo Oscar Jimenez Tornos
>
> > Creo que simplemente te has acostumbrado a utilizar position para
> resolver
> > tus problemas.
> > ¿Cómo harías la plantilla de tres columnas de este enlace con position?
> > http://www.treeweb.es/plantilla-de-tres-columnas
>
>
> Acá tenés un par de alternativas:
> http://css-discuss.incutio.com/wiki/Footer_Beneath_Sidebar
>
> El 20 de abril de 2010 05:49, Joaquín Vicente escribió:
> > > Son dos herramientas similares. Con float podés alinear horizontalmente
> > de
> > > manera más simple y rápida.
> > > Usar positioning también te permite alinear en sentido vertical (usando
> > las
> > > propiedades top y bottom), o hacer layouts mucho más complejos
> > > te dejo un link bastante ilustrativo y útil:
> > > http://www.barelyfitz.com/screencast/html-training/css/positioning/
> > >
> > > Son cosas diferentes, float vale para una cosa y position para otra.
> > Position rompe el flujo de distribución del texto.
>
>
> Si, position rompe el flujo de distribución del texto, pero float tiene
> mucho menos flexibilidad.
> Como te dije, cada uno tiene sus pros y sus contras. Acá están enumeradas:
> http://css-discuss.incutio.com/wiki/Absolute_Or_Float_Layout
>
> > 2010/4/19 Gerardo Oscar Jimenez Tornos
> > >
> > > > Lo de los position es un peligro, cada navegador escoge el punto de
> > > > referencia en un punto diferente.
> > > >
> > > float también trae sus problemas entre navegadores...
> > >
> > ¿Por ejemplo?
> >
> >
> Del mismo link que pasé más arriba (
> http://css-discuss.incutio.com/wiki/Absolute_Or_Float_Layout):
> - Tied to the document flow. Allows less flexibility.
> - Lots of browser bugs, that, although possible to get around, add
> significantly to browser testing and tweaking time.
>
> Floats, Margins and IE
> http://www.positioniseverything.net/explorer/floatIndent.html (ej. del bug
> del doble-margen)
>
>
> > >
> > > Además, no puedes forzar que un div se ajuste al contenido de otro que
> > está
> > > > con position absolute o relative.
> > >
> > > En definitiva, no es una buena práctica de diseño.
> > > >
> > > "En definitiva" es una opinión muy personal. Yo creo que hay casos y
> > casos,
> > > donde float puede ser más útil que position y viceversa.
> > > ¿Por ejemplo?
>
>
> Para hacer templates con "sacados del photoshop", me parece mucho, pero
> mucho más útil
> (me refiero a layouts más complicados que un simple blog)
> También me parece más útil para desarrollar algunos menúes con javascript.
>
>
> > > > El único problema que tiene float es que en IE6, cuando tienes justo
> > > debajo
> > > > un contenedor con height o weight establecido, deja una separación de
> 3
> > > > píxeles.
> > > >
> > > nada que un "reset.css" no pueda arreglar ;-)
> > >
> >
>
> Finalmente, te dejo dos links del blog de una persona conocida dentro de
> los
> que son los estándares web, como Eric Meyer:
>
> http://meyerweb.com/eric/thoughts/2004/07/17/floats-dont-suck-if-you-use-them-right/
> ("float was never meant as a layout tool")
> <
> http://meyerweb.com/eric/thoughts/2004/07/17/floats-dont-suck-if-you-use-them-right/
> >
> http://meyerweb.com/eric/thoughts/2004/07/21/floating-points/
>
> Saludos,
>
>
> Joaquín Vicente
> ___
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] como darle estilos a los checkbox ???
Mirate JQueryUI hay unas cuantas plantillas y degrada bien si el browser no soporta javascript. El 21 de abril de 2010 00:14, Ariel escribió: > Hola a todos, necesito darle estilos a los checkbox, cambiarlos de tamaño > cambiarles el color de como estan chequeados. Segun he visto la unica forma > es con javacript, alguien sabe como hacerlo ??? > Como lo puedo hacer ??? > Saludos > Ariel > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
