Deprecated: Function eregi_replace() is deprecated in /home/tupunto/public_html/webmaster/admin/includes/classes/class.helper.php on line 830

Deprecated: Function eregi_replace() is deprecated in /home/tupunto/public_html/webmaster/admin/includes/classes/class.helper.php on line 830

Deprecated: Function eregi_replace() is deprecated in /home/tupunto/public_html/webmaster/admin/includes/classes/class.helper.php on line 830

Deprecated: Function eregi_replace() is deprecated in /home/tupunto/public_html/webmaster/admin/includes/classes/class.helper.php on line 830

Deprecated: Function eregi() is deprecated in /home/tupunto/public_html/webmaster/includes/classes/class.template.php on line 169

Deprecated: Function eregi() is deprecated in /home/tupunto/public_html/webmaster/includes/classes/class.template.php on line 169

Deprecated: Function ereg_replace() is deprecated in /home/tupunto/public_html/webmaster/includes/classes/class.template.php on line 324
Tupunto del Webmaster - http://www.tupuntoempresarial.com/webmaster
Creación de menus de navegación mediante listas y CSS
http://www.tupuntoempresarial.com/webmaster/articles/5/1/Creacion-de-menus-de-navegacion-mediante-listas-y-CSS/Page1.html
By Super Admin
Published on 11/23/2008
 
Una de las formas mas sencillas de crear un menú utilizando css es mediante el uso de listas:

Creación de menus de navegación mediante listas y CSS
Una de las formas mas sencillas de crear un menú utilizando css es mediante el uso de listas: <ul> <li>Campo 1</li> <li>Campo 2</li> <li>Campo 3</li> </ul> En este caso nos saldrían los campos uno debajo de otro, y nuestro objetivo es que aparezcan horizontales, pero sobre todo, queremos controlar todo el aspecto del menu desde la hoja de estilos. Para ello añadiremos el siguiente codigo a nuestra hoja de estilos: #menu { display:block; list-style:none; margin:0; margin-left:36px; } #menu li { position:relative; margin-left:2px; margin-right:2px; float:left; background:url("img/menu-left.jpg") no-repeat bottom left; } #menu li a { display:block; width:185px; padding:3px 0; text-decoration:none; text-align:center; font-size:11px; color:#333333; margin-left:3px; background: url("img/menu-center.jpg") bottom; border-right:1px solid #999999; font-weight: bold; } #menu li a:hover { color:#FFFFFF; background: url("img/menu-center-alt.jpg") bottom; } Y después creamos en nuestra página web el menu: <ul id="menu"> <li><a href="www.dominio.com">Campo 1</a></li> <li><a href="www.dominio2.com">Campo 2</a></li> </ul> Si os fijais, hemos asigando a la lista el id="menu": <ul id="menu"> Por otro lado en la hoja de estilos hemos optado por usar imagenes de fondo en vez de colores. Es solo cuestión de imaginación. Un saludo y esperamos que os sirva.