Revision: 31655
Updated Code
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
Updated Code
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
Updated Code
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
Updated Code
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
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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