menu de navigation

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

je peux t'assurer que des tutos, j'en lis et j'en lis

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

desatan · Message par **desatan** » 02 avr. 2009, 00:03

chinon, je veux comprendre comment on fait une feuille de style mais pas moyen. Toujours pour faire ma barre de navigation. Ton code fonctionnait mais je veux comprendre. Voici mon code :

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">
  </style>
</head>
<body
 style="height: 145px; background-image: url(images/fonds%20index.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>
<span style="text-decoration: underline;"></span><a
 href="Accueil.html"></a><br>
<div id="EnTete">
<div id="menu">
<ul>
  <li> <a class="Accueil" href="Accueil.html">Accueil</a>
  </li>
  <li> <a class="Pédagogie" href="P%E9dagogie.html">Pédagogie</a>
  </li>
  <li> <a class="Inscription" href="Inscription.html">Inscription</a>
  </li>
  <li> <a class="Nous contacter"
 href="Nous%20contacter.html">Nous contacter</a> </li>
  <li> <a class="Liens utiles"
 href="Liens%20utiles.html">Liens utiles</a> </li>
  <li> <a class="Livre d'or" href="Livre%20d%27or.html">Livre
d'or</a> </li>
</ul>
</div>
</div>
<br>
<object type="application/x-shockwave-flash"
 data="dewplayer.swf?mp3=mp3/shadow.mp3/&autostart=1&"
 height="20" width="200">
<param name="movie"
 value="dewplayer.swf?mp3=mp3/shadow.mp3/&autostart=1&"></object>
</body>
</html>

Que dois-je modifier pour mettre ma barre horizontale, là elle est vrticae ?

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
[modo]Mise en forme du code source[/modo]

Message par **Ymai** » 02 avr. 2009, 08:24

Bonjour
Tout, mais vraiment tout dans sa complète intégralité est là:
http://josar.free.fr/tutoKompozer/MenuH ... actif.html
Impossible de donner plus d'explications à moins d'accepter les redites et les paraphrases.

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** » 02 avr. 2009, 12:51

merci Ymai,

je l'ai déjà lu et rien que la première ligne pose problème :

1 - Menu horizontal
Exercice :
Télécharger et enregistrer dans notre dossier d'exercices le fichier menu.html

Je ne trouve pas le dossier d'exercie ?

Et avec le code de mon dernier message quand je clique sur cascades, je n'ai pas les balises ul ou li ?

Je dois vraiment pas être doué

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** » 02 avr. 2009, 13:17

Bonjour,

Un tutoriel ne se prend pas à la page 7 ou 8 sans avoir au moins survolé les pages précédentes.
Je te propose de prendre le temps de lire le tutoriel sus cité dans son ensemble plutôt que de vouloir le prendre à la page où semble se trouver la solution à ton problème.
Il semble à travers tes questions et le début de ta page que tu as actuellement très peu de connaissance dans la création de sites internet. Aussi, la lecture du tutoriel te permettra d'avoir au moins les bases tant dans la création d'un site que dans l'utilisation de KompoZer, au demeurant très simple.

desatan · Message par **desatan** » 02 avr. 2009, 13:27

salut,

j'ai non seulement lu le tuto en entier, d'ailleurs il est dans mes favoris et en plus je l'ai imprimé, j'ai toute les pages et la première est celle-ci :
http://josar.free.fr/tutoKompozer/premierSite1.html

Ne crois pas que je pose ces questions pour vous ennuyer mais j'ai besoin d'aide car même avec le tuto, tout n'est pas claire

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)

desatan · Message par **desatan** » 02 avr. 2009, 20:21

voici où j'en suis dans le tuto :

Code : Tout sélectionner

<ul id="navigation">
  <li> <a href="Accueil.html">Accueil</a></li>
  <li> <a href="P%E9dagogie.html">Pédagogie</a></li>
  <li> <a href="Inscription.html">Inscription</a></li>
  <li> <a href="Nous%20contacter.html">Nous
contacter</a></li>
  <li> <a href="Liens%20utiles.html">Liens utiles</a></li>
  <li> <a href="Livre%20d%27or.html">Livre d'or</a></li>
</ul>

Dans le tuto, il est écrit çà :
#menu : largeur 180px, flottant à droite avec une marge gauche de 10px pour éloigner le texte du div texte et un padding de 10px de tous côtés pour éloigner le texte intérieur des bords.

