Corrigiendo los defectos

 

En la página que hemos creado hay algunos defectos que hacen que no se vea muy ordenada nuestra web.

 

Como podemos notar esta muy pegada la primera imagen de nuestro menú con la parte inferior del banner, además el texto no esta alineado con el boton de la imagen, todo esto lo arreglaremos desde nuestra hoja de estilos utilizando los conceptos que ya vimos de margin y padding.

Primero vamos a centrar el texto del div imaMenu en la imagen del botón que acabamos de poner. Para hacer esto como ya sabemos utilizamos la etiqueta padding, ya que esta nos asigna las propiedades sobre la separación delas paredes de un determinado div con todo lo que lleva dentro, en este caso el texto.

 

Colocamos dentro de .imaMenu lo siguiente:

 

Esto nos dice que dejara 7 pixeles en la parte superior y 40 en la izquierda. Guardamos y vemos como cambio en nuestro index. Si todo les salió bien su menú estará echo un desastre jeje, lo que sucedió es que al momento de darle el padding hemos movido el tamaño del div desubicándolo por completo. Pero claro esta que no lo dejaremos así, lo único que tenemos que hacer es restarle lo que hemos aumentado en el padding al tamaño del div correspondiente.

Recordemos que el div “imaMenu” tiene unas dimensiones de:

 

 

Solo restamos 40 pixeles al ancho y 7 pixeles al alto quedando así:

 

 

Guardamos nuevamente y ahora si vemos que quedo bien.

Ahora seguimos con el primer defecto que mencione, esto es aun mas fácil de arreglarlo, ya que solo tenemos que asignarle un margin top al div de la izquierda y listo. Nos dirigimos entonces en la hoja de estilos al .menuIzq y solo aumentamos la línea del margin. Ponemos esto:

 

Esto como sabemos nos dará un margen superior de 8 pixeles.

 

Con esto hemos acabado de arreglar los defectos mas visibles. Si todo nos fue bien la página nos debió quedar mas o menos ASI.

 

<<<< Anterior Siguiente >>>>