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] 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] Dar estilo a un div: Herencia o clase e specífica
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")
Re: [Ovillo] Dar estilo a un div: Herencia o clase e specífica
El 19 de abril de 2010 16:38, Rafa Artacho escribió: > Buenas Joaquín: > Me parece interesante lo que apuntas, yo siempre que quiero mostrar un div al lado de otro utilizo float:left, ¿qué desventaja le ves a este método respecto al que propones? > Gracias 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/ 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... 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. > 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 ;-) saludos, Joaquín Vicente A: Because it fouls the order in which people normally read text. Q: Why is top-posting such a bad thing? A: Top-posting. Q: What is the most annoying thing on usenet and in e-mail? ___ 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
Buenas Joaquín:
Me parece interesante lo que apuntas, yo siempre que quiero mostrar un div
al lado de otro utilizo float:left, ¿qué desventaja le ves a este método
respecto al que propones?
Gracias
2010/4/19 Joaquín Vicente
> 2010/4/19 Rafa Artacho
>
> > Buenos días,
> >
> > Estoy haciendo un formulario y me gustaría saber cuál es el modo más
> > correcto de aplicarle estilo al div que engloba el botón submit, ya que
> > simplemente necesito que flote a la izquierda, ¿se aplicaría herencia o
> se
> > crearía una clase que sería simplemente flota-izda{float:left;} para
> > aplciar
> > a ese div?
> >
> > El código:
> >
> >
> >
> > > class="newsletter-box">
> >
> >
> >Suscríbete a nuestra Newsletter
> > de Ofertas y Promociones
> >
>
>
> >
> >
> >
> >Correo
> >
> >
> >
> >
> > > value="Enviar">
> >
> >
> >
> >
> >
> >
> >
> >
> > Gracias
> >
> >
> float:left es herejía !! XD
> yo en lo posible, prefiero evitarlo y usar position:absolute dentro de un
> position:relative y después left:0 o right:0
>
> saludos!
> ___
> 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] Dar estilo a un div: Herencia o clase e specífica
2010/4/19 Rafa Artacho
> Buenos días,
>
> Estoy haciendo un formulario y me gustaría saber cuál es el modo más
> correcto de aplicarle estilo al div que engloba el botón submit, ya que
> simplemente necesito que flote a la izquierda, ¿se aplicaría herencia o se
> crearía una clase que sería simplemente flota-izda{float:left;} para
> aplciar
> a ese div?
>
> El código:
>
>
>
> class="newsletter-box">
>
>
>Suscríbete a nuestra Newsletter
> de Ofertas y Promociones
>
>
>
>
>Correo
>
>
>
>
> value="Enviar">
>
>
>
>
>
>
>
>
> Gracias
>
>
float:left es herejía !! XD
yo en lo posible, prefiero evitarlo y usar position:absolute dentro de un
position:relative y después left:0 o right:0
saludos!
___
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
Si no le quieres aplicar clase o id alguno podrías hacer:
.footer-izd form.suscripcion-newsletter input[type=submit]{float:left;}
2010/4/19 Rafa Artacho
> He estado probando y he terminado por aplicar la herencia de este modo;
>
> #footer .newsletter-box div{float:left;}
>
>
>
>
>
> 2010/4/19 Rafa Artacho
>
> > Buenos días,
> >
> > Estoy haciendo un formulario y me gustaría saber cuál es el modo más
> > correcto de aplicarle estilo al div que engloba el botón submit, ya que
> > simplemente necesito que flote a la izquierda, ¿se aplicaría herencia o
> se
> > crearía una clase que sería simplemente flota-izda{float:left;} para
> aplciar
> > a ese div?
> >
> > El código:
> >
> >
> >
> > > class="newsletter-box">
> >
> >
> > Suscríbete a nuestra
> Newsletter
> > de Ofertas y Promociones
> >
> >
> >
> > Correo
> >
> >
> >
> >
> > > value="Enviar">
> >
> >
> >
> >
> >
> >
> >
> >
> > 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
>
--
mario álvarez
desarrollador web
___
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
He estado probando y he terminado por aplicar la herencia de este modo;
#footer .newsletter-box div{float:left;}
2010/4/19 Rafa Artacho
> Buenos días,
>
> Estoy haciendo un formulario y me gustaría saber cuál es el modo más
> correcto de aplicarle estilo al div que engloba el botón submit, ya que
> simplemente necesito que flote a la izquierda, ¿se aplicaría herencia o se
> crearía una clase que sería simplemente flota-izda{float:left;} para aplciar
> a ese div?
>
> El código:
>
>
>
> class="newsletter-box">
>
>
> Suscríbete a nuestra Newsletter
> de Ofertas y Promociones
>
>
>
> Correo
>
>
>
>
> value="Enviar">
>
>
>
>
>
>
>
>
> 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
[Ovillo] Dar estilo a un div: Herencia o clase e specífica
Buenos días,
Estoy haciendo un formulario y me gustaría saber cuál es el modo más
correcto de aplicarle estilo al div que engloba el botón submit, ya que
simplemente necesito que flote a la izquierda, ¿se aplicaría herencia o se
crearía una clase que sería simplemente flota-izda{float:left;} para aplciar
a ese div?
El código:
Suscríbete a nuestra Newsletter
de Ofertas y Promociones
Correo
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
