menu de navigation

desatan · Message par **desatan** » 30 mars 2009, 21:16

Bonsoir,

Je suis entrain de m'arracher les cheveux pour faire une barre de navigation.

Aujourd'hui, je sais créer des boutons, par exemple, accueil, galerie photo ...
J'ai réussi à mettre mes liens, j'ai réussi à mettre une image par bouton.

Ce que je souhaite, c'est faire une seule barre avec un fond identique et venir mettre dedans des boutons avec des images personnalisées.

Si quelqu'un peut m'aider ,

Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Message par **Ymai** » 30 mars 2009, 22:07

Bonjour
Il me semble que la seule chose qui manque à http://josar.free.fr/tutoKompozer/MenuH ... actif.html pour répondre à la question est l'insertion d'une (ou plusieurs) image de fond à chaque bouton. Mais après avoir suivi le tuto, ce n'est plus un grand secret. Sans doute une image de fond pour
#menu a
et une autre pour
#menu a:hover
Et c'est belote.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.8) Gecko/2009032711 Ubuntu/8.04 (hardy) Firefox/3.0.8

desatan · Message par **desatan** » 31 mars 2009, 07:56

ok merci,
j'ai pas trop compris le tuto mais je vais le relire.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Message par **chinon37** » 31 mars 2009, 08:15

Bonjour,

J'ai légèrement repris ton code (ci dessous) pour affiner le menu et permettre ainsi de le formater.
Les liens ont été passés en éléments de liste. Ensuite, avec une feuille de style, j'ai passé cette liste "en ligne" pour avoir les liens sur une seule ligne.
Une couleur de fond a été appliquée à l'ensemble de la liste (balise <ul>)
Tu peux copier ce code dans KompoZer pour voir le résultat.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>


  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>La marelle de Champigny</title><style type="text/css">
li {
  border-left: 2px solid #3366ff;
  margin-right: 30px;
  padding-left: 30px;
  display: inline;
  list-style-type: none;
  border-right-width: 2px;
  border-right-color: #3366ff;
}
ul {
  background-color: silver;
  height: 30px;
}

</style></head><body style="background-image: url(images/fonds%20accueil.jpg);">
<div style="text-align: center;"><big><big><big><big><big><big><span style="font-family: Book Antiqua;"><span style="color: rgb(64, 88, 185);">L</span><span style="color: rgb(221, 37, 0);">A</span> <span style="color: rgb(237, 209, 0);">M</span><span style="color: rgb(89, 187, 0);">A</span><span style="color: rgb(221, 37, 0);">R</span><span style="color: rgb(64, 88, 185);">E</span><span style="color: rgb(221, 37, 0);">L</span><span style="color: rgb(237, 209, 0);">L</span><span style="color: rgb(89, 187, 0);">E</span></span></big></big></big></big></big></big></div>

<br>

<br>

<br>

<br>

<br>

<br>

<ul>
  <li><a href="acccueil.html">accueil</a> </li>
  <li><a href="Liens%20pratique.html">Liens
pratique</a> </li>
  <li><a href="Galerie%20photos.html">Galerie photos</a> </li>
  <li><a href="Livre%20d%27or.html">Livre d'or</a> </li>
  <li><a href="Nous%20contacter.html">Nous contacter</a></li>
</ul>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="dewplayer" align="middle" height="20" width="200"><param name="wmode" value="transparent"><param name="allowScriptAccess" value="sameDomain"><param name="movie" value="dewplayer.swf?mp3=mp3/&autostart=1&randomplay=1"><param name="quality" value="high"><param name="bgcolor" value="#">
<embed src="dewplayer.swf?mp3=mp3/&autostart=1&randomplay=1" quality="high" bgcolor="#" name="dewplayer" wmode="transparent" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="20" width="200"></object></body></html>

Pour voir comment est faite la feuille de style, tu cliques sur l'outil "palette de peintre"

Message par **Ymai** » 31 mars 2009, 08:43

desatan a écrit :ok merci,
j'ai pas trop compris le tuto mais je vais le relire.

Son clone, alors?
http://info.sio2.be/kpz/4/index.php
Avec prise par la main

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.8) Gecko/2009032711 Ubuntu/8.04 (hardy) Firefox/3.0.8

desatan · Message par **desatan** » 31 mars 2009, 14:02

merci à vous deux pour vos réponses.
je teste tout çà ce soir.

Autre question, si je veux pouvoir naviguer d'une page à l'autre, je fais un copie/coller du code de ma barre de navigation sur chaque feuille ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Message par **chinon37** » 31 mars 2009, 14:10

Pour avoir le même menu sur toutes les pages:
oui, tu peux faire un copié-collé
Sinon, tu utilises la méthode du tuto: http://josar.free.fr/tutoKompozer/MenuM ... nclus.html
Plus complexe au départ, cette méthode permet une mise à jour rapide de toutes les pages pendant la vie du site.
Mais ce sera pour quand tu seras grand

... en html et css

desatan · Message par **desatan** » 31 mars 2009, 19:48

a quoi ressemble la palette de peintre ?
Désolé pour mes questions stupides

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Message par **chinon37** » 31 mars 2009, 20:03

à ça:

desatan · Message par **desatan** » 31 mars 2009, 21:37

mdr ok merci j'ai bien vu là.

Dans ton code, comment je peux réduire la taille du fond ,

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Message par **chinon37** » 01 avr. 2009, 08:53

Si c'est de la taille du fond du menu dont tu parles, il suffit, dans l'éditeur css (palette de couleur

) de sélectionner à gauche la balise ul et de mettre une taille à largeur dans l'onglet boite.

desatan · Message par **desatan** » 01 avr. 2009, 10:08

ok merci.

Dis mois, j'avais avec toshop, créer un petit fond sympa pour ma barre de navigation, est-ce possible sur kompozer de personnaliser le fond de la barre avec une création toshop ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Message par **chinon37** » 01 avr. 2009, 10:32

oui, toujours avec l'outil css > onglet fond > image

desatan · Message par **desatan** » 01 avr. 2009, 13:06

si je la veut tout en haut de la page la barre de navigation, comment je fais ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8

Message par **chinon37** » 01 avr. 2009, 20:40

Tu lis les tutos plutôt qu'attendre qu'on te mâche le travail

On veut bien aider, mais la 1ere devise est: "aide-toi, le ciel t'aidera!"
Dépanner, c'est une chose, tout faire à ta place en est une autre

Geckozone

menu de navigation

menu de navigation

Qui est en ligne ?