Alguien me ayuda a entender este css?

[sagitariosTheBest]

Hola a todos no he entendido muy bien que significan las siguientes reglas:

Código:

.wrapper{
min-height:100%;
heigh:auto !important;<------Nunca he entendido para que sirve el "auto"
height:100%;
margin: 0 auto -4em;<--------No entiendo estos valores que es lo que hacen por que un valor negativo????
}

.footer, .push{
height:4em;<---------------por que un valor positivo como se relaciona con el valor negativo?????
}

y quiero saber bien que es lo que hacen pero se me dificulta encontrar informacion sobre esto haber si alguien me da una explicacion.

cabe mensionar que estas reglas sirven para un sticky footer pero quiero saber lo que cada linea significa alguien me ayuda??


muchas gracias de antemano
saludos

[kseso?]

Hola SagitariosTheBest:
Mira a ver si en esta página encuentras algo de información (seguramente sí):
www.librosweb.es

auto: El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

margin: 0 auto -4em;
El margen que debe dejar, 0 arriba, auto= a izquierda y derecha (vamos, lo centra en la horizontal) y -4m= abajo, cuatro veces la altura de la letra "M" en la fuente que hayas definido. El valor negativo indica que lo desplaza hacia abajo.

Por cierto, Sagitarios, sería conveniente que no repitas la misma cuestión en varios post, así no damos trabajo a los sñ.
Un saludo.

[sagitariosTheBest]

muchas gracisas Kseso? ya tengo mas claro el concepto muchas gracias por responder

pd:prometo no volver hacer lo mismo de postear dos veces gracias

[pablofanta]

Te recomiendo utilizar firefox y luego el plugin firebug

Tiene un monton de facilidades para entender y modificar dinamicamente las hojas de estilos!

Es fantastico para los developers :)!

[Jamati]

El atributo !important, sirve solamente para el FF, ya que su funcion es la siguiente:


.foot {width: 298px !important;width: 300px;}

En este codigo, el IE versión 6 entenderá siempre que el ancho es la última línea con width que aparece en dicha clase, en este caso será 300px.

.foot {width: 298px !important;width: 300px;width: 200px;}

en este caso el IE tomará como ancho 200 px.

En cambio, con el atributo !important, estamos forzando al FF a tomar dicha medida como ancho, independientemente de que posterior a esa asignación, se asigne otro width, siempre tomará primero el que tenga la palabra !important.

En IE no pasa esto porque no conoce dicha sentencia.

Saludos

[webosiris]

Iniciado por Jamati

El atributo !important, sirve solamente para el FF

eso que dices no es 100% cierto.

el !important sirve para todos los navegadores, e IE SI conoce esa declaración.
El único detalle, y de ahí probablemente tu confusión, es que el IE 6 tiene un bug cuando se usa en el mismo selector.
Sacado de aqui, ejemplo del bug:

.example1 {
color: red !important;
color: blue;
}

en cambio el siguiente ejemplo no activa el bug y por lo tanto el IE se comporta como debería de comportarse:

.example2 {
color: red !important;
}
.example2 {
color: blue;
}

[Jamati]

Muy bien aclarado, pido perdón y muchas gracias por la aclaración, siempre se aprende algo nuevo.