* width: 180px;
* padding: 10px;
* float: right;
* margin-left: 10px;

Bein pour moi, c'est pas claire, où je dois écrire les valeurs ?

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** » 02 avr. 2009, 22:03

Cela montre bien que tu n'as pas regardé tout le tuto

toutes ces valeurs sont à entrer dans la feuille de style créée avec l'outil CSS (la fameuse palette de couleur)
Il faut absolument que tu te familiarise avec cet outil qui fait toute la mise en forme.
Reviens en arrière dans le tuto pour avoir les explications sur cet outil.

Gagea · Message par **Gagea** » 03 avr. 2009, 09:51

Ymai a écrit :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.

Dans mon tuto j'ai fait récemment une autre page pour ce que j'ai appelé Menu graphique
http://josar.free.fr/tutoKompozer/MenuG ... actif.html
desatan : C'est vrai que le lien pour télécharger le fichier menu.html avait disparu malencontreusement

. Tu as bien fait de le dire, je l'ai remis.
J'espère que tu as pu avancer avec les conseils de Ymai et Chinon.
Fais bien les exercices et quand tu n'as plus besoin de tuto tu te lances dans ton projet. Bon courage.

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

desatan · Message par **desatan** » 03 avr. 2009, 11:16

merci, tu vois chinon, je lis bien les tutos, j'arrive même à faire avancer un peu les choses.

Je ne vois pas le fichier à télécharger, il est où ?

Encore merci pour vos réponses, je travaille dur sur la barre de menu.

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** » 03 avr. 2009, 14:02

desatan a écrit :merci, tu vois chinon, je lis bien les tutos, j'arrive même à faire avancer un peu les choses.

Soit, au bénéfice du doute

Le fichier à télécharger est: http://josar.free.fr/tutoKompozer/image ... /menu.html
Une fois cette page html ouverte dans ton navigateur, (Firefox serait d'ailleurs nettement mieux que IE 6.0

plus sécurisé, respectant les standards du web, etc...), tu l'enregistres sur ton disque dur et tu pourras ainsi l'ouvrir dans KompoZer.
Tu peux aussi travailler directement avec KompoZer en faisant fichier > ouvrir une page web... > coller le lien ci-dessus

desatan · Message par **desatan** » 04 avr. 2009, 09:28

ok merci

voici où j'en suis

Je n'arrive pas à centrer mon texte dans mes cadre pour le menu ?
Et j'aimerais qu'ils soit actif quand la souris passe dessus mais rien n'y fait.

Voici mon code :

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">
#menu li {
border: 1px solid #660000;
background: #cc0000 none repeat scroll 0% 50%;
margin-right: 30px;
padding-left: 30px;
display: inline;
list-style-type: none;
color: #ffffff;
margin-bottom: 1px;
text-align: center;
}
ul {
height: 30px;
background-color: transparent;
text-align: center;
}
  </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>
<ul id="menu">
  <li><a href="Accueil.html">Accueil</a> </li>
  <li><a href="Pedagogie.html">Pedagogie</a> </li>
  <li><a href="Inscription.html">Insciption</a>
  </li>
  <li><a href="Nous%20contacter.html">Nous contacter</a>
  </li>
  <li><a href="Liens%20utiles.html">Liens utiles</a></li>
  <li><a href="Livre%20d%27or.html">Livre d'or</a></li>
</ul>
<object type="application/x-shockwave-flash"
 data="dewplayer.swf?mp3=mp3/shadow.mp3/&autostart=1&"
 height="20" width="200">
<param name="movie"
 value="dewplayer.swf?mp3=mp3/shadow.mp3/&autostart=1&"></object>
</body>
</html>

Merci de m'aider s'il vous plaît

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

[modo]Mise en forme du code. Serait-il possible de réduire la taille de l'image?[/modo]
[modo] image réduite par un modo de passage. merci de le faire toi-même à l'avenir

[modo]

Message par **Ymai** » 04 avr. 2009, 12:18

