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 joa...@gmail.com
2010/4/20 Gerardo Oscar Jimenez Tornos gerardoosca...@gmail.com
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 joa...@gmail.com 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 gerardoosca...@gmail.com
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/21 Rafa Artacho teme...@gmail.com
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
2010/4/20 Gerardo Oscar Jimenez Tornos gerardoosca...@gmail.com 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 joa...@gmail.com 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 gerardoosca...@gmail.com 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
[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:
div id=footer
div class=footer-izd
form action= method=POST id=suscripcion-newsletter
class=newsletter-box
fieldset
legend
strongSuscriacute;bete a nuestra Newsletter
de Ofertas y Promociones/strong
/legend
div
label for=email
Correo
input type=text id=email /
/label
/div
div
input type=submit name=enviar-email
value=Enviar
/div
/fieldset
/form
div class=info-box/div
/div
/div
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
He estado probando y he terminado por aplicar la herencia de este modo;
#footer .newsletter-box div{float:left;}
2010/4/19 Rafa Artacho teme...@gmail.com
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:
div id=footer
div class=footer-izd
form action= method=POST id=suscripcion-newsletter
class=newsletter-box
fieldset
legend
strongSuscriacute;bete a nuestra Newsletter
de Ofertas y Promociones/strong
/legend
div
label for=email
Correo
input type=text id=email /
/label
/div
div
input type=submit name=enviar-email
value=Enviar
/div
/fieldset
/form
div class=info-box/div
/div
/div
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
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 teme...@gmail.com
He estado probando y he terminado por aplicar la herencia de este modo;
#footer .newsletter-box div{float:left;}
2010/4/19 Rafa Artacho teme...@gmail.com
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:
div id=footer
div class=footer-izd
form action= method=POST id=suscripcion-newsletter
class=newsletter-box
fieldset
legend
strongSuscriacute;bete a nuestra
Newsletter
de Ofertas y Promociones/strong
/legend
div
label for=email
Correo
input type=text id=email /
/label
/div
div
input type=submit name=enviar-email
value=Enviar
/div
/fieldset
/form
div class=info-box/div
/div
/div
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
2010/4/19 Rafa Artacho teme...@gmail.com
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:
div id=footer
div class=footer-izd
form action= method=POST id=suscripcion-newsletter
class=newsletter-box
fieldset
legend
strongSuscriacute;bete a nuestra Newsletter
de Ofertas y Promociones/strong
/legend
div
label for=email
Correo
input type=text id=email /
/label
/div
div
input type=submit name=enviar-email
value=Enviar
/div
/fieldset
/form
div class=info-box/div
/div
/div
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
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 joa...@gmail.com
2010/4/19 Rafa Artacho teme...@gmail.com
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:
div id=footer
div class=footer-izd
form action= method=POST id=suscripcion-newsletter
class=newsletter-box
fieldset
legend
strongSuscriacute;bete a nuestra Newsletter
de Ofertas y Promociones/strong
/legend
div
label for=email
Correo
input type=text id=email /
/label
/div
div
input type=submit name=enviar-email
value=Enviar
/div
/fieldset
/form
div class=info-box/div
/div
/div
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
El 19 de abril de 2010 16:38, Rafa Artacho teme...@gmail.com 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 gerardoosca...@gmail.com 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
