Menu sur 1 image

Bonjour,

Voici mon petit soucis. Je ne sais pas faire de menu en image. Ou plutot j'en ait jamais fais.

Voici mon image :

http://yodrittt.olympe-network.com/n...mages/menu.jpg

Pouvez-vous me donner 1 tutoriels ou m'écrire le code pour faire, avec les explications pour que je comprenne. Car sa va mettre utile.

Et je voudrez écrire des liens dessus avec du css ou html.

Merci d'avence

bonjour,

pour faire ton menu:

tu crée une balise d'ouverture div et une autre de fermeture ceux sont des balises de type block en html, elles contiendront les éléments de ton menu.

Code:

---

1 2 3

<div> </div>

---

Ensuite dans la la première balise "div" grace à l'attribut "style" tu vas introduire des éléments css.

Code:

---

1 2 3

<div style="background-image:url('tonimage.png.jpeg.gif');width:700px;height:100px;"> </div>

---

Le background c'est pour mettre ton image en fond;
width c'est la longueur;
height c'est la hauteur;

Déjà là tu as ton image visible maintenant reste plus qu'à remplir ta div de tes menus avec des liens.....

Code:

---

1 2 3 4 5 6

<div style="background-image:url('tonimage.png.jpeg.gif');width:700px;height:100px;"> <a href="tapage1.html" title="le descriptif de ton lien">menu1</a> <a href="tapage2.html" title="le descriptif de ton lien2">menu2</a> <a href="tapage3.html" title="le descriptif de ton lien3">menu3</a> </div>

---

voila un baby menu de créé.
Maintenant si tu veux centrer sur la longueur ton menu tu rajoutes les balises <center></center> (je sais ils y en a qui vont gueuler mais cette méthode fonctionne très bien et c'est la plus simple).

Code:

---

1 2 3 4 5 6 7 8

<div style="background-image:url('tonimage.png.jpeg.gif');width:700px;height:100px;"> <center> <a href="tapage1.html" title="le descriptif de ton lien">menu1</a> <a href="tapage2.html" title="le descriptif de ton lien2">menu2</a> <a href="tapage3.html" title="le descriptif de ton lien3">menu3</a> </center> </div>

---

Voila le menu qui est centré mais pas sur la hauteur. Le mieux c'est de mettre ton menu sur le bas de la bannière, enfin tu fairas comme tu veux mais c'est un peu conventionnel. Pour ça tu utilises "padding-top" en css que tu mets dans une balise "style" et tu définis l'espace au dessus en "px".

Code:

---

1 2 3 4 5 6 7 8

<div style="background-image:url('tonimage.png.jpeg.gif');width:700px;height:100px;padding-top:90px;"> <center> <a href="tapage1.html" title="le descriptif de ton lien">menu1</a> <a href="tapage2.html" title="le descriptif de ton lien2">menu2</a> <a href="tapage3.html" title="le descriptif de ton lien3">menu3</a> </center> </div>

---

Voila un menu version classique.