Discussion :

[yodritt]

Bonjour,

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

Voici mon image :



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

[xess91]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.