17-12-2007

MENU HORIZONTAL AVEC IMAGE CLICAQUES A PLACER SOUS LA BANNIERE

A la demande d'Edith voici comment placer un menu avec des images cliquables sous votre bannière.

Le code se présente comme ceci :

<table border="0" width="99%" cellspacing="0" cellpadding="0">

<td width="0%" align="center" valign="middle">
<a href=" http://demomiam.canalblog.com/archives/2000/01/01/6791649.html " title="L'Apéro"><img width="90" height="76" border="0" src="http://p6.storage.canalblog.com/62/36/308322/19923139.jpg" alt="L'Apéro" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href=" http://demomiam.canalblog.com/archives/2000/01/01/6785694.html " title="Cuisine Japonaise"><img width="90" height="76" border="0" alt="Cuisine Japonaise" src="http://p3.storage.canalblog.com/30/86/308322/19923104.jpg" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href=" http://demomiam.canalblog.com/archives/2000/01/01/6785732.html " title="Cuisine Chinoise"><img width="90" height="76" border="0" alt="Cuisine Chinoise" src="http://p7.storage.canalblog.com/77/86/308322/19955721.jpg" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href=" http://demomiam.canalblog.com/archives/2000/01/01/6836904.html " title="Cuisine Coréenne"><img width="90" height="76" border="0" src="http://p0.storage.canalblog.com/00/17/308322/19923122.jpg" alt="Cuisine Coréenne" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href=" http://demomiam.canalblog.com/archives/2000/01/01/6785744.html " title="Cuisine du monde"><img width="90" height="76" border="0" src="http://p1.storage.canalblog.com/16/04/308322/19923128.jpg" alt="Cuisine du monde" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href=" http://demomiam.canalblog.com/archives/2000/01/01/6785760.html " title="Cuisine bien de chez nous"><img width="90" height="76" border="0" alt="Cuisine bien de chez nous" src="http://p0.storage.canalblog.com/04/48/308322/19923145.jpg" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href=" http://demomiam.canalblog.com/archives/2000/01/01/6785778.html " title="Cuisine martienne">
<img width="90" height="76" border="0" src="http://p8.storage.canalblog.com/85/88/308322/19923153.jpg" alt="Cuisine martienne" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href=" http://demomiam.canalblog.com/archives/2000/01/01/6785797.html " title="Les desserts"><img width="90" height="76" border="0" src="http://p9.storage.canalblog.com/91/47/308322/19923180.jpg" alt="Les desserts" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href=" http://demomiam.canalblog.com/archives/2000/01/01/7120985.html " title="Les chocolats"><img width="90" height="76" border="0" alt="Les chocolats" src="http://p4.storage.canalblog.com/42/33/308322/19923199.jpg" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href=" http://demomiam.canalblog.com/archives/2000/01/01/7116109.html " title="Hors-Sujet"><img alt="Hors-Sujet" src="http://p7.storage.canalblog.com/76/53/308322/19923768.jpg" width="90" height="76" border="0" /></a><br></td>

</tr>
</table>

Chaque bloc de code est séparé par un espace et correspond à une image cliquable :

Exemple avec le premier bloc de l'Apéro :

<td width="0%" align="center" valign="middle">
<a href=" http://demomiam.canalblog.com/archives/2000/01/01/6791649.html " title="L'Apéro"><img width="90" height="76" border="0" src="http://p6.storage.canalblog.com/62/36/308322/19923139.jpg" alt="L'Apéro" /></a><br></td>

En gris c'est l'adresse de direction, la page ou l'on atterri si on clique sur l'image.
En rouge c'est l'adresse entière de votre image.

Vous n'êtes obligé de mettre le title="L'Apéro" ni le alt="L'Apéro" ça permet juste d'afficher le nom du menu lorsqu'on passe la souris dessus.

Une fois que vous avez entrez toutes vos données dans le menu il ne vous reste plus qu'à l'insérer au bon endroit dans votre page d'accueil et dans les autres page ou vous voulez qu'il s'affiche.

Sur la ligne <body> repérez <div id="topbar"></div> faites un retour à la ligne à la fin de ce code et collez votre menu.

Faites de nouveau un retour à la ligne pour laisser un espace avec les codes <div id="leftbar"><div class="navlinks"> de façon qu'ils se trouvent en dessous.
C'est plus clair visuellement et ça évite de faire des bêtises en se mélangeant les pinceaux.

En fait votre menu doit être collé entre <div id="topbar"></div> et <div id="leftbar"><div class="navlinks">

Voila ce que ça donne dans votre page  :

Sans_titre_1

A l'écran ça donne ça :

Le grand méchant Cook !


Posté par Demolite - Permalien [#]
Tags :