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://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://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://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://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://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://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://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://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://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://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://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 Commentaires [25] - Permalien [#]
Tags :

ça me parait à première vue pas si simple, mais le résultat étant magnifique, je vais approfondir la lecture....
Bises

Posté par : Olivier Le 17-12-2007 à 13:49

depuis quand écris-tu en chinois ? la nullos de service.

Posté par : Momo Le 17-12-2007 à 17:03

Bin ça fait plaisir de te voir par ici ![Chesse]

C'est la première fois que tu me laisse un message sur ce blog [Super]

T'as vu un peu comme je parle bien le chinois !
ça t'épate ça hein !?

Et oui...toi c'est le français et moi c'est les maths ! [Cool]
Grosse bise ma petite mère et si tu veux créer un blog un jour, tu sais que je suis la pour d'aider [je cherche]

[Coeur]
ta fille pas si Démolite que ça [Chesse]

Posté par : Demolite ! Le 17-12-2007 à 17:22

Est-ce que ça peut remplacer les catégories qu'il y a dans les colonnes ?

Posté par : Muramasa Le 17-12-2007 à 20:42

[Salut]
oui bien sur c'est le but...

Posté par : Demolite ! Le 18-12-2007 à 08:43

Ce n'est pas la première fois que je viens sur ton blog mais je me décide enfin à te féliciter pour ton travail, le partage de tes connaissances.
Merci beaucoup, j'ai enfin la solution pour mettre le menu sous la bannière. J'ai essayé sur un blog d'essai et ça marche. Il va falloir que je m'y mette maintenant sur mon blog principal.[Super]

Posté par : coco28 Le 18-12-2007 à 09:51
Génial

Ah c'est super je ne savais pas qu'on pouvait faire ça ! Tout est possible avec Démolite [Chesse]

Merci beaucoup ! [Super]

Posté par : Lacrymosa Le 18-12-2007 à 14:23

Coucou Démolite

Au secours, je ne trouve plus ton adresse mail....
Je viens de merder et j'ai complètement modifier la mise en page de mon 2eme blog, celui où tu m'avais filé un coup de main pour la bannière.... http://homesweet.canalblog.com/ C'est grave tu crois ?

Merci

Posté par : Cocopassions Le 18-12-2007 à 22:36

Ah ça y est j'ai réussi [Moqueur]

Par contre, tu peux voir sur mon blog que le "content" fait 600px, ça c'est normal, par contre j'aurais voulu qu'il soit centré, au lieu d'être à gauche. J'ai essayé de marquer [G]float: center;[/G] comme avant c'était [G]float: left;[/G], mais ça n'a rien changé.
Sais-tu comment faire ?

#container {
width: 900px;
padding: 0px;
background-color: #FFFFFF;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #99B2CC;
margin-right: auto;
margin-left: auto;
}
#content {
float: center;
width: 600px;
background-color: #000000;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-width: 1px;
border-color: #000000;
overflow: hidden;
}
#rightbar {
float: left;
width: 0px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#leftbar {
float: left;
width: 0px;
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#topbar-logo {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #FFFFFF;
background: #334C66 url("http://img172.imageshack.us/img172/4641/1aaq4.jpg") no-repeat 0% 0%;
height: 100px;
display: block;


Merci d'avance [Chesse]

Posté par : Muramasa Le 19-12-2007 à 13:36

Merci mille fois je m'y colle dès que je peux, ben oui un peu débordée pour les fêtes[Super]

Posté par : Edith Le 19-12-2007 à 13:59

merci beaucoup pour ce tuto merveilleux !

Posté par : cecej Le 30-12-2007 à 16:38

Coucou
je suis en train de faire des essais mais j'ai 12 catégories à placer sous ma bannière et ca me pose un problème de taille de miniatures, peux tu me donner un coup de main pour savoir quelle taille adopter par rapport à mes photos
Merci

Posté par : Edith Le 05-01-2008 à 16:04
comme toujours

merci[Bravo] de chez MERCI, je n'ai mis que deux boutons d'accès directs mais c'est bien ,
bises de la mémé [Fleur]
nel[Coeur]

