8 febrero 2010 in XHTML/CSS by dacho

votar
Share

Bueno continuamos con la lección de una linda pagina de ejemplo, en esta le daremos el estilo a los elementos que se encuentran dentro del div#menu, comencemos!

Aca les dejo el codigo tal como quedo en la pagina anterior:

 
<html>
 
<head>
	<title>Ejemplo pagina web</title>
 
	<style type="text/css">
		  body{ text-align: center; font-family: Tahoma, Arial, Geneva, sans-serif; color:#797979;}
		   #cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;}
		   #encabezado{ height: 32px; margin-bottom: 40px; width: 693px;}
		   /*los textos del encabezado lo dejamos para mas adelante porque tenemos que hacer reemplazo de texto por imagen*/
 
		   #contenido{ width: 500px; float: left; margin-bottom: 70px;}
		   #contenido h2{ font-size: 18px; color: #464545; font-weight: normal }
		   #contenido h2 span{  color: #a7a7a7;   } /*esto nos sirve para cambiar el color a gris en los titulos cuando colocamos la etiqueta span!*/
		   #contenido p{font-size: 13px;}	   
 
		   #menu{ width: 180px; float: left; text-transform: uppercase}	
 
		   #fotos {width: 370px;}
		   #fotos div{ width: 100px; height: 69px; float: left; margin: 10px 9px 15px 9px; background: silver;  }
		   /*Coloco el background:silver; para que se vean los cambios despues colocaremos las imagenes*/
 
		   #pie{ clear: both;  height: 296px;}
		   #pie h2{ font-size: 18px; color: #464545; font-weight: normal }
		   #pie h2 span{  color: #a7a7a7;   }
		   #pie p{ text-align: center; font-size: 13px; padding-top: 10px; clear: both;}
	</style>
</head>
 
<body>
 
	<div id="cont">
 
	<div id="encabezado">
		<h1>Dacho Fotografias</h1>
		<h2>Portafolio Personal</h2>
	</div>
 
 
	<div id="contenido">
 
		<h2>BIENVENIDOS <span>A Mi Sitio Web</span></h2>
			<p>Soy un amante de la fotografia, en mi tiempo libre me gusta salir con mi camara a capturar esos momentos e imagenes que quiero que queden en mis recuerdos.</p>
			<p>A lo largo de este sitio encontraras las mejores fotografias que he tomado en los ultimos años, podras ver fotos de Paisajes, Animales y Gente. Te invito a que recorras mi sitio web y disfrutes tanto como yo del arte de la fotografia</p>
		</div>
 
 
	<div id="menu">
 
	<h3>Menu</h3>
	<ul>
		<li><a>Home</a></li>
		<li><a>Paisajes</a></li>
		<li><a>Animales</a></li>
		<li><a>Gente</a></li>
		<li><a>Contacto</a></li>
	</ul>
	</div>
 
 
	<div id="pie">
		<h2>ULTIMAS <span>fotografias tomadas</span></h2>
		<div id="fotos">
		<div id="foto1">Fotografia 1</div>
		<div id="foto2">Fotografia 2</div>
		<div id="foto3">Fotografia 3</div>
		<div id="foto4">Fotografia 4</div>
		<div id="foto5">Fotografia 5</div>
		<div id="foto6">Fotografia 6</div>
	</div>
 
 
	<p>Todos los derechos reservados // <a>Curso de HTML / CSS</a> <a href="http://www.blogdelaweb.com.ar">blogdelaweb.com.ar</a></p></div>
	</div>
</body>
</html>

Bueno ahora estamos en condiciones de continuar, la lista de cosas que nos quedan por hacer son:

  1. Dar estilo al menu!
  2. Reemplazar texto por imagenes en el encabezado
  3. Colocar imagenes en donde estan los divs de fotografias
  4. colocar un background en el pie de pagina!

1- Dar estilo al menu

Lo primero que debemos hacer es colocar enlaces dentro del menu, es decir el html no esta completo pues no tiene esos enlaces, los completaremos y como direccion momentanea les colocaremos un # que no hace practicamente nada pero nos permitira formatear el html de los enlaces con css de forma correcta. modificamos el codigo dentro del div#menu, y queda asi:

	<div id="menu">
 
	<h3>Menu</h3>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Paisajes</a></li>
		<li><a href="#">Animales</a></li>
		<li><a href="#">Gente</a></li>
		<li><a href="#">Contacto</a></li>
	</ul>
	</div>

Bueno la idea es que quede el menu tal como la imagen del principio, para lograr el efecto que deseo las caracteristicas de los li pertenecientes al menu seran las siguientes:

  • Un borde izquierdo de color naranja (usaremos exactamente el color #e93700) con un ancho de 4px.
  • Ademas con margenes externos (propiedad margin del css) de solo 6px en la parte superior y 0 a la derecha, izquierda y debajo.
  • Margenes internos (Propiedad padding de css) de arriba y abajo 2px y de la izquierda 4px y de la derecha 0px
  • Por ultimo le indicaremos que no coloque ninguna viñeta con la propiedad list-style: none

Todo esto seria lo que le colocamos a los elementos li que se encuentran encapsulados en un elemento ul dentro del div #menu, por lo que el codigo css a agregar seria:

div#menu ul li{border-left: 4px solid #e93700; margin-top: 6px; padding: 2px 0 2px 4px; list-style:none; }

Ademas nos faltaria arreglar el margen del ul que contiene a los li con los enlaces adentro, le colocaremos 0 de margen y 80px de padding izquierdo por motivos de diseño!

#menu ul{ margin:0; padding-left:80px; }

Por otra parte nos queda la tarea de insertarle tamaño y color a los textos de los enlaces, lo que haremos sera colocarles un tamaño de letra de 12px, color #464545 (es una tonalidad de gris) y le quitamos el subrayado con text-decoration: none; y ademas utilizando la instancia :hover que nos provee el css para algunos elementos (lo explico mejor mas adelante) le cambiamos el color de cuando pasa el mouse por encima a #e93700

#menu ul li a{ font-size: 12px; color: #464545; text-decoration: none;}
#menu ul li a:hover{ color: #e93700 }

Por ultimo para terminar la parte del menu, falta estilizar el h3 que contiene la palabra menu!, lo haremos con un padding izquierdo de 80px (para que quede igual de parejo que el ul), con un tamaño de texto de 18px, con el color #e93700 (el color naranja del menu cuando le pasamos el mouse por encima) y utilizaremos font-weight: normal; para que no se tome como negrita, porque esa tipografia no queda muy linda en ese tamaño con letra en negrita.

Quedaria

#menu h3 {color: #e93700; font-size: 18px; font-weight: normal; padding-left: 80px;}

Aplicando todos los cambios al menu el codigo css seria:

div#menu ul li{border-left: 4px solid #e93700; margin-top: 6px; padding: 2px 0 2px 4px; list-style:none; }
div#menu ul li a{ font-size: 12px; color: #464545; text-decoration: none;}
div#menu ul li a:hover{ color: #e93700 }
div#menu ul{ margin:0; padding-left:80px; }
div#menu h3 {color: #e93700; font-size: 18px; font-weight: normal; padding-left: 80px;}

Bueno ya tenemos nuestro punto 1 terminado!, un menu de navegacion con el estilo que necesitabamos!, continuemos que todavia falta!, el codigo completo de lo que va de la pagina es:

<html>
 
<head>
	<title>Ejemplo pagina web</title>
 
	<style type="text/css">
		  body{ text-align: center; font-family: Tahoma, Arial, Geneva, sans-serif; color:#797979;}
		   #cont{ width: 693px; margin: 0 auto 0 auto; text-align: left;}
		   #encabezado{ height: 32px; margin-bottom: 40px; width: 693px;}
		   /*los textos del encabezado lo dejamos para mas adelante porque tenemos que hacer reemplazo de texto por imagen*/
 
		   #contenido{ width: 500px; float: left; margin-bottom: 70px;}
		   #contenido h2{ font-size: 18px; color: #464545; font-weight: normal }
		   #contenido h2 span{  color: #a7a7a7;   } /*esto nos sirve para cambiar el color a gris en los titulos cuando colocamos la etiqueta span!*/
		   #contenido p{font-size: 13px;}	   
 
		   #menu{ width: 180px; float: left; text-transform: uppercase}	
 
		   #fotos {width: 370px;}
		   #fotos div{ width: 100px; height: 69px; float: left; margin: 10px 9px 15px 9px; background: silver;  }
		   /*Coloco el background:silver; para que se vean los cambios despues colocaremos las imagenes*/
 
		   #pie{ clear: both;  height: 296px;}
		   #pie h2{ font-size: 18px; color: #464545; font-weight: normal }
		   #pie h2 span{  color: #a7a7a7;   }
		   #pie p{ text-align: center; font-size: 13px; padding-top: 10px; clear: both;}
 
  			div#menu ul li{border-left: 4px solid #e93700; margin-top: 6px; padding: 2px 0 2px 4px; list-style:none; }
				#menu ul li a{ font-size: 12px; color: #464545; text-decoration: none;}
				#menu ul li a:hover{ color: #e93700 }
				#menu ul{ margin:0; padding-left:80px; }
				#menu h3 {color: #e93700; font-size: 18px; font-weight: normal; padding-left: 80px;}
 
	</style>
</head>
 
<body>
 
	<div id="cont">
 
	<div id="encabezado">
		<h1>Dacho Fotografias</h1>
		<h2>Portafolio Personal</h2>
	</div>
 
 
	<div id="contenido">
 
		<h2>BIENVENIDOS <span>A Mi Sitio Web</span></h2>
			<p>Soy un amante de la fotografia, en mi tiempo libre me gusta salir con mi camara a capturar esos momentos e imagenes que quiero que queden en mis recuerdos.</p>
			<p>A lo largo de este sitio encontraras las mejores fotografias que he tomado en los ultimos años, podras ver fotos de Paisajes, Animales y Gente. Te invito a que recorras mi sitio web y disfrutes tanto como yo del arte de la fotografia</p>
		</div>
 
 
	<div id="menu">
 
	<h3>Menu</h3>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Paisajes</a></li>
		<li><a href="#">Animales</a></li>
		<li><a href="#">Gente</a></li>
		<li><a href="#">Contacto</a></li>
	</ul>
	</div>
 
 
	<div id="pie">
		<h2>ULTIMAS <span>fotografias tomadas</span></h2>
		<div id="fotos">
		<div id="foto1">Fotografia 1</div>
		<div id="foto2">Fotografia 2</div>
		<div id="foto3">Fotografia 3</div>
		<div id="foto4">Fotografia 4</div>
		<div id="foto5">Fotografia 5</div>
		<div id="foto6">Fotografia 6</div>
	</div>
 
 
	<p>Todos los derechos reservados // <a>Curso de HTML / CSS</a> <a href="http://www.blogdelaweb.com.ar">blogdelaweb.com.ar</a></p></div>
	</div>
</body>
</html>

En la siguiente leccion aprenderemos a realizar reemplazos de textos por imagenes y colocaremos el fondo de la pagina!

Siguiente Lección >>

>> Indice de Contenido <<

Share
Si este post te sirvio/gusto, Entonces considera Enviar un comentario o Suscribirte a nuestro feedRSS para recibir las actualizaciones de nuesdtor sitio.

¿Que Podes seguir leyendo?