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.

10. La barra de enlaces (II)

10.2. Posición de de enlaces

Separación y bordes

En el paso anterior hemos colocado los enlaces en línea, pero ahora debemos dar una separación entre ellos, y ponerles un borde para diferenciarlos.

Abre el archivo general.css con el HTML-Kit y en la última línea, añadimos las propiedades siguientes (escribir texto en verde):

....
h6  { font-size: 0.9em; }

#navegacion ul li { display: inline; float: left; 
                    width: 200px ;border: 1px solid #ffcc99 ;margin: 3px; }
				

La propiedad width: 200px da una anchura fija de 200 píxeles a cada elemento de la lista, lo que hace que se separen.

Mediante la propiedad border: 1px solid #ffcc99 creamos un borde alrededor de cada elemento de la lista, al cual le damos grosor(1px) estilo (solid) y color(#ffcc99).

Mediante la propiedad margin: 3px pònemos un pequeño margen alrededor de los elementos que hace que el borde se separe entre ellos.

Después de escribir el texto anterior, guardamos el archivo y abrimos el archivo plantilla.html con el navegador para ver los cambios

La página quedará así: Ver mi página

Alinear los enlaces

Los enlaces aparecen ahora cada uno dentro de un recuadro, pero debemos ahora alinear los recuadros superiores e inferiores. Para ello usaremos la propiedad clear para borrar márgenes y alinear los elementos.

Abre el archivo general.css con el HTML-Kit y después de la ultima línea escribimos esta otra: (texto en verde)

....
#navegacion ul li { display: inline; float: left; 
                    width: 200px ;border: 1px solid #ffcc99 ;margin: 3px ;}

#navegacion ul { clear:both; }
		

Después de escribir la línea guardamos el archivo y abrimos después el archivo plantilla.html para ver los cambios.

La página quedará así: Ver mi página

El siguiente paso es dar estilo a los enlaces, para que la letra y el fondo tengan otro aspecto. Pero eso será ya en el siguiente paso.

Ir al siguiente paso: estilo de enlaces

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