Return to Snippet

Revision: 31655
at September 10, 2010 04:21 by chuisxa


Updated Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
ul.menu{
	width:200px;
	list-style:none;
	border:1px solid #7C7C7C;
	border-bottom:none;
	
	margin:0;
	padding:0;}
	
ul.menu li{
	border-bottom:1px solid #7C7C7C;
	background: #F4F4F4;
	background-image: url(imagenesEjercicio10/flecha_inactiva.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
}

ul.menu li a:link, ul.menu li a:visited {
	padding: .2em 0 .2em 24px;
	/* Al mostrar en bloque el enlace es todo el ancho*/
	display: block;
	text-decoration: none;
	color: #333;
}

ul.menu li:hover{
	background-color: #E0E0E0;
	background-image: url(imagenesEjercicio10/flecha_activa.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
	}
</style>
<title>Sencillo menu en CSS</title>
</head>

<body>
<ul class="menu">
	<li><a href="#" title="Enlace 1">Enlace 1</a></li>
	<li><a href="#" title="Enlace 2">Enlace 2</a></li>
	<li><a href="#" title="Enlace 3">Enlace 3</a></li>
	<li><a href="#" title="Enlace 4">Enlace 4</a></li>
    <li><a href="#" title="Enlace 5">Enlace 5</a></li>
	<li><a href="#" title="Enlace gen������©rico">Elemento 6</a></li>
</ul>
</body>
</html>

Revision: 31654
at September 10, 2010 04:19 by chuisxa


Updated Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
ul.menu{
	width:200px;
	list-style:none;
	border:1px solid #7C7C7C;
	border-bottom:none;
	
	margin:0;
	padding:0;}
	
ul.menu li{
	border-bottom:1px solid #7C7C7C;
	background: #F4F4F4;
	background-image: url(imagenesEjercicio10/flecha_inactiva.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
}

ul.menu li a:link, ul.menu li a:visited {
	padding: .2em 0 .2em 24px;
	/* Al mostrar en bloque el enlace es todo el ancho*/
	display: block;
	text-decoration: none;
	color: #333;
}

ul.menu li:hover{
	background-color: #E0E0E0;
	background-image: url(imagenesEjercicio10/flecha_activa.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
	}
</style>
<title>Sencillo menu en CSS</title>
</head>

<body>
<ul class="menu">
	<li><a href="#" title="Enlace 1">Enlace 1</a></li>
	<li><a href="#" title="Enlace 2">Enlace 2</a></li>
	<li><a href="#" title="Enlace 3">Enlace 3</a></li>
	<li><a href="#" title="Enlace 4">Enlace 4</a></li>
    <li><a href="#" title="Enlace 5">Enlace 5</a></li>
	<li><a href="#" title="Enlace gen���©rico">Elemento 6</a></li>
</ul>
</body>
</html>

Revision: 31653
at September 10, 2010 04:18 by chuisxa


Updated Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
ul.menu{
	width:200px;
	list-style:none;
	border:1px solid #7C7C7C;
	border-bottom:none;
	
	margin:0;
	padding:0;}
	
ul.menu li{
	border-bottom:1px solid #7C7C7C;
	background: #F4F4F4;
	background-image: url(imagenesEjercicio10/flecha_inactiva.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
}

ul.menu li a:link, ul.menu li a:visited {
	padding: .2em 0 .2em 24px;
	/* Al mostrar en bloque el enlace es todo el ancho*/
	display: block;
	text-decoration: none;
	color: #333;
}

ul.menu li:hover{
	background-color: #E0E0E0;
	background-image: url(imagenesEjercicio10/flecha_activa.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
	}
</style>
<title>Sencillo menu en CSS</title>
</head>

<body>
<ul class="menu">
	<li><a href="#" title="Enlace 1">Enlace 1</a></li>
	<li><a href="#" title="Enlace 2">Enlace 2</a></li>
	<li><a href="#" title="Enlace 3">Enlace 3</a></li>
	<li><a href="#" title="Enlace 4">Enlace 4</a></li>
    <li><a href="#" title="Enlace 5">Enlace 5</a></li>
	<li><a href="#" title="Enlace gen�©rico">Elemento 6</a></li>
</ul>
</body>
</html>

Revision: 31652
at September 10, 2010 04:18 by chuisxa


Updated Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
ul.menu{
	width:200px;
	list-style:none;
	border:1px solid #7C7C7C;
	border-bottom:none;
	
	margin:0;
	padding:0;}
	
ul.menu li{
	border-bottom:1px solid #7C7C7C;
	background: #F4F4F4;
	background-image: url(imagenesEjercicio10/flecha_inactiva.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
}

ul.menu li a:link, ul.menu li a:visited {
	padding: .2em 0 .2em 24px;
	/* Al mostrar en bloque el enlace es todo el ancho*/
	display: block;
	text-decoration: none;
	color: #333;
}

ul.menu li:hover{
	background-color: #E0E0E0;
	background-image: url(imagenesEjercicio10/flecha_activa.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
	}
</style>
<title>Sencillo menu en CSS</title>
</head>

<body>
<ul class="menu">
	<li><a href="#" title="Enlace 1">Enlace 1</a></li>
	<li><a href="#" title="Enlace 2">Enlace 2</a></li>
	<li><a href="#" title="Enlace 3">Enlace 3</a></li>
	<li><a href="#" title="Enlace 4">Enlace 4</a></li>
    <li><a href="#" title="Enlace 5">Enlace 5</a></li>
	<li><a href="#" title="Enlace genérico">Elemento 6</a></li>
</ul>
</body>
</html>

Revision: 31651
at September 10, 2010 04:17 by chuisxa


Initial Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
ul.menu{
	width:200px;
	list-style:none;
	border:1px solid #7C7C7C;
	border-bottom:none;
	
	margin:0;
	padding:0;}
	
ul.menu li{
	border-bottom:1px solid #7C7C7C;
	background: #F4F4F4;
	background-image: url(imagenesEjercicio10/flecha_inactiva.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
}

ul.menu li a:link, ul.menu li a:visited {
	padding: .2em 0 .2em 24px;
	/* Al mostrar en bloque el enlace es todo el ancho*/
	display: block;
	text-decoration: none;
	color: #333;
}

ul.menu li:hover{
	background-color: #E0E0E0;
	background-image: url(imagenesEjercicio10/flecha_activa.png);
	background-repeat: no-repeat;
	background-position: 0.2em 50%;
	}
</style>
<title>Sencillo menu en CSS</title>
</head>

<body>
<ul class="menu">
	<li><a href="#" title="Enlace 1">Enlace 1</a></li>
	<li><a href="#" title="Enlace 2">Enlace 2</a></li>
	<li><a href="#" title="Enlace 3">Enlace 3</a></li>
	<li><a href="#" title="Enlace 4">Enlace 4</a></li>
    <li><a href="#" title="Enlace 5">Enlace 5</a></li>
	<li><a href="#" title="Enlace genérico">Elemento 6</a></li>
</ul>
</body>
</html>

Initial URL

                                

Initial Description
Un sencillo menú realizado con CSS y un par de imágenes haciendo de \\\\\\\\\\\\\\\"bullets\\\\\\\\\\\\\\\".\\\\\\\\r\\\\\\\\nEs una pequeña variación del que se encuentra en el tutorial de CSS de librosweb.com

Initial Title
Menu de un nivel en XHTML y CSS

Initial Tags

                                

Initial Language
CSS