Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Retoques finales (II)

6.2 Retocar las listas

Margen de la lista del menú

Vamos ahora a retocar las listas para que queden con otro aspecto. empezaremos por la lista del menú.

La lista del menú queda muy separada del margen, esto se debe a que las listas tienen ya de por sí un margen implícito. vamos a quitar estos márgenes.

abre el archivo estilo.css con el bloc de notas, y al principio de todo, antes de la primera linea escribimos:

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

el archivo css en el bloc de notas quedará así: (en verde el texto que hemos escrito)

* {padding: 0px; margin 0px}
h1 { text-align: center; font-size: 2.5em; font-family: verdana; color: purple }
h2 { text-align: center; font-size: 1.9em; font-family: "times new roman"; color: olive; }
......

El selector * (asterisco) se llama selector universal, se pone al principio del archivo, y afecta a todos los elementos de la página. Una vez escrita la línea guardamos y cerramos el bloc de notas y abrimos el archivo index.html con el navegador para ver el resultado.

Tu página Web quedará así: Ver mi Web.

Vemos cómo el margen de la lista del menú ha desaparecido, a la vez que la lista de Buscadores se ha desplazado un poco a la izquierda. Les daremos ahora un margen propio a las listas.

Para dar margen a la lista del menú, lo haremos desde los enlaces, para ello abre de nuevo el archivo estilo.css y delante de las líneas que definen las pseudoclases escribimos esta otra: (texto en verde)

.....
div li  { font-size: 1.1em;font-family: times new roman; margin: 0em; 
		padding-right: 0em; padding-left: 0em; text-align: left;  }
div ul  { list-style-type: none; }
div li a  { padding-left: 1em }
div li a:link  { color: rgb(204,32,239); }
div li a:visited  { color: rgb(144,112,207); }
div li a:hover  { color: rgb(32,112,63); }
div li a:active  { color: rgb(32,112,63); }

Cerramos y guardamos el bloc de notas y abrimos el archivo index.html con el navegador para ver los cambios.

Tu página Web quedará así: Ver mi Web.

Color de fondo de los enlaces

Con la instrucción anterior hemos dejado un margen a la lista. Ahora vamos a hacer que cambie el color de fondo de los enlaces al pasar el ratón por encima, para ello abrimos el archivo estilo.css con el bloc de notas y modificamos la línea de la pseudoclase "hover", en los enlaces de menú. Escribiremos lo siguiente: (texto en verde)

.....
div li a:link  { color: rgb(204,32,239); }
div li a:visited  { color: rgb(144,112,207); }
div li a:hover  { color: rgb(32,112,63);
                  background-color: rgb(224,224,255); display: block; }
div li a:active  { color: rgb(32,112,63); }

La instrucción display: block hace que el color de fondo se extienda a lo largo de toda la línea ocupando un espacio de margen a margen de la caja. De no ponerla el color de fondo se vería sólamente donde está el texto.

Guardamos y cerramos el bloc de notas, y abrimos el archivo index.html para ver el resultado.

Tu página Web quedará así: Ver mi Web.

Como podrás comprobar el color de fondo de los enlaces del menú cambia al pasar el ratón por encima. Mas tarde modificaremos la lista de "buscadores", que también se ha desplazado un poco a la izquierda cuando hemos aplicado el selector universal.

Encontramos ahora otro problema, y es que el menú no se ve igual en todos los navegadores, mientras que en la mayoría de los navegadores se comporta como esperábamos, en Internet Explorer, al pasar el ratón por encima, abre una línea en blanco debajo del elemento de la lista.

Esto es debido a que no todos los navegadores interpretan igual el código HTML. Para corregir esto añadiremos unas instrucciones al principio de la página. abre el archivo index.html con el bloc de notas y al principio de todo, antes de la etiqueta de apertura <html> escribiremos la etiqueta: (texto en azul)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title> Mi Web</title>
......

Las etiquetas DOCTYPE, como la que hemos puesto, indican qué tipo de versión del lenguaje HTML debe usarse. El lenguaje HTML desde su creación, ha tenido varias versiones, esta etiqueta fuerza a los navegadores a leer la página en la versión que le indica, y no la que pueden tener predeterminada, haciendo que todos ellos la muestren de la misma manera. Se escriben siempre antes del comienzo de la página, ya que la instrucción no se le da a la página, sino al navegador directamente.

Una vez escrita la etiqueta, guardamos y cerramos el bloc de notas. Si tienes instalados varios navegadores, y entre ellos Internet Explorer, comprobarás que ahora sí vemos la página de la misma manera en todos ellos.

Modificar la lista de buscadores

Vamos a modificar la lista de buscadores. Para ello abre el archivo estilo.css con el bloc de notas y busca la línea donde pone:

....
li { text-align: justify ; font-size : 1.1em ; font-family : arial ; color: navy ; 
     margin-left: 3em ; padding-right: 3em ; padding-top: 0.5em ;}
....

en esta línea cambiamos el valor a la instrucción margin-left: 3em; , y la dejamos así: margin-left: 4em; El texto de la línea quedará así:

....
li { text-align: justify ; font-size : 1.1em ; font-family : arial ; color: navy ; 
     margin-left: 4em ; padding-right: 3em ; padding-top: 0.5em ;}
....

una vez cambiada la instrucción cerramos y guardamos el bloc de notas y abnrimos el archivo index.html con el navegador para ver el cambio.

Tu página Web quedará así: Ver mi Web.

Verás que la lista de Buscadores se ha desplazado un punto a la derecha, que es donde queríamos que estuviera.

Margen superior e inferior de la lista de enlaces.

La lista de enlaces quedaría mejor si le dieramos un margen superior e inferior al texto. Esto es tan fácil como utilizar la propiedad padding

Abre el archivo estilo.css con el bloc de notas y en la linea que empieza por div añadimos las siguientes propiedades: (Texto en verde)

.......
div  { float: left; width: 160px ;border: 1px black solid; 
       background-color: rgb(224,240,255); margin-left: 3em; margin-right: 2em; 
       margin-bottom: 1em ; padding-top: 1em; padding-bottom: 1em;}
........

Una vex que hemos escrito las instrucciones anteriores, guardamos y cerramos el bloc de notas y abrimos el archivo index.html con el navegador para ver el cambio.

Tu página Web quedará así: Ver mi Web.

Con esto hemos acabado de modificar las listas. Espero que te hayan quedado igual que que a mi. Si no es asi, ya sabes, repasa los códigos, seguro que hay algo mal escrito.

En el siguiente paso insertaremos un enlace a correo electrónico para que nos puedan mandar sugerencias.

Ir al siguiente paso: enlace a un e-mail

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com