Pour le centrage, j'ai repris textuellement le code CSS disponible à la page
http://josar.free.fr/tutoKompozer/MenuH ... actif.html
et c'est immédiat.
Je suis donc plutôt confiant sur le reste du tuto. Le lien ne sera pas "actif" au passage de la souris. Un lien est actif au clic de souris.
Par contre, on obtient un effet au passage de souris en utilisant la pseudo classe ":hover".
Je ne vais pas copier/coller le tuto ici. Trop la flemme.

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** » 04 avr. 2009, 13:04

bon je pense que je vous agace avec mes questions et je vois que vous ne voulait pas m'aider d'avantage. Pourtant je suis le tuto mais ca marche pas.
Peut être n'est il pas assez détaillé.

Je remets mon code si quelqu'un veut m'aider un peu plus :

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">
#menu li {
  border: 1px solid red;
  list-style-type: none;
  float: left;
  margin-right: 5px;
  margin-left: 5px;
  text-align: center;
  width: 150px;
}
#menu li a {
  border-left: 5px solid #cc0000;
  background-color: white;
  color: #cc0000;
  padding-left: 5px;
}
#menu ul {
  padding-left: 0px;
}
#menu a {
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  padding: 10px;
  float: right;
  width: 180px;
  margin-left: 10px;
  background-color: #ff9900;
  background-position: right top;
  background-repeat: no-repeat;
  color: white;
  text-decoration: none;
  display: block;
}
#menu a:visited {
  font-weight: bold;
  color: #006600;
  text-decoration: none;
}
a:visited {
}

  </style>
</head>
<body
 style="background-image: url(images/fonds%20accueil.jpg); height: 140px;">
<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<br>
</span></span></big></big></big></big></big></big></div>
<br>
<ul id="menu">
  <li><a href="Accueil.html">Accueil</a> </li>
  <li><a href="Pedagogie.html">Pedagogie</a> </li>
  <li><a href="Inscription.html">Insciption</a>
  </li>
  <li><a href="Nous%20contacter.html">Nous contacter</a>
  </li>
  <li><a href="Liens%20utiles.html">Liens utiles</a></li>
  <li><a href="Livre%20d%27or.html">Livre d'or</a></li>
</ul>
<br>
<br>
<br>
<p></p>
<object type="application/x-shockwave-flash"
 data="dewplayer.swf?mp3=mp3/shadow.mp3/&autostart=1&"
 height="20" width="200"><param name="movie"
 value="dewplayer.swf?mp3=mp3/shadow.mp3/&autostart=1&"></object>
</body>
</html>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8
[modo]Nouvelle mise en forme du code[/modo]

Message par **Ymai** » 04 avr. 2009, 13:14

desatan a écrit :bon je pense que je vous agace avec mes questions et je vois que vous ne voulait pas m'aider d'avantage. Pourtant je suis le tuto mais ca marche pas.
Peut être n'est il pas assez détaillé.

Plus détaillé, tu meurs.
Voilà la même page dont je n'ai changé que le code CSS issu du tuto. Copié/collé bête et brutal.

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">
#menu ul {
padding-left: 0;
}
#menu li {
border: 1px solid #cc0000;
text-align: center;
float: left;
width: 100px;
margin-right: 5px;
margin-left: 5px;
list-style-type: none;
}
#menu a:visited {
color: #99ff99;
font-weight: bold;
text-decoration: none;
}
#menu a {
color: white;
font-weight: bold;
text-decoration: none;
background-color: #663333;
display: block;
}
#menu a:hover {
color: #000099;
background-color: #ffcccc;
} </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><ul id="menu"><li><a
 href="Accueil.html">Accueil</a>
</li><li><a href="Pedagogie.html">Pedagogie</a>
</li><li><a href="Inscription.html">Insciption</a>
</li><li><a href="Nous%20contacter.html">Nous
contacter</a>
</li><li><a href="Liens%20utiles.html">Liens
utiles</a></li>
<li><a href="Livre%20d%27or.html">Livre d'or</a></li>
</ul><object type="application/x-shockwave-flash"
 data="dewplayer.swf?mp3=mp3/shadow.mp3/&autostart=1&"
 height="20" width="200"><param name="movie"
 value="dewplayer.swf?mp3=mp3/shadow.mp3/&autostart=1&"></object></body></html>

Les liens sont corrects et les "boutons" sont actifs au passage de la souris.
Que demande le peuple?

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

Geckozone

menu de navigation

Qui est en ligne ?