Hola, cumpliendo lo antes dicho aquí me encuentro escribiendo, gracias a que estoy de vacaciones en la espera de mi primer hija, ojala que ya nazca que me tiene con ansias.
En fin, el tema de hoy esta basado en crear una maquetación lo más estable posible para todos los navegadores. La suma de los mismo da la dimensión total real del objeto en navegadores estandar (Firefox, Chrome, Safari) con una cierta variación en IE6, o IE7+ variación no estandar, esto lo comentaremos en el uso de padding y margin.
Un objeto tiene Padding, Margen y Borde, así como ancho y alto, elementales para poder mantener todo en su lugar. Como se muestra en la siguiente imagen.
 |
| Fig1. Distribución de un objeto en CSS |
Descripción: es el espacio que separa a un objeto de otro.
propiedad CSS: margin
Formas de Uso:
margin: arriba derecha abajo izquierda;
ejem: margin:5px 2px 3px 6px;
margin: arriba izquierda abajo. ejem: margin:3px 2px 5px; margen superior 3px, margen izquierdo 2px y margen inferior 5px.
margin: arribaabajo izqder; ejem: margin:5px 7px; Esto indica que el margin superior e inferior sera de 5px mientras que el izquierdo y derecho de 7px.
margin: todos; ejem; 5px; Indica que el margen en todos lados será de 5px;
Además se puede manipular de manera independiente.
margin-left, margin-right, margin-top. margin-bottom. izquierdo, derecho, superior e inferior respectivamente.
Comportamiento: Se suma al Ancho ó Alto del objeto en todos los navegadores.
Notas. El margen es tomado doble por IE6 ó IE7+ con variacion no estandar, así que se debe tener mucho cuidado pues el margen es tomado doble, por lo cual existen varios metodos para contrarestar este comportamiento, en lo personal hago uso de las siguientes:
Suponiendo un margen izquierdo de 6px;
display:inline-block;
margin-left:6px;
En el ejemplo anterior, agrego un display:inline-block; indica el comportamiento del objeto, en su mayoría esto siempre funciona, pero si acaso falla existe el siguiente:
display:inline-block;
margin-left:6px;
_margin-left:3px;
Además de incluir el display: Se agrega el _margin-left. esto indica que solo en IE6 será leida dicha regla, así que ahí ajustamos para que se vea de la misma manera que en Firefox.
Uso de Padding
Descripcion: Es el espacio que existe entre el limite del objeto y donde inicia el contenido del mismo.Propiedad CSS: padding
Formas de Uso:
margin: arriba derecha abajo izquierda;
ejem: margin:5px 2px 3px 6px;
padding: arriba izquierda abajo. ejem: padding:3px 2px 5px; margen superior 3px, margen izquierdo 2px y margen inferior 5px.
padding: arribaabajo izqder; ejem: padding:5px 7px; Esto indica que el margin superior e inferior sera de 5px mientras que el izquierdo y derecho de 7px.
padding: todos; ejem; 5px; Indica que el margen en todos lados será de 5px;
Además se puede manipular de manera independiente.
padding-left, padding-right, padding-top. padding-bottom. izquierdo, derecho, superior e inferior respectivamente.
Comportamiento: Se suma en Ancho ó Alto en navegadores estandar (Firefox, Chrome y Safari, IE7+), y se Resta en IE6 y IE7+ variacion no estandar.
Notas: El padding resulta ser un poco más estable, son objetos de bloque o de línea, no así con tablas, Expliquemos su uso en los diferentes navegadores. supongamos que necesitamos un div de 350 x 220 px, con 10px de padding en cada lado.
Para Navegadores Estandar:
width:330px;
height:200px;
display:inline-block;
padding:10px;
Para IE6 ó IE7+ variación no estandar:
width:330px;
_width:350px;
height:200px;
_height:220px;
display:inline-block;
padding:10px;
Uso de Bordes
Descripción: Muestra una franja visible al rededor del objeto.Propiedad CCS: border
Formas de uso
border: ancho tipo color;
ejem: border:5px solid #FF0000;
El resultado es un borde de 5px con el estilo solido en color rojo.
A diferencia de los margenes y paddings; los bordes se definen solamente de dos formas: todos o uno especifico, así como sus propiedades por separado.
border-left: 5px solid #FF0000; borde izquierdo
border-right: 5px solid #FF0000; borde derecho
border-top: 5px solid #FF0000; borde superior.
border-bottom: 5px solid #FF0000: borde inferior.
border-top-style: solid; estilo del borde superior.
border-bottom-style: solid; estilo del borde inferior.
border-left-style:solid; estilo del borde izquierdo.
border-right-style:solid; estilo del borde derecho.
border-top-color: #FF0000; color del borde superior.
border-bottom-color: #FF0000; color del borde inferior.
border-left-color: #FF0000; color del borde izquierdo
border-right-color: #FF0000; color del borde derecho.
Los diferentes estilos de borde que son aceptados en todos los navegadores son:
Comportamiento: inestable con tablas pero muy estable en todos los navegadores en objetos de bloque como los divs.
Notas. Recuerda que el borde se suma al tamaño definido en width y height del objeto.
Si queremos que un objeto mida 750px por 580px, ancho alto respectivamente, y es necesario un padding izquierdo de 10px y un borde de 3px, además de un margen derecho de 2px, y padding general de 5px. Como se hará el CSS. Tomando en cuenta las notas anteriores esto se definiría así:
Para Navegadores estándar:
ancho=ancho total - padding izquierdo - padding derecho - borde izquierdo - borde derecho- margen izquierdo - margen derecho.
width=750px-10px - 5px -3px - 3px - 0px -2px;
width:727px;
Para IE6 ó IE7+ variación no estándar.
ancho= 750 - borde-izquierdo - borde - derecho - margen izquierdo - margen derecho.
width=750px - 3px - 3px - 0px - 2px;
width:742px;
Mientras que el alto estará de la siguiente manera para navegadores estandar:
alto= alto total - borde superior - borde inferior - margen superior - margen inferior - padding superior - padding inferior;
height=580px - 3px - 3px - 0px - 0px - 5px - 5px;
height:564px;
En tanto que en IE6 ó IE7+ variación no estándar:
alto=alto total - alto total - borde superior - borde inferior - margen superior - margen inferior;
height=580px - 3px - 3px - 0px - 0px;
height:574px;
Una vez calculado el ancho y alto aremos el css general.
Navegadores estándar:
div.contenido {
width:727px; _width:742px;
height:564px; _height_574px;
display:inline-block;
overflow:hidden;
padding:5px; padding-left:10px;
margin: 0px; margin-right:2px;
border:3px solid #FF0000;
}
En esta ocasión el overflow: hidden; nos sirve para mantener el contenido dentro, y que si este excede el tamaño definido en ancho y alto no se muestra, es optimo para evitar desbordamientos.
Uso de Overflow
El overflow indica el comportamiento que tendrá el objeto contenedor respecto al contenido del mismo, si se fuerza y solo se muestra en un ancho y alto establecido, o si mostrará barra de desplazamiento, también ayuda a contener a objetos flotantes (aquellos con propiedad float). Los tipos de comportamiento son:
visible. El contenido se sale del contenido si este excede el tamaño, valor default.
hidden: El contenido solo se muestra dentro del contenedor, sin exceder el tamaño, también ayuda a contener a elementos flotantes.
scroll: Siempre se muestran las barras de desplazamiento.
auto: Muestra las barras según sea necesario; es decir si el contenido no se excede se muestra normal, si se excede en ancho se muestra la barra inferior. Y si se excede en alto se muestra la barra derecha de desplazamiento. Finalmente si se excede en ancho y alto se muestran ambas barras de desplazamiento.
Uso de float
La propiedad float permite, flotar elementos, hacia la derecha o hacia la izquierda o quizás eliminar un float que esta por herencia.
float: left; /*Flota el elemento a la izquierda*/
float:right; /*flota el elemento a la derecha*/
float:none; /*Elimina el float*/
Nota: Esto puede ser útil cuando tenemos varios objetos seguidos uno de otro.
digamos que tenemos un espacio de 750px y queremos dos objetos seguidos uno de 400px y otro de 300px, con una separación de 50px. Esto lo podemos resolver de dos formas.
Forma 1.
div.contenedor { width:750px; overflow:hidden; }
div.contenedor .uno { width:400px; float:left; oveflow:hidden; }
div.contenedor .dos { width:300px; float:left; oveflow:hidden; display:inline-block; margin-left:50px; }
Forma 2
div.contenedor { width:750px; overflow:hidden; }
div.contenedor .uno { width:400px; float:left; oveflow:hidden; }
div.contenedor .dos { width:300px; float:right; oveflow:hidden; }
Ambas formas dan el mismo resultado, depende del acomodo que tenga el encargado de la maquetación, ahora veremos el clear, esté nos permite trabajar en casos más específicos combinando el float
Uso de clear
El clear como su traducción literal lo dice sirve para limpiar. Pero, ¿Qué limpia?. Limpia los objetos flotantes, supongamos que en el ejemplo anterior no importa que sobre los 50px, y queremos un objeto de 50px en la parte inferior junto con otro de 650px, Los objetos flotantes por si solos mientras que haya espacio tienden a colocar uno tras otro los objetos, solo hay salto de línea cuando ya no alcance el tamaño. Para resolver dicho problema usaremos una de las siguientes tres opciones que nos presenta el clear.
left. limpia el flotante en izquierda.
right. limpia el flotante en derecha
both. limpia el flotantes en ambos lados.
none. no limpia nada, esto en caso de eliminar la propiedad por herencia.
Entonces tendremos una estructura de la siguiente manera:
div.contenedor { width:750px; overflow:hidden; }
div.contenedor .uno { width:400px; float:left; oveflow:hidden; }
div.contenedor .dos { width:300px; float:left; oveflow:hidden; }
div.contenedor .dos { width:50px; float:left; oveflow:hidden; clear:left; }
div.contenedor .dos { width:700px; float:left; oveflow:hidden; }
Uso de display
El display indica como se comporta el objeto a la hora de mostrarse. Los distintos valores son:
Sin embargo las más usadas son:
none. no se muestra el objeto.
inline. para listas
block. para que objetos que se comportan como objeto de línea, se comporten como un blouqe, tales como las a, p, span, label, etc.
inline-bloque. Objetos que tienen un comportamiento de bloque, en listas, además sirve para igualar el margen en todos los navegadores.
Uso de position
La propiedad position ayuda a establecer el enfoque del objeto, como sera su posición, por default estatica. Estas son las diferentes posiciones.
Bien tomando en cuenta esta tabla, debo mencionar que los objetos que están en relative sirven de base para un objeto que esta en absolute. Además que las posiciones deben establecerse con las propiedades left, top, botttom o right.
Veamos que pasa con estas dos versiones de CSS
Forma 1
div.contenedor { width:750px; height:350px; }
div.contenedor .absoluto { width:50px; height:50px; background:red; color:#FFF; line-height:50px; font-size:14px; font-family:Arial, Verdana, "Times New Roman", font-weight:bold; position:absolute: left:10px; top:10px; }
Forma 2
Forma 1
div.contenedor { width:750px; height:350px; position:relative; }
div.contenedor .absoluto { width:50px; height:50px; background:red; color:#FFF; line-height:50px; font-size:14px; font-family:Arial, Verdana, "Times New Roman", font-weight:bold; position:absolute: left:10px; top:10px; }
Como veras el comportamiento deseado se encuentra en la forma dos, y es la correcta.
Notas Finales. Recuerda todos estos tips, son muy valiosos y si tienes dudas, pregunta y con gusto te respondo, no olvides agregarme.
Por ultimo estas propiedades utiles.
font-size. tamaño de la fuente
font-family. estilo de la fuente (verdana, arial u otra)
font-weight. Estable si estará negrita (wight), normal u 700, 300 la fuente en grosor.
line-height. El tamaño del interlineado.
text-align. la alineación del contenido. left, right, center o justify.
background. relleno del objeto
background: color imagen repetir-imagen posición-horizontal posición-vertical;
background: #FFF img(../img/fondo.png) no-repeat left top;
background-position. posición del fondo si es imagen
background-color. color de fondo
background-image. fondo de imagen
background-repeat. comportamiento al repetir imagen
Si deseas alinear un objeto te recomiendo esta forma.
div.contenedor { width:1200px; overflow:hidden; text-align:center; font-size:12px; font-family:Arial, Verdana, Tahoma; }
div.contenedor centrar { margin:0px auto; width:960px; height:800px; background:red; }
Saludos.
border: ancho tipo color;
ejem: border:5px solid #FF0000;
El resultado es un borde de 5px con el estilo solido en color rojo.
A diferencia de los margenes y paddings; los bordes se definen solamente de dos formas: todos o uno especifico, así como sus propiedades por separado.
border-left: 5px solid #FF0000; borde izquierdo
border-right: 5px solid #FF0000; borde derecho
border-top: 5px solid #FF0000; borde superior.
border-bottom: 5px solid #FF0000: borde inferior.
border-top-style: solid; estilo del borde superior.
border-bottom-style: solid; estilo del borde inferior.
border-left-style:solid; estilo del borde izquierdo.
border-right-style:solid; estilo del borde derecho.
border-top-color: #FF0000; color del borde superior.
border-bottom-color: #FF0000; color del borde inferior.
border-left-color: #FF0000; color del borde izquierdo
border-right-color: #FF0000; color del borde derecho.
Los diferentes estilos de borde que son aceptados en todos los navegadores son:
- solid
- dotted
- double
- dashed
- groove
- ridge
- inset
- outset
Comportamiento: inestable con tablas pero muy estable en todos los navegadores en objetos de bloque como los divs.
Notas. Recuerda que el borde se suma al tamaño definido en width y height del objeto.
Si queremos que un objeto mida 750px por 580px, ancho alto respectivamente, y es necesario un padding izquierdo de 10px y un borde de 3px, además de un margen derecho de 2px, y padding general de 5px. Como se hará el CSS. Tomando en cuenta las notas anteriores esto se definiría así:
Para Navegadores estándar:
ancho=ancho total - padding izquierdo - padding derecho - borde izquierdo - borde derecho- margen izquierdo - margen derecho.
width=750px-10px - 5px -3px - 3px - 0px -2px;
width:727px;
Para IE6 ó IE7+ variación no estándar.
ancho= 750 - borde-izquierdo - borde - derecho - margen izquierdo - margen derecho.
width=750px - 3px - 3px - 0px - 2px;
width:742px;
Mientras que el alto estará de la siguiente manera para navegadores estandar:
alto= alto total - borde superior - borde inferior - margen superior - margen inferior - padding superior - padding inferior;
height=580px - 3px - 3px - 0px - 0px - 5px - 5px;
height:564px;
En tanto que en IE6 ó IE7+ variación no estándar:
alto=alto total - alto total - borde superior - borde inferior - margen superior - margen inferior;
height=580px - 3px - 3px - 0px - 0px;
height:574px;
Una vez calculado el ancho y alto aremos el css general.
Navegadores estándar:
div.contenido {
width:727px; _width:742px;
height:564px; _height_574px;
display:inline-block;
overflow:hidden;
padding:5px; padding-left:10px;
margin: 0px; margin-right:2px;
border:3px solid #FF0000;
}
En esta ocasión el overflow: hidden; nos sirve para mantener el contenido dentro, y que si este excede el tamaño definido en ancho y alto no se muestra, es optimo para evitar desbordamientos.
Uso de Overflow
El overflow indica el comportamiento que tendrá el objeto contenedor respecto al contenido del mismo, si se fuerza y solo se muestra en un ancho y alto establecido, o si mostrará barra de desplazamiento, también ayuda a contener a objetos flotantes (aquellos con propiedad float). Los tipos de comportamiento son:
visible. El contenido se sale del contenido si este excede el tamaño, valor default.
hidden: El contenido solo se muestra dentro del contenedor, sin exceder el tamaño, también ayuda a contener a elementos flotantes.
scroll: Siempre se muestran las barras de desplazamiento.
auto: Muestra las barras según sea necesario; es decir si el contenido no se excede se muestra normal, si se excede en ancho se muestra la barra inferior. Y si se excede en alto se muestra la barra derecha de desplazamiento. Finalmente si se excede en ancho y alto se muestran ambas barras de desplazamiento.
Uso de float
La propiedad float permite, flotar elementos, hacia la derecha o hacia la izquierda o quizás eliminar un float que esta por herencia.
float: left; /*Flota el elemento a la izquierda*/
float:right; /*flota el elemento a la derecha*/
float:none; /*Elimina el float*/
Nota: Esto puede ser útil cuando tenemos varios objetos seguidos uno de otro.
digamos que tenemos un espacio de 750px y queremos dos objetos seguidos uno de 400px y otro de 300px, con una separación de 50px. Esto lo podemos resolver de dos formas.
objeto uno
objeto dos
Forma 1.
div.contenedor { width:750px; overflow:hidden; }
div.contenedor .uno { width:400px; float:left; oveflow:hidden; }
div.contenedor .dos { width:300px; float:left; oveflow:hidden; display:inline-block; margin-left:50px; }
Forma 2
div.contenedor { width:750px; overflow:hidden; }
div.contenedor .uno { width:400px; float:left; oveflow:hidden; }
div.contenedor .dos { width:300px; float:right; oveflow:hidden; }
Ambas formas dan el mismo resultado, depende del acomodo que tenga el encargado de la maquetación, ahora veremos el clear, esté nos permite trabajar en casos más específicos combinando el float
Uso de clear
El clear como su traducción literal lo dice sirve para limpiar. Pero, ¿Qué limpia?. Limpia los objetos flotantes, supongamos que en el ejemplo anterior no importa que sobre los 50px, y queremos un objeto de 50px en la parte inferior junto con otro de 650px, Los objetos flotantes por si solos mientras que haya espacio tienden a colocar uno tras otro los objetos, solo hay salto de línea cuando ya no alcance el tamaño. Para resolver dicho problema usaremos una de las siguientes tres opciones que nos presenta el clear.
left. limpia el flotante en izquierda.
right. limpia el flotante en derecha
both. limpia el flotantes en ambos lados.
none. no limpia nada, esto en caso de eliminar la propiedad por herencia.
Entonces tendremos una estructura de la siguiente manera:
objeto uno
objeto dos
objeto dos
objeto dos
div.contenedor { width:750px; overflow:hidden; }
div.contenedor .uno { width:400px; float:left; oveflow:hidden; }
div.contenedor .dos { width:300px; float:left; oveflow:hidden; }
div.contenedor .dos { width:50px; float:left; oveflow:hidden; clear:left; }
div.contenedor .dos { width:700px; float:left; oveflow:hidden; }
Uso de display
El display indica como se comporta el objeto a la hora de mostrarse. Los distintos valores son:
- inline
- block
- list-item
- run-in
- inline-block
- table
- inline-table
- table-row-group
- table-header-group
- table-footer-group
- table-row
- table-column-group
- table-column
- table-cell
- table-caption
- none
- inherit
Sin embargo las más usadas son:
none. no se muestra el objeto.
inline. para listas
block. para que objetos que se comportan como objeto de línea, se comporten como un blouqe, tales como las a, p, span, label, etc.
inline-bloque. Objetos que tienen un comportamiento de bloque, en listas, además sirve para igualar el margen en todos los navegadores.
Uso de position
La propiedad position ayuda a establecer el enfoque del objeto, como sera su posición, por default estatica. Estas son las diferentes posiciones.
 |
| Fig2. Posiciones. Elemento tomado de www.cssblog.es. click a imagen para mayor referencia. |
hey
Veamos que pasa con estas dos versiones de CSS
Forma 1
div.contenedor { width:750px; height:350px; }
div.contenedor .absoluto { width:50px; height:50px; background:red; color:#FFF; line-height:50px; font-size:14px; font-family:Arial, Verdana, "Times New Roman", font-weight:bold; position:absolute: left:10px; top:10px; }
Forma 2
Forma 1
div.contenedor { width:750px; height:350px; position:relative; }
div.contenedor .absoluto { width:50px; height:50px; background:red; color:#FFF; line-height:50px; font-size:14px; font-family:Arial, Verdana, "Times New Roman", font-weight:bold; position:absolute: left:10px; top:10px; }
Como veras el comportamiento deseado se encuentra en la forma dos, y es la correcta.
Notas Finales. Recuerda todos estos tips, son muy valiosos y si tienes dudas, pregunta y con gusto te respondo, no olvides agregarme.
Por ultimo estas propiedades utiles.
font-size. tamaño de la fuente
font-family. estilo de la fuente (verdana, arial u otra)
font-weight. Estable si estará negrita (wight), normal u 700, 300 la fuente en grosor.
line-height. El tamaño del interlineado.
text-align. la alineación del contenido. left, right, center o justify.
background. relleno del objeto
background: color imagen repetir-imagen posición-horizontal posición-vertical;
background: #FFF img(../img/fondo.png) no-repeat left top;
background-position. posición del fondo si es imagen
background-color. color de fondo
background-image. fondo de imagen
background-repeat. comportamiento al repetir imagen
Si deseas alinear un objeto te recomiendo esta forma.
hola mundo
div.contenedor { width:1200px; overflow:hidden; text-align:center; font-size:12px; font-family:Arial, Verdana, Tahoma; }
div.contenedor centrar { margin:0px auto; width:960px; height:800px; background:red; }
Saludos.
Sigueme: @dzipiri
o en http://www.facebook.com/JulianTunKu
http://www.linkedin.com/in/juliantun
Gracias por su lectura, agradecere tu comentario, atte The Dzip.
