| Menú |
|
|
|
|
|
|
|
|
|
Manga
|
|
|
|
|
|
|
|
Tutoriales PWG
|
|
|
|
|
|
|
|
|
|
Seccion juegos Online
|
|
|
|
|
|
|
|
|
|
Webs Recomendadas
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Codigos HTML creados por mi
|
|
|
|
|
|
|
|
|
| |
Hola, como mucha gente hase lo que hizo pirro para colocar el horizontal, creo que ya es hora de hacer que aprendan un pequeño truco que invente hase 3 horas y que funciona 99% bien(tiene un pequeño desperfecto), la cosa es colocar un menú horizontal justo debajo del menú sin necesidad de colocar toda la pagina en un editor de pagina(para los que conocen este sistema de colocar el menu creo que me entenderan.)
Antes de comenzar: Deve tener en cuenta que este truco solo funcionara en la plantilla "ice-blue". Usted no deve editar nada de los codigos que voy a mensionar o podria ocurrir un desastre, edite solamente las partes que estan en color Rojo, si un parentesis*() no esta dentro del color rojo entonces no los borre
Aviso!: en este tutorial incluire tanto HTML como CSS(aun que no crean que solo se esta manera, solo coloco el que me parecio mas sencillo de entender y el cual lo probe 10 veces para ver si funcionaba a la perfeccion.)
Si leyeron, entonces todo O.K, ahora comenzamos con el tutorial:
Lo primero es mostrarles como quedara nuestro pequeño pero efectivo menú horizontal al terminar el tutorial:
(Click en la imagen para verla en tamaño completa)
Ese es el menú horizontal que hize para demostrarles como quedara. (si se dan cuenta una parte esta como diferente ante los otros, eso es porque es cuando se pasa el mouse por enzimade link.)
Ojo!: en este menú vamos a sacrificar un 15 o 20% del tamaño orginal del encabezado!
Continuemos:
-Ahora vallan a Paint o Photoshop(o al programa para editar imagenes que tengais.) y creen una imagen de exactamente 921 x 104 pixeles. Hay vamos a hacer el encabezado, pero primero copien y pegen esta imagen en la imagen que sera tu encabezado:
(Click en la imagen para verla en tamaño completa)
Ahora, usted en la parte negra (donde dice: "This is...my world! F") haga su encabezado(por algo dije que sacrificariamos un 15 o 20% del encabezado que hagamos.) y ahora en la parte azul(que tiene una parte mas negra que otra) haga el fondo del menú(en otras palabras, como va a ser su menú en su pagina) y guarde la imagen en formato PNG(o cualquier otro, si no que digo este por ser el mejor de los formatos de imagen).
Ahora lo siguiente que tiene que hacer es ir a Pagina Web Gratis, identificarse y colocar "Editar diseño". Una vez dentro de editar diseño por favor escoja una box para colocar un codigo html(por favor que tenga contenido o si no sera muy notorio que ha colocado un codigo hay dentro) y el codigo es el siguiente(este codigo contendra los links que estaran dentro del menú que vamos a insertar):
<div style="position:absolute;left:20px;top:124px;" ><a href="Link o URL" class="menuh">Texto link</a> | <a href="Link o URL" class="menuh">Texto link</a> | <a href="Link o URL" class="menuh">Texto link</a> | <a href="Link o URL" class="menuh">Texto link</a></div>
P.S= Edite solamente lo que esta en color Rojo. Tambien en el codigo coloque para un total de 4 link's si quiere mas por favor comente que quiere tener mas link's y asi se ahorrara el trabajo de pensar.(ya que tendra que estudiar un poco este codigo para comprender como funciona y agregarle mas)
Una vez hecho eso, todavia no guarde los cambios por favor, ahora inserte el siguiente codigo CSS en "Texto por debajo de la pagina":
<style type="text/css">
<!--
td.edit_header_full{background-image:url(Link o URL de su encabezado que hizo anteriormente);}
.menuh:hover{background-color:#Codigo del color para "mouse enzima del link";}
--></style>
P.S= Edite solamente lo que esta en color RojoDonde dice:Codigo del color para "mouse enzima del link" usted tiene que colocar el color que resaltara el link(por debajo) al pasar el mouse.
Una vez hecho todo eso, guarde los cambios y mire como ha quedado su menú horizontal. Si a usted todavia no le convence este truco, mire el codigo que use para colcoar el ejemplo anterior(le cambio solo una cosa, que es en vez de color para resaltar, coloque que sea una imagen para resaltar):
En la box:
| Código: |
| <div style="position:absolute;left:10px;top:124px;" ><a href="http://fmundo.es.tl/" class="menuh">Inicio</a> | <a href="http://www.paginawebgratis.es/forum/" class="menuh">Comunidad</a> | <a href="http://www.paginawebgratis.es/" class="menuh"> Pagina Web Gratis</a> | <a href="http://paginawebgratis.es.tl/" class="menuh">Ejemplos</a></div> |
En "Texto por debajo de la pagina":
| Código: |
<style type="text/css">
<!--
td.edit_header_full{background-image:url(http://img293.imageshack.us/img293/3056/encabezadokj5.png);}
.menuh:hover{background-image:url(http://img293.imageshack.us/img293/6833/selecciondf4.png);}
--></style> |
Si copia el codigo que hize, tiene un plazo de 24 horas para sacarlo, o si no contara como "Copyright" y eso va contra las reglas de PWG
|
|
|
|
|
|
| |
Hoy habia 1 visitantes (2 clics a subpáginas) ¡Aqui en esta página!
Copyright © 2008 todos los derechos reservados
|
|
|
|
|
|
|
|
