Como hacer un menu horizontal con html5 y css3

En esta practica les traigo como hacer un menu horizontal utilizando html5 y css3 naturalmente, a continuación el video tutorial  y posteriormente el codigo de la practica para que puedan replicarlo en sus casas.

Video tutorial

Codigo CSS

/*Body*/
body
{
	margin:0px;
	padding-top:5px;
}

#main_container
{
	width:90%;
	margin-left:5%;
	padding-top:5px;
	padding-bottom:5px;
	float:left;
	border: 3px outset;
}

/*Content*/

.content{
	width:90%;
	margin-top:5px;
	margin-left:5%;
	padding-bottom:50px;
	background:#ffffff;
	border: 1px dashed;
	height: auto;
	float:left;
}

.content article
{
	padding: 3%;

}

.content article h2
{

}

/*Header*/

.header
{
	width:90%;
	margin-top:5px;
	margin-left:5%;
	background:#ffffff;
	border: 3px outset;
	height: 200px;
	float:left;
}

/*Menu */
.top_menu ul
{
	list-style:none;
	float:left;
	border: 1px dashed;
	padding: 2%;
	width:95%;
}

.top_menu ul li
{
	float:left;
	margin-right:20px;
	margin-bottom:10px;
	background: #ff812d;
	padding:5px;
	border-radius: 15%;
}
.top_menu ul li a
{
	color: #FFFFFF;
	text-decoration:none;
}
.top_menu ul li a:hover
{
	color: blue;
}

/*Footer*/
.footer
{
	width:90%;
	margin-top:5px;
	margin-left:5%;
	background:#ffffff;
	border: 3px outset;
	height: 110px;
	float:left;
}

.footer_msg
{
	margin-top: 40px;
float: left;
margin-left: 5%;
font-size: 0.8em;
color: rgb(126, 126, 126);
}

 Codigo html:

<!DOCTYPE  html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Codigoprogramacion.com</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<section id="main_container">
		<header class="header">
			<h1>Tutoriales - Html/Css</h1>
			<nav class="top_menu">
				<ul>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3</a></li>
					<li><a href="#">Item 1</a></li>
					<li><a href="#">Item 2</a></li>
					<li><a href="#">Item 3</a></li>
				</ul>
			</nav>
		</header>

		<section class="content">
			<article>
				<h2>Lorem Ipsum</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet scelerisque arcu, vitae mattis turpis.
				 Cras dictum nisl non vulputate mollis. Vestibulum in elit vel sapien venenatis aliquam tincidunt nec arcu. 
				Pellentesque non consequat felis, ac accumsan tellus. Donec sem magna, sagittis nec erat fringilla, commodo aliquet massa.
				Mauris risus lectus, ornare vel venenatis a, rutrum at augue. Nam eget turpis at metus commodo dignissim sit amet id lectus. 
				Aliquam consectetur sem eget sem vehicula, nec laoreet felis pellentesque. Vivamus turpis ipsum, rutrum facilisis est semper,
				egestas congue nibh. Maecenas sodales leo sed quam lacinia luctus. Aliquam scelerisque rutrum nisi, ut tincidunt lorem pharetra in.
				 Curabitur malesuada dolor ac accumsan ornare. Curabitur pellentesque gravida ipsum, at elementum tortor convallis nec. Aenean
				  condimentum, nunc ac tincidunt tristique, odio ante euismod ligula, et ullamcorper mauris nisi ut ligula. Vivamus faucibus mattis
				   turpis ac aliquet. Nam elementum velit ut lectus vestibulum, eu pretium turpis vehicula.
				</p>
			</article>
		</section>
		<footer class="footer">
			<span class="footer_msg"> Este es el pie de página - codigoprogramacion.com</span>
		</footer>
	</section>
</body>	
</html>

 

Acerca del autor:

Mi nombre es Jorge Villalobos, soy Colombiano de nacimiento y resido en México desde 2005,actualmente soy el creador de codigoprogramacion.com Soy ingeniero en tecnologías de información y comunicaciones y trabajo de tiempo completo desarrollando aplicaciones web. En general me considero un tipo normal, me gusta salir, divertirme, y uno de mis hobbies es programar y hacer tutoriales para compartir conocimiento, me gusta la pizza, el ajedrez y tomar una que otra cerveza los fines de semana. Espero que este proyecto ayude a ayudar a los demás.

Twitter del autor:

11 comments

  1. jhon says:

    como puedo hacer que el menú quede centrado? te agradezco tu respuesta.

  2. Carlos Vega says:

    gracias…. me dio un cuerpo a la pagina ademas de darme el menu..

  3. pi says:

    waaaaaa!!!!!!!!!

  4. blackhat says:

    for(;;)alert(“deface web 23123″);

  5. I’m gone to inform my little brother, that he should
    also visit this weblog on regular basis to get
    updated from most up-to-date gossip.

  6. Ivann says:

    Gracias, me sacaste de un apuro enorme!!

  7. Luis says:

    Gracias por compartir tu conocimiento. Una consulta, como puedo tener un menú utilizando marcos, que en un marco este el menú y en otro aparezca el contenido.

  8. serafín mariano says:

    Hola te saludo para felicitarte de lo que realizas en base a lo expones me veo en la necesidad de terminar mi curso de programación por lo tanto me gustaría me guiaras para aprender a la programación como una persona que me pueda guiar o apadrine para poder realizar en base del aprovechamiento de estudiar por si mismo completar mis estudios se si tu me das los pasos a seguir te agradecería de antemano en aprender te mando un saludo espero tu respuesta favorable.
    Zongolica,Ver.19 de 2014. Saber es parte de la Vida.

  9. Katya says:

    Buenas Tardes: Jorge

    Tengo una vacante que pudiera ser una oportunidad laboral en Laureate International Universities. Pidiéndote de favor que me envies tu curriculum para poderte contactar y platicar de la posición.

    Estoy a tus órdenes
    Katya Gonzalez Portocarrero
    91 38 5000 ext 50393
    mail magonpor@laureate .mx

    Agradeciendo tu atención

  10. ALLAN says:

    hola jorge soy allan duran duran hace pocos minutos te escribi en la pagina de tu pagina web necesito comunicarme contigo acerca de un negoc

Leave a Reply

Your email address will not be published. Required fields are marked *