Leccion 2

Nuestra web en internet
Configurando el FTP
Subiendo nuestra página
Tips de como subir
Border
Padding
Margin
Estilizando la web
Comentarios en html
Tipo de letra
Color de letra
Función mailto
Como vamos

Estilizando la web

Bien, ahora aplicaremos los conceptos que hemos visto antes a estilizar mas nuestra web. Como se puede apreciar cuando se da F12 o vista previa, los div llamados banner y piepágina salen pegados a la izquierda, mientras que el div contenedor, el cual encierra a los divs centrales, sale ubicado en el centro de la pantalla. Esto lo podemos explicar y solucionar fácilmente usando el margin.

Los mas curiosos seguramente se habrán podido dar cuenta que el div contenedor tiene como estilos el margin:auto y es este div precisamente el que se encuentra en el medio de nuestra pantalla.

Esto se debe a que el maring:auto indica al navegador, donde veamos la web, que ajuste el margen dependiendo de las dimensiones que le hemos asignado o también dependiendo el tamaño de resolución que tengamos en nuestra pantalla. En otras palabras el margin auto le asignará a tu div el margen adecuado para que en cualquier circunstancia veas a tu div en el centro.

Bien, ahora solamente asignaremos el margen al div banner, mientras que no al div piepágina, esto lo hacemos para tener diferentes tipos de estilos y ver como podemos modificarlos a todos con más precisión.

Completemos entonces en nuestra hoja de estilos:

margin:auto;

Recuerden que va dentro del div banner por lo que nos quedaría así:

Vamos viendo como quedo dándole F12.

Les comento como anecdota que cuando creaba mis primeras webs, siempre me enfrentaba con el problema que estos términos de margin, padding y border no siempre obedecían a los comandos y valores que yo les asignaba. Revisaba una y otra vez el código para encontrar el error que presuntamente cometía para que el div no saliera como yo quería pero nunca lo podia encontrar. Por esto, me puse a buscar las posibles causas a esto y me di cuenta que no era mi código el fallo, sino la manera que los navegadores como IE, Mozilla, Opera, etc. interpretaban el código.  Debido a esto encontré una manera que nos ayuda a evitar esta diferencia lo mas posible y es escribiendo esto en nuestra hoja de estilos:

* {margin:0px ; padding:0px ; border: 0px}

Esto lo que hace es de alguna forma resetear  todo los valores de margin, padding y border a cero. Esto ocasiona de alguna manera, la cual no se jeje, que los navegadores interpreten mejor los valores que les daremos.

Muy bien escribamos entonces esa línea en nuestra hoja de estilos, hacerlo en la primera línea de nuestra hoja, ya que esto significará que los valores se pondrán a cero antes que asignemos los nuestros.

Al guardar y darle F12 a nuestro index seguramente se habrán dado cuenta que algunas cosas cambiaron, sino se dieron cuenta borren esa línea y vuelvan a ver como era antes y comparen con vista previa como queda cuando tienes y cuando no tienen dicha línea.
Nuestra hoja de estilos va así:

<<<<< Anterior Siguiente >>>>>