Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 11 de 11

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

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    21

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

    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-

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de manmanu
    Fecha de Ingreso
    28 ene, 07
    Mensajes
    1,050
    Poder de Reputación
    21
    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





  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 dic, 07
    Ubicación
    Valencia (España)
    Mensajes
    1,720
    Poder de Reputación
    23
    Buen aporte si señor. Gracias

    Saludos para los dos.

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de manmanu
    Fecha de Ingreso
    28 ene, 07
    Mensajes
    1,050
    Poder de Reputación
    21
    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.







  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    21
    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...

  6. #6
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 mar, 09
    Mensajes
    39
    Poder de Reputación
    13
    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

  7. #7
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    21
    Hola.


    cualquier duda aqui!!!

    Adios

    -nsn-

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 mar, 09
    Mensajes
    39
    Poder de Reputación
    13
    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??

  9. #9
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    21
    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!!

  10. #10
    Recien Llegado! Habitante
    Fecha de Ingreso
    24 jun, 09
    Mensajes
    23
    Poder de Reputación
    13
    no veo las imagenes

    saludos

    yandrac

  11. #11
    Recien Llegado! Merodeador
    Fecha de Ingreso
    16 nov, 09
    Mensajes
    5
    Poder de Reputación
    0
    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.

Temas Similares

  1. menu horizontal
    Por Mone en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 0
    Último Mensaje: 05/06/2010, 20:42
  2. Menu-horizontal
    Por teleibatin en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 7
    Último Mensaje: 21/12/2009, 16:26
  3. MENU HORIZONTAL
    Por juandaniel333 en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 1
    Último Mensaje: 30/04/2008, 22:06

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •