Liste déroulante affichage en horizontale

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

Répondre
Projettuteure

Liste déroulante affichage en horizontale

Message par Projettuteure »

Bonjour !

Je suis une débutante dans l'utilisation d'Nvu. J'ai cherché dans le forum s'il n'y avait pas de topic concernant mon problème, mais je n'ai pas trouvé de réponse.
Je cherche à faire une liste déroulante sous forme de menu horizontale. J'aimerais donc mettre ces listes les unes à côté des autres, mais ça e fonctionne pas comme je le souhaite. Elle ne s'affiche que verticalement, voici le code :

Code : Tout sélectionner

 <body style="background-color: rgb(5, 7, 5); color: rgb(0, 0, 0);"
 link="#0000ee" alink="#ee0000" vlink="#551a8b">
<form>
  <div style="background-color: rgb(5, 7, 5);">
  <select name="page"
 onchange="window.location.replace(this.options[page.selectedIndex].value)">
  <option value="">Air du Temps</option>
  <option
 value="at presentation et photos.html#at_presentation_et_photos">Presentation
et photos</option>
  <option value="at videos.html#at_videos">Vid&eacute;os</option>
  <option value="at sons.html#at_sons">Sons</option>
  <option value="at cv.html#at_cv">CV</option>
  <option value="at contacts.html#at_contacts">Contacts</option>
  </select>
  </div>
</form>
<form>
  <div style="background-color: rgb(5, 7, 5);">
  <select name="page"
 onchange="window.location.replace(this.options[page.selectedIndex].value)">
  <option value="">Duo</option>
  <option
 value="duo presentation et photos.html#at_presentation_et_photos">Pr&eacute;sentation
et photos</option>
  <option value="duo videos.html#duo_videos">Vid&eacute;os</option>
  <option value="duo sons.html#duo_sons">Sons</option>
  <option value="duo cv.html#duo_cv">CV</option>
  <option value="duo contacts.html#duo_contacts">Contacts</option>
  </select>
  </div>
</form>
<form>
  <div style="background-color: rgb(5, 7, 5);">
  <select name="page"
 onchange="window.location.replace(this.options[page.selectedIndex].value)">
  <option value="">Les jeux &agrave; l'ancienne</option>
  <option
 value="ja presentation et photos.html#ja_presentation_et_photos">Pr&eacute;sentation
et photos</option>
  <option value="ja cv.html#ja_cv">CV</option>
  <option value="ja contacts.html#ja_contacts">Contacts</option>
  </select>
  </div>
</form>
<form>
  <div style="background-color: rgb(5, 7, 5);">
  <select name="page"
 onchange="window.location.replace(this.options[page.selectedIndex].value)">
  <option value="">Ateliers p&eacute;dagogiques</option>
  <option
 value="ap presentation et photos.html#ap_presentation_et_photos">Pr&eacute;sentation
et photos</option>
  <option value="ap cv.html#ap_cv">CV</option>
  <option value="ap contacts.html#ap_contacts">Contacts</option>
  </select>
  </div>
</form>
</body>
</html>
Sinon, j'arrive à les mettre les unes à côté des autres sans soucis, mais alors quand je clique sur un des liens de la liste déroulante celà ne s'affiche pas... Voilà le code :

Code : Tout sélectionner

<select name="Rubrique" onchange="Choix(this.form)">
<option>-Qui sommes-nous ?-</option>
<option>Pr&eacute;sentation</option>
<option>CV</option>
<option>Partenaires</option>
</select>
<select name="Page">
<option>-D&eacute;cors-</option>
<option>Spectacles</option>
<option>Festivals</option>
<option>Ev&egrave;nements</option>
<option>Jardins &eacute;ph&eacute;m&egrave;res</option>
<option>Fiches objets sc&eacute;nographiques</option>
</select>
<select name="Page">
<option>-Spectacles-</option>
<option>Air du Temps</option>
<option>Duo</option>
<option>Jeux &agrave; l&rsquo;ancienne</option>
<option>Ateliers p&eacute;dagogiques</option>
</select>
<select name="Page">
<option>-Ev&egrave;nements-</option>
<option>FestiBal Gutemberg</option>
<option>F&ecirc;te de la musique</option>
<option>Bals</option>
</select>
<select name="Page">
<option>-Projet-</option>
<option>Machines musicales</option>
</select>
<select name="Page">
<option>-Liens-</option>
</select>
</body>
</html>
Pouvez-vous m'aider s'il vous plait ?
Je ne 'y connais vraiment pas en codage de site internet...