Posté par : nel Le 28-01-2008 à 12:19
Menu vertical

Salut démolite !
Aujourd'hui je vais commencer mes menus cliquables avec images
Donc[G][S] images pour les titres de mes catégories [/S][/G]
exemple : mettre une petite image sous mon thèmes apéritifs
Je n'ai pas trouvé ce que je voulais dans ton tuto pour ça , j'ai du mal bref
Est ce que la manip que tu indiques serait la meme pour faire un menu vertical ?
Merci
vanes

Posté par : Vanes Le 06-03-2008 à 10:31

Si en fait tu peux mettre le menu dans une colonne, il sera vertical, il faut juste jouer avec la taille des images ou les centrer dans la colonne pour qu'elle soient les unes en dessous des autres...

mais le code est le même, il faut le placer au bon endroit [Chesse]

[Super]

Posté par : Demolite ! Le 06-03-2008 à 16:07
OK

Merci demolite
On va essayer ca[Salut]

Posté par : Vanes Le 06-03-2008 à 18:41
La fille te dit merci ;)

Merci tout plein, ça commençait à me souler de lutter pour créer ce code moi même!
C'est sur que c'est du coup de pouce pile poil!
[Fleur]
Grâce à toi, j'ai enfin des catégories propres! Mouhahaha!
Bon, je visite le reste ça m'a l'air passionnant (encore une qui va rester vissée à son ordi 1 semaine...)
[Salut]

Posté par : WhiteRabbit Le 24-03-2008 à 06:50

Bonjour demolite et merci pour tout tes tutos.
J'aurais cependant une petite chose a te demander :d
comment est ce que je pourrais faire en sorte que mon menu ne soit pas encadré comme il l'est? j'ai fait une sorte de frise qui necessite que l'on lui ote sa bordure.

Merci

Posté par : Valnea Le 10-09-2008 à 21:21

Si tu ne renseignes pas l'adresse de ton blog, je ne peux rien pour toi...
[Nul]

Posté par : Demolite Le 10-09-2008 à 21:27

Bonjour demolite et merci pour tout tes tutos.
J'aurais cependant une petite chose a te demander :d
comment est ce que je pourrais faire en sorte que mon menu ne soit pas encadré comme il l'est? j'ai fait une sorte de frise qui necessite que l'on lui ote sa bordure.

Merci

Posté par : Valnea Le 10-09-2008 à 22:03

[Salut]
Si tu ne me donne pas l'adresse de ton blog je ne peux pas t'aider [Nul]
De quelle cadre tu parles ? [je cherche]

Posté par : Demolite Le 11-09-2008 à 08:43

J'ai trouve la bonne solution mais je te remercie quand meme... ils s'agissait des cadres qui entoure les images menant a un lien et il suffisait d'ajouter border = 0 au bon endroit.
Merci en tout cas pour tout tes bons tutos, grace a toi j'ai un blog qui me plait beaucoup !!!

Posté par : Valnea Le 13-09-2008 à 12:15

Bonjour, j'ai testé le script, mais il s'affiche en haut de ma bannière j'aurais préféré en bas c'est possible docteur ? Merci

Posté par : Jasmine Le 28-10-2008 à 16:01

Docteur ?

Posté par : Jasmine Le 06-11-2008 à 20:45
Y a t-il quelqu'un à l'autre bout ?

Hello !

Comme je sais que Demolite ne répond plus sur ce blog, peut être que quelqu'un peut répondre, malgré tout, à ma question ... J'ai sans problème placé des petites images sous ma bannière et souhaiterais quelles fassent office de liens pour "les catégories". J'ai donc copié le lien source des catégories au niveau des "archives" mais quand j'enlève les catégories initiales, mes images n'ont plus de lien du tout. Je pense que je prends une mauvaise adresse de lien. J'ai un peu la tête embrouillée et voilà deux jours que je plante complet là-dessus.
Merci beaucoup par avance de votre aide.

Posté par : Loarig Le 13-02-2009 à 11:27