Entendido.

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

Logo

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++


logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 39

Visitas el mes pasado: 81

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




5. Menú lateral (II)

5.2 Estilo de la caja

Diseño del "div"

En el paso anterior creamos un menú mediante una etiqueta div, que pretendía diferenciarse del resto de la página, como un elemento aparte, pero de momento parece no diferenciarse mucho. Ahora, mediante la aplicación del estilo, vamos a darle un nuevo aspecto.

Vamos a dar unas cuantas instrucciones en CSS, seguro que algunas de ellas te suenan de haberlas empleado. Abre el archivo estilo.css con el bloc de notas y después de la última linea escribe:(texto en verde)


.... 
a:hover { color: rgb(175,54,93); }
a:active { color: rgb(175,54,93); }

div { float: left; width: 160px; border: 1px black solid;
      background-color: rgb(224,240,255); }


Vamos a ver qué significan las diferentes propiedades que hemos aplicado a la caja o "div"

Una vez escrito el código CSS en la página, 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.


Como puedes ver ahora aparece el texto dentro de un recuadro, pero el aspecto tanto del texto, como de los márgenes, queda un tanto raro, vamos ahora a mejorarlo.

Margenes de la caja

Vamos ahora a ocuparnos de los márgenes de la caja o div. Más tarde nos ocuparemos del aspecto del texto. Si recuerdas, cuando insertamos la imagen, le dimos unos márgenes para que el texto de la página no quedara pegado a ella; y para que la imagen no quedara pegada al borde derecho de la pantalla. Aquí se trata de hacer exactamente lo mismo. Mediante la propiedad margin aplicaremos un margen a la derecha y a la izquierda de la caja.

Por otra parte, la propiedad padding nos crea un margen interno, es decir entre la línea del borde y el texto. Aplicando esta propiedad conseguiremos que el texto no se quede pegado a la línea del margen.

Vamos a aplicar estas propiedades. Abre el archivo estilo.css con el bloc de notas, y en la ultima línea, añadimos las siguientes propiedades:(escribir el 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 ;  }
			

Una vez que hemos escrito el texto, guardamos y cerramos el bloc de notas, y abrimos el archivo index.html con el navegador para ver los resultados.

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


Como ves, ya hemos conseguido poner unos márgenes, para que el recuadro quede separado del texto exterior y del borde de la página.


En el próximo paso le daremos estilo al texto y a los enlaces del menú, para que sean diferentes de los que hay en la página.

ir al siguiente paso: Estilo del texto del menú







Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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