Merci beaucoup

[modo]Mise en forme des portions de code[/modo]
Haut
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Re: Liste déroulante affichage en horizontale

Message par Ymai »

Bonjour itou
Projettuteure a écrit : Je suis une débutante dans l'utilisation d'Nvu.
Sans doute la dernière survivante d'une espèce disparue. Plus personne n'utilise NVU*. :wink:
Je cherche à faire une liste déroulante sous forme de menu horizontale. J'aimerais donc mettre ces listes les unes à côté des autres,
Je dirais que la solution paraît bien simple avec un soupçon de CSS.
Si chacune des listes "select" est définie avec une "class" qui lui impose un flottement à gauche, par exemple, tout rendre dans l'ordre.
Les blocs "div" qui encadrent les "select" ne servent à rien; je les ai supprimées.
A chaque liste "select", j'ai attaché la "class" nommée "coteAcote".
Dans la feuille de style interne (ce serait mieux externe, mais bon...), j'ai dit que chaque élément avec une "class" nommée "coteAcote" devait être flottant à gauche.
Le code final pour la page est le suivant:

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>test</title>
<style type="text/css">
.coteAcote {
float: left;
}

</style>
</head>
<body>
<form>
<select name="page" class="coteAcote"
onchange="window.location.replace(this.options[page.selectedIndex].value)">
<option value="">Air du Temps</option>
<option
value="at presentation et photos.html#at_presentation_et_photos">Presentation
et photos</option>
<option value="at videos.html#at_videos">Vidéos</option>
<option value="at sons.html#at_sons">Sons</option>
<option value="at cv.html#at_cv">CV</option>
<option value="at contacts.html#at_contacts">Contacts</option>
</select>
</form>
<form>
<select name="page" class="coteAcote"
onchange="window.location.replace(this.options[page.selectedIndex].value)">
<option value="">Duo</option>
<option
value="duo presentation et photos.html#at_presentation_et_photos">Présentation
et photos</option>
<option value="duo videos.html#duo_videos">Vidéos</option>
<option value="duo sons.html#duo_sons">Sons</option>
<option value="duo cv.html#duo_cv">CV</option>
<option value="duo contacts.html#duo_contacts">Contacts</option>
</select>
</form>
<form>
<select name="page" class="coteAcote"
onchange="window.location.replace(this.options[page.selectedIndex].value)">
<option value="">Les jeux à l'ancienne</option>
<option
value="ja presentation et photos.html#ja_presentation_et_photos">Présentation
et photos</option>
<option value="ja cv.html#ja_cv">CV</option>
<option value="ja contacts.html#ja_contacts">Contacts</option>
</select>
</form>
<form>
<select name="page" class="coteAcote"
onchange="window.location.replace(this.options[page.selectedIndex].value)">
<option value="">Ateliers pédagogiques</option>
<option
value="ap presentation et photos.html#ap_presentation_et_photos">Présentation
et photos</option>
<option value="ap cv.html#ap_cv">CV</option>
<option value="ap contacts.html#ap_contacts">Contacts</option>
</select>
</form>
</body>
</html>
Je ne 'y connais vraiment pas en codage de site internet...
C'est exactement la situation dans laquelle se trouvaient tous ceux qui fréquentent assidument ce forum, avant de s'y mettre...
Il serait audacieux de croire que cette connaissance s'acquiert spontanément rien qu'en regardant tendrement dans les yeux son éditeur HTML favori. Mais l'effort à consentir est généralement vite récompensé.

* plus personne n'utilise NVU depuis plusieurs années; ce logiciel n'est absolument plus maintenu par son auteur qui est passé à tout autre chose.
De très nombreux bugs laissés en suspens ont été corrigés par KompoZer.
Les lecteurs les plus attentifs du forum auront remarqué une petite résurgence récente de NVU, mais accidentelle et à propos de laquelle nous attendons encore des informations.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Haut
Projettuteure

Re: Liste déroulante affichage en horizontale

Message par Projettuteure »

Je sais que j'ai du retard, mais merci quand même pour ces informations le problème est résolu !!

Oui effectivement, il se trouve que je ne m'y connais vraiment pas du tout en logiciel de site web non plus..

Enfin quoi qu'il en soit, merci !
Haut
Répondre

Revenir à « Kompozer et Nvu »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités