[TUTORIAL] menu horizontal del futuro (recomendado por nsn)

**nosabernada** · 20/03/2009, 18:43

Hola,

queria enseñaros mi menu mas preciado, el que mas me gusta y el que mas uso, poruqe de las dos paginas que tengo funcionando...tienen el que voy ha enseñaros. www.sdelbiombo.tk y www.nosabernada.mzstudios.0lx.net .

1.

hacemos un archivo nuevo con los siguientes valores:

y con el mismo nombre, para que luego todo sea mas facil.

y nos deberia quedar algo asi:

2

seleccionamos dos colores que queramosy hacemos un degradado, asi queda:

ahora ya tenemos el fondo del menu horizontal,

con lo cual pasamos a otras cosas, como...el hover, abrimos otro archivo despues de guardar el anterior en la carpeta de objetos:

queda por lo tanto asi:

y le damos un color contrastado y queda asi:

Y por ultimo...

crear un archivo en blanco con estas medidas.

Ahora a la parte del html:

en el index.html :

Código:

<div id="menu">
<ul>[*]inicio[*]Descargas[*]Diseño[*]colabora[*]foro[/list]</div>

en el estilos.css :

Código:

}
#menu {
	 		background: url(objetos/fondo-menu.jpg);
			width: 100%;
			height: 50px;
			margin: 0 0 0 0;
			padding: 0 0 0 0;
						margin: 0 auto;
}
#menu ul {
	width: 700px;
	height: 50px;
	margin: 0;
	padding: 0;
	border-left: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	list-style: none;
}

#menu li {
	display: inline;		
}

#menu a {
	display: block;
	float: left;
	height: 50px;
  padding: 15px 20px 0 19px;
	background: url(objetos/linea.jpg) no-repeat;
	text-transform: lowercase;
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
	color: #FFFFFF;
				margin: 0 auto;
}
#menu a:link {font-size: 15px}
#menu a:hover {font-size: 15px; background: white url(objetos/menu-hover.jpg); color: black;}

Espero que os sirva ya que me ha costado muuuchisimo hacerlo!

Adios
-nsn-

**manmanu** · 21/03/2009, 21:01

Hola nsn,

Vaya....
Es un buen aporte, que seguro ayudará a muchos.
De verdad..!!!
Sigue así, tu construye y siembra.

saludos nosaber.

P.D. Bonita imágen la de tu firma.

manmanu

**kimapa** · 22/03/2009, 02:44

Buen aporte si señor. Gracias

Saludos para los dos.

**manmanu** · 22/03/2009, 19:05

Gracias kike.

saludos amigos.

manu

PD. se que la imágen de mi firma que esta creada en PNG, en IExplorer se ve el fondo turquesa, no así con los demás navegadores, por que es una imágen con el fondo transparente.
Existe un truco webmaster para evitar esta dicha, ahora no lo recuerdo, intentare encontrarlo.

**nosabernada** · 24/03/2009, 18:19

Hola,

gracias a los dos!!

Aqui nsn construyendo y sembrando!

estos dias me volvi a enganchar al photoshop y dedique un tutorial a CCTW, tambien cree la firma, pero estoy preparando otra algo mas chula! gracias!

Adios

PD: cuando pueda pondre otro tutorial mas!

PD2: las imagenes transparentes no son mejores en GIF ?pregunto...

**Masterk** · 24/03/2009, 20:37

yeah gracias men jajaja gracias por todo gracias enserio

:D :o

ya lo comense a hacer si logro hacer mi web y espero que si me volvere loco jajajajajaja gracias

**nosabernada** · 24/03/2009, 20:46

Hola.

cualquier duda aqui!!!

Adios

-nsn-

**Masterk** · 24/03/2009, 21:17

hey y ese el mismo se dijo de la imagen jajajajaja

hey nosaber asi como esta ahi el codigo tml asi lo tengo que poner o le tengo que cambiar algunas cosas??

**nosabernada** · 25/03/2009, 19:27

Hola,

depende de como has guardado las imagenes...yo las he guardado en *.jpg y he puesto los nombres que hay en la foto...si has seguido todos los pasos es ese mismo codigo...ahora si quieres cambiarle tamaños...eso lo tienes que cambiar tu.

Adios

PD: mas cosas aqui!!

**yandrac** · 14/12/2009, 15:26

no veo las imagenes

saludos

yandrac

**Cactoos** · 14/12/2009, 19:59

Compadre ya no se ven las imágenes... y la segunda página redirije a otra dirección...

al menos en la primera si se ve el menú, y está bien bueno.

porfa resube las imágenes.