wenas, este es uno de mis primeros post, espero que os guste.
boi a enseñaros a poner menus para web con css y html que parece dificil pero es mui sencillo.
1-descargamos el codigo css y html, y sus imagenes si las lleva, el archivo css aveces tiene que cargar imagenes para que funcione bien el menu.
2-copiar el codigo css en el head de la pagina, hay una etiqueta
<head><style type="text/css">aqui el codigo css</style></head>.
3-copiar el codigo html dentro de el body,
<body>codigo html</body>.
4-las imagenes tienen que estar ubicadas en el mismo sitio en la que se encuentre la pagina si no, no se vera bien.
aqui les dejo una pagina donde os mandara a otras pagina que ai menus gratuitos-----> aqui
ESPERO AVERLES AYUDADO Y DEJEN BUENOS COMENTARIOS.
advierto que si se pone en sitios webs con limitacioines como blogspot no se veran bien, mas bien sirve para hacerlo uno mismo desde cero aunque sea en un servidor gratuito como eshost.es
boi a enseñaros a poner menus para web con css y html que parece dificil pero es mui sencillo.
1-descargamos el codigo css y html, y sus imagenes si las lleva, el archivo css aveces tiene que cargar imagenes para que funcione bien el menu.
2-copiar el codigo css en el head de la pagina, hay una etiqueta
<head><style type="text/css">aqui el codigo css</style></head>.
3-copiar el codigo html dentro de el body,
<body>codigo html</body>.
4-las imagenes tienen que estar ubicadas en el mismo sitio en la que se encuentre la pagina si no, no se vera bien.
aqui les dejo una pagina donde os mandara a otras pagina que ai menus gratuitos-----> aqui
ESPERO AVERLES AYUDADO Y DEJEN BUENOS COMENTARIOS.
advierto que si se pone en sitios webs con limitacioines como blogspot no se veran bien, mas bien sirve para hacerlo uno mismo desde cero aunque sea en un servidor gratuito como eshost.es
HAY OTRA FORMA DE HACER "MENUS"
podriamos utilizar tambien codigos css pero si queremos no son necesario yo les ire explicando.
DENTRO DEL <BODY></BODY>
podemos crear una tabla:
<table><tr><td></td></tr></table>
lo digo por si no se sabe,tr es la fila y td es la celda.
bien para que se parezca a un menu se podria hacer lo siguiente, poner muchas celdas:
<table>
<tr>
<td>inicio</td>
<td>seccion1</td>
<td>seccion2</td>
</tr></table>
asi seria un menu y podriamos modificarlo a nuestro gusto bien ahora les boi a explicar lo que se me ocurra que se puede hacer con las celdas y lo demas:
dentro del <td>
style= "background-img:url('imagenes/foto.jpg')"; ---->para poner el fondo
style= "background-size:600px600px;"---->tamaño fondo
style= "background-repeat:no-repeat;"---->para que el fondo no se repita si no aparecera en mosaico
style= "background-repeat:repeat-x;"--->el fondo se repetira hacia la derecha y si en vez de poner x ponemo y hacia abajo.
style= "background-color:red;"--->color del fodo tambien se pueden poner hexadecimales con #antes del numero.
style= "background-position:center;"---->posicion del fondo tambien puede ser en la izquierda (left) , derecha(right), o abajo (bottom).
style= "text-decoration:none;"---->para que no salga la linea azul en los enlaces
style= "text-align:center;"puede centrarse en lef,right,top o bottom.
align="center"--->esto mas bien lo pondria dentro del <table> para centrar la table tambien puede centrarse en lef,right,top o bottom.
valign="center"--->donde se alinea lo que hay dentro del td pero en vertical puede centrarse al igual que el align.
digo por si alguien no lo sabe que no se pone para cada cosa un style se pone todo de seguido por ejemplo
style=background-img:url('foto.jpg');background-repeat:no-repeat;
EMPECEMOS CON CSS
<style type="text/css">
bosdy{
background-img: url(foto.jpg);
background-repeat:no-repeat;
}
#div.posicion1{
position:relative;(tambien absolute)
left:10px;
botton:-20px;
}
td:hover{background-img: url('foto2.jpg');} ----->cuand este la flecha encima de la celda, de esta manera se pondran todas las celdas.
td.fondo3:hover{background-img: url('foto3.jpg');} ---> de esta manera solo las que llevan el class="fonde3".
a:link {color:white;} ---> color del enlace.
a:visited {color:white;} --->color del enlace visitado.
a:hover{color:#FFE159;} --->color del enlace con la flecha encima.
a { outline: none; } ---> esto es para que no se formen los puntos alrededor de la celda o del enlace cuando entemos.
</style>
bueno explico que el div interfiere a lo que balla dentro.
vamos con el body de lo que emos puesto arriva:
<table border="1">
<tr>
<td class="fonde3">
<div class="posicon1">hola</div>
</td>
</tr>
</table>
podriamos utilizar tambien codigos css pero si queremos no son necesario yo les ire explicando.
DENTRO DEL <BODY></BODY>
podemos crear una tabla:
<table><tr><td></td></tr></table>
lo digo por si no se sabe,tr es la fila y td es la celda.
bien para que se parezca a un menu se podria hacer lo siguiente, poner muchas celdas:
<table>
<tr>
<td>inicio</td>
<td>seccion1</td>
<td>seccion2</td>
</tr></table>
asi seria un menu y podriamos modificarlo a nuestro gusto bien ahora les boi a explicar lo que se me ocurra que se puede hacer con las celdas y lo demas:
dentro del <td>
style= "background-img:url('imagenes/foto.jpg')"; ---->para poner el fondo
style= "background-size:600px600px;"---->tamaño fondo
style= "background-repeat:no-repeat;"---->para que el fondo no se repita si no aparecera en mosaico
style= "background-repeat:repeat-x;"--->el fondo se repetira hacia la derecha y si en vez de poner x ponemo y hacia abajo.
style= "background-color:red;"--->color del fodo tambien se pueden poner hexadecimales con #antes del numero.
style= "background-position:center;"---->posicion del fondo tambien puede ser en la izquierda (left) , derecha(right), o abajo (bottom).
style= "text-decoration:none;"---->para que no salga la linea azul en los enlaces
style= "text-align:center;"puede centrarse en lef,right,top o bottom.
align="center"--->esto mas bien lo pondria dentro del <table> para centrar la table tambien puede centrarse en lef,right,top o bottom.
valign="center"--->donde se alinea lo que hay dentro del td pero en vertical puede centrarse al igual que el align.
digo por si alguien no lo sabe que no se pone para cada cosa un style se pone todo de seguido por ejemplo
style=background-img:url('foto.jpg');background-repeat:no-repeat;
EMPECEMOS CON CSS
<style type="text/css">
bosdy{
background-img: url(foto.jpg);
background-repeat:no-repeat;
}
#div.posicion1{
position:relative;(tambien absolute)
left:10px;
botton:-20px;
}
td:hover{background-img: url('foto2.jpg');} ----->cuand este la flecha encima de la celda, de esta manera se pondran todas las celdas.
td.fondo3:hover{background-img: url('foto3.jpg');} ---> de esta manera solo las que llevan el class="fonde3".
a:link {color:white;} ---> color del enlace.
a:visited {color:white;} --->color del enlace visitado.
a:hover{color:#FFE159;} --->color del enlace con la flecha encima.
a { outline: none; } ---> esto es para que no se formen los puntos alrededor de la celda o del enlace cuando entemos.
</style>
bueno explico que el div interfiere a lo que balla dentro.
vamos con el body de lo que emos puesto arriva:
<table border="1">
<tr>
<td class="fonde3">
<div class="posicon1">hola</div>
</td>
</tr>
</table>