Comments on: CSS: buenas prácticas http://www.estadobeta.com/2006/05/30/css-buenas-practicas/ desarrollo web con estándares Thu, 20 Nov 2008 18:20:27 +0000 http://wordpress.org/?v=2.3-alpha By: Webmaster Mexico http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-18758 Webmaster Mexico Wed, 15 Aug 2007 09:08:45 +0000 http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-18758 En mi opinión modesta he de decir que los css se deben de usar para arrancar del código todo el formato de presentación y dejar nuestros archivos de páginas lo mas simple posible. Es decir optimizar nuestro código y gran parte de esto se logra con los css. En mi opinión modesta he de decir que los css se deben de usar para arrancar del código todo el formato de presentación y dejar nuestros archivos de páginas lo mas simple posible. Es decir optimizar nuestro código y gran parte de esto se logra con los css.

]]> By: Ismael http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-15435 Ismael Thu, 21 Jun 2007 05:18:30 +0000 http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-15435 Sonia y Supermuka: los elementos de control HTML, especialmente los botones y selects, son difíciles de diseñar con CSS (o cualquier otra técnica) ya que, en algunos casos, están bajo el control del sistema operativo en lugar del browser. En Safari (Mac), por ejemplo, los botones de formulario son estilo Mac, sin importar el CSS que les pongamos. En IE, los selects son desplegados por Windows, antes que se despliegue el resto de la página. la idea de esto es que cada sistema tenga un estilo de controles consistentes entre una aplicación y otra, incluyendo los formularios web. Personalmente,creo que es una buena idea. Los elementos de control debieran ser lo más conencionales posibles para que el usuario no se pierda. Dicho esto, Sonia, si quieres más control sobre los botones, en lugar de usar un Input (<code><input type="submit" value="Enviar!" /></code>, puedes usar la etiqueta "button". Cumple la misma función que el input pero no ocupa el estilo gráfico del sistema operativo. <code><button id="mi-boton" type="submit">Enviar!</button></code> Ojo que <code>button</code> lleva el texto como contenido, no como atributo (justamente para que lo puedas modificar con CSS, como cualquier otro texto). Sonia y Supermuka: los elementos de control HTML, especialmente los botones y selects, son difíciles de diseñar con CSS (o cualquier otra técnica) ya que, en algunos casos, están bajo el control del sistema operativo en lugar del browser. En Safari (Mac), por ejemplo, los botones de formulario son estilo Mac, sin importar el CSS que les pongamos. En IE, los selects son desplegados por Windows, antes que se despliegue el resto de la página. la idea de esto es que cada sistema tenga un estilo de controles consistentes entre una aplicación y otra, incluyendo los formularios web. Personalmente,creo que es una buena idea. Los elementos de control debieran ser lo más conencionales posibles para que el usuario no se pierda.

Dicho esto, Sonia, si quieres más control sobre los botones, en lugar de usar un Input (<input type="submit" value="Enviar!" />, puedes usar la etiqueta “button”. Cumple la misma función que el input pero no ocupa el estilo gráfico del sistema operativo.

<button id="mi-boton" type="submit">Enviar!</button>

Ojo que button lleva el texto como contenido, no como atributo (justamente para que lo puedas modificar con CSS, como cualquier otro texto).

]]> By: sonia http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-15266 sonia Tue, 19 Jun 2007 08:57:25 +0000 http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-15266 mismo problema.. en IE me cambia el INPUT como digo en el css...en firefox se ve el boton de default... como puedo hacer? mismo problema..
en IE me cambia el INPUT como digo en el css…en firefox se ve el boton de default…
como puedo hacer?

]]> By: supermuka http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-10098 supermuka Tue, 17 Apr 2007 16:14:04 +0000 http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-10098 tengo este problema: diseñe una pagina donde personalize los scroll de esta manera: input { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF; background-color: #3e2102; border: #595552; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px } y tambien el area de texto de mi formulario textarea { background:#3e2102; border: #595552; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF; } lo q pasa es esto: en el explorer se ve perfecto no tengo ningun problema, pero en el firefox se ven los scroll con el tipico color celeste y azul, q es el predeterminado por el dreamweaver. mi pregunta es esta: ¿existe algun tipo de parche para q mis scroll se vean en el firefox como se ven en el explorer? tengo este problema:
diseñe una pagina donde personalize los scroll de esta manera:

input {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
color: #FFFFFF;
background-color: #3e2102;
border: #595552;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px
}

y tambien el area de texto de mi formulario

textarea {
background:#3e2102;
border: #595552;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
color: #FFFFFF;
}

lo q pasa es esto:
en el explorer se ve perfecto no tengo ningun problema, pero en el firefox se ven los scroll con el tipico color celeste y azul, q es el predeterminado por el dreamweaver.

mi pregunta es esta:
¿existe algun tipo de parche para q mis scroll se vean en el firefox como se ven en el explorer?

]]> By: Ismael http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-7486 Ismael Tue, 13 Mar 2007 16:09:02 +0000 http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-7486 Andrea: lee <a href="http://www.estadobeta.com/2007/01/19/el-pie-de-pagina-al-pie-de-la-pagina/" rel="nofollow">este artículo</a> en este mismo sitio. Andrea: lee este artículo en este mismo sitio.

]]> By: andrea http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-7472 andrea Tue, 13 Mar 2007 07:09:02 +0000 http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-7472 hola tengo una preguntita, esoty construyendo un sitio, en explorer no tengo problema (mis usuarios utilizan en su mayoria este navegardor) pero en firefox tengo problemas con la imagen de fondo, tal como explicabas en tu artículo, ya que en explorer se repite sin problema acomodándose al contenido (la extención que éste tenga), pero en firefox no. si utilizo la opción: min-height cosa que probé antes de llegar acá, me obliga de cierta forma a que las páginas en que tengo menos contenido (por ejemplo un alto de 1000px) queden de 3000, el alto de mi página mas "larga". obviamente generando un scroll innecesario y un fondo casi interminable. no se si me explico, bueno no existe alguna forma de que el height que se adapte al 100% del alto de cada página ? espero me puedas responder. de antemano Gracias !! (por si quisieras revisar al sitio, aun no está linkeado solo debes agregar /blog para ingresar) hola tengo una preguntita, esoty construyendo un sitio, en explorer no tengo problema (mis usuarios utilizan en su mayoria este navegardor) pero en firefox tengo problemas con la imagen de fondo, tal como explicabas en tu artículo, ya que en explorer se repite sin problema acomodándose al contenido (la extención que éste tenga), pero en firefox no. si utilizo la opción: min-height cosa que probé antes de llegar acá, me obliga de cierta forma a que las páginas en que tengo menos contenido (por ejemplo un alto de 1000px) queden de 3000, el alto de mi página mas “larga”. obviamente generando un scroll innecesario y un fondo casi interminable.

