Tutoriales HTML

Lección 15. Reparando márgenes y ampliando el contenido

Antes de seguir insertando elementos vamos a reparar un pequeño detalle que dejamos en el tema anterior

Fijaros que los primeros párrafos están demasiado pegados al borde del menú, así que vamos a separarlo un poco.

Abrimos nuestra hoja de estilos y le decimos que guarde un margen en el lado derecho añadiendo la siguiente característica al menú: margin-right:10px

#menu {background-color : #FFD700; width:180px; float:left; text-align: left; margin-right: 10px;}

Si observamos la vista previa se nos separo un poco ese texto del borde del menú

***

Seguimos mirando la pagina y vemos que la capa del menú quedo demasiado pegada al borde, así que vamos a separarlo un poco

Para ellos se emplean los comandos margin y padding

Margin provoca el efecto de separar el cuadro amarillo del borde exterior obteniendo este efecto por ejemplo

Si aplicáramos el padding el efecto seria todo lo contrario, observar la captura

Ya dependiendo de como queráis diseñar vuestra web usaríamos uno u otro, en mi caso aplicare el margin con lo que conseguiremos separar ese recuadro del borde, esta característica la añadiremos entre las que tenemos puestas en el menú,terminando siempre con punto y coma

#menu {background-color : #FFD700; width:160px; float:left; text-align: left; margin: 10px;}

Fijaros que elimine el margin-rigth y lo sustitui por un margin 10, con esto le doy margen de 10 px a todo su alrededor

Si quisieramos una distancia diferente para cada lado recordar que el orden es empezando por arriba y con el sentido de las agujas del reloj le dariamos sus cuatro valores, por ejemplo margin: 10px 15px 8px 12px;

Guardar cada vez que queramos ver el efecto en nuestra plantilla

***

Seguir repasando y poner alguna imagen e insertarle un hipervínculo

Revisar las lecciones 5 y 6 y recordar que las propiedades que le insertamos en la hoja de estilos también tendremos que dárselas aquí

***

Este tenemos que tener en nuestra plantilla

<body>

<div id="general">
	<div id="cabecera">Aqui pondre mi cabecera</div>
    <div id="navegacion">Menu de navegacion</div>
    <div id="contenido">
    	<div id="menu">el menu
        	<ul>
                <li><a href="#" target="_blank">Enlace 1</a></li>
                <li><a href="#">Enlace 2</a></li>
                <li><a href="#">Enlace 3</a></li>
            </ul>
        </div>
      <p>Empiezo a escribir mi primer párrafo, pero vamos a escribir varios párrafos hasta conseguir un texto bastante largo. Usaremos los puntos, las comas,.......
    los puntos y aparte aqui no es como estamos acostumbrados, cerramos el parrafo donde estamos escribiendo y abrimos un parrafo nuevo y vamos a ver que observamos 
    despues de todo este escrito</p>
    <p>Este es otro párrafo, recordamos que cada punto y aparte aqui no tienen sentido. 
    Para que aparezca en la linea siguiente tendríamos que insertar un nuevo párrafo abriendo y 
    cerrando la etiqueta correspondiente </p>
   <p>Sigo con un tercer párrafo y la historia continua, 
   segun escribo voy observando los resultados en mi vista previa 
   y despues veremos como mejorar el aspecto de la misma, tener en cuenta que no hemos dado propiedades aun a esta etiqueta en nuestra hoja de estilos ni tampoco 
   a los elementos de la capa de contenido</p>
   
   <p>Yo creo que ya escribi bastante, he superado el espacio de mi menú</p>
   <a target="_blank" href="http://www.energiaelca.es/"><img src="../imagenes/023222.gif" width="120" height="150"></a> 
   </div>
    <div id="pie">el pie de página</div>
</div>

</body>
</html>

Y esto en nuestra hoja de estilo general

Para ver lo que hemos conseguido pulsar AQUI

Tutorial realizado por Energiaelca