no se si me explico, bueno no existe alguna forma de que el height que se adapte al 100% del alto de cada página ?

espero me puedas responder.
de antemano Gracias !!

(por si quisieras revisar al sitio, aun no está linkeado solo debes agregar /blog para ingresar)

]]> By: www.webeame.net http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-4545 www.webeame.net Mon, 08 Jan 2007 22:30:56 +0000 http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-4545 <strong>Buenas prácticas en CSS...</strong> Para partir armando sus css con el pie derecho y "the right way".... Buenas prácticas en CSS…

Para partir armando sus css con el pie derecho y "the right way"….

]]> By: EstadoBeta » Archivo » Calculando la especificidad en CSS http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-3219 EstadoBeta » Archivo » Calculando la especificidad en CSS Wed, 23 Aug 2006 22:12:09 +0000 http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-3219 [...] Segundo, usa la mínima profundidad necesaria para afectar los elementos que quieras. No uses p a.un-link{...} si .un-link{...} es suficiente. Esto te permitirá aumentar la profundidad para elementos específicos más adelante. En este artículo hablo más de esto y otras buenas prácticas. [...] […] Segundo, usa la mínima profundidad necesaria para afectar los elementos que quieras. No uses p a.un-link{…} si .un-link{…} es suficiente. Esto te permitirá aumentar la profundidad para elementos específicos más adelante. En este artículo hablo más de esto y otras buenas prácticas. […]

]]> By: Ismael http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-1930 Ismael Sun, 11 Jun 2006 22:03:26 +0000 http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-1930 De nada Sebastian. Ese libro es bueno. Muy fácil de seguir, paso a paso. z-index es la "profucndidad de un elemento (coordenada "z"). Sirve para controlar qué elemento aparece sobre los demás, como las capas de Photoshop. Eso si sólo es aplicable a elementos con el atributo <em>position</em> en "absolute" o "relative". Además del libro te recomiendo que revises las <a href="http://www.w3schools.com/css/default.asp" rel="nofollow">W3Schools</a>. Ahí hay ejemplos de todos los atributos de CSS. De nada Sebastian.
Ese libro es bueno. Muy fácil de seguir, paso a paso.
z-index es la “profucndidad de un elemento (coordenada “z”). Sirve para controlar qué elemento aparece sobre los demás, como las capas de Photoshop. Eso si sólo es aplicable a elementos con el atributo position en “absolute” o “relative”.
Además del libro te recomiendo que revises las W3Schools. Ahí hay ejemplos de todos los atributos de CSS.

]]> By: Sebastian http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-1872 Sebastian Sun, 11 Jun 2006 03:10:04 +0000 http://www.estadobeta.com/2006/05/30/css-buenas-practicas/#comment-1872 Perfecto, estoy bien entonces con mi "Buenas Prácticas". Ismael muchas gracias por toda la ayuda, este sitio me a sido muy útil, lo que me interesa es saber es cuando comenzará la ronda de las técnicas de Floats, por lo menos para comenzar a armar un sitio de dos columnas sin enfrentarse a tanto problema. Creo que voy por buen camino pero faltan "cosillas" me encontre la otra vez con una propiedad que no entendí bien para que sirve: z-index?. Que tal es el libro: Stylin' with CSS : A Designer's Guide (Paperback) de Charles Wyke-Smith, lo mencionaste en un post por ahi, estoy pensando seriamente en adquirirlo. Saludos. Perfecto, estoy bien entonces con mi “Buenas Prácticas”.
Ismael muchas gracias por toda la ayuda, este sitio me a sido muy útil, lo que me interesa es saber es cuando comenzará la ronda de las técnicas de Floats, por lo menos para comenzar a armar un sitio de dos columnas sin enfrentarse a tanto problema. Creo que voy por buen camino pero faltan “cosillas” me encontre la otra vez con una propiedad que no entendí bien para que sirve: z-index?.

Que tal es el libro: Stylin’ with CSS : A Designer’s Guide (Paperback) de Charles Wyke-Smith, lo mencionaste en un post por ahi, estoy pensando seriamente en adquirirlo.
Saludos.

]]>