Insérer une image dans ma liste déroulante en html !!!

Bonsoir,

J'utilise Dreamweaver 2 ( gratuit ) et je voudrais insérer une image dans ma liste déroulante en html !

j'ai pris cette exemple d'écriture :

<select name="pays" style="width="215px" direction="down multiple size"10"">
<option value="img src="plage.jpg" width="150" height="90"">
<option value="">Espagne
<option value="">Italie
</select>

Mais il y a un problème ( il semble que la balise " option " ne prend pas les images )! :

Merci beaucoup

Salut,

Jacquot a écrit :
Mais il y a un problème ( il semble que la balise " option " ne prend pas les images )!

Eh bien non... je te le confirme.

Salut Jacquot,

En effet, comme l'a mentionné Heyoan ce n'est pas possible dans une liste déroulante. Toutefois, tu peux faire un menu déroulant à base de javascript ou de flash (pas taper, pas taper) pour remédier à ton soucis.

Sinon, je te conseille d'écrire des balises fermantes pour ta liste déroulante :

<select name="pays" multiple="multiple" size="10">
	<option value="fr">France</option>
	<option value="es">Espagne</option>
	<option value="it">Italie</option>
</select>

Tu remarqueras que j'ai corrigé également tes erreurs sur les attributs de ton select .

++
Modifié par Nolem (25 Feb 2009 - 20:34)

Pour répondre à mon véritable problème, j'ai créé ce site chez IFrance :

http://j-barbe.ifrance.com/

Mais, celui-ci certes gratuit est long à s'afficher et depuis quelques jours pose problème en bas de page ( aujourd'hui nous sommes le.....) qui ne devrait pas se positionné ainsi et caché d'autres éléments ( la bonne page en principe apparaît en cliquant sur "Accueil" qui doit laisser apparaître de la pub ( qui devrait venir en 1er lieu ) !!!

De fait, j'ai eu envie d'exporter mes fichiers chez Orange pour créer un site chez eux !!

Mais là ! Problème ( j'avais du html du php et du css ) et mes pages ne s'adaptaient plus à la demande d'orange ( fichiers tout en html)!!

j'ai donc décidé de refaire ce site dans la même présentation avec Dreamweaver 2 ( gratuit )

mais la partie " des idées de visite " ( liste déroulante ) de mon site me pose des difficultés que je n'avais pas en html et css :

#auto{
position: absolute;
left: 650px;
top:20px;
width: 260px;
height: 600px;
overflow: auto;
background-color: rgb(255,214,193); /* Une couleur de fond pour le corps */
text-align: justify;
color: black;
font-size: 12px;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
padding-left: 5px;
padding-right: 5px;
}

Merci de vos réponses et excusez-moi d'être si long !

Dreamweaver 2, c'est une antiquité; si tu veux faire une site un peu plus "moderne" sans tes tableaux bien lourds et pas compatibles avec les crawlers, tu peux le faire avec du open:
genre: Komposer , ex-nvu à http://sourceforge.net/project/downloading.php?groupname=kompozer&filename=kompozer-0.7.10-win32.zip&use_mirror=ovh ou autres.
Une autre possibilité pour héberger gratos ton site c'est hostarea.org à http://fbses.hostarea.org/accueil.html qui te permet d'intégrer php si tu en as l'utilité.
Bon courage

Dreamweaver 2? Sur Windows 95?

La méthode propore est
1. d'assigner des identifiants, class ou id, à chaque ligne d'option.
2. à partir du fichier CSS, définir le style (l'image) à assigner à chacun:

option {
min-height: 12px /* hauteur de l'image */
padding-left: 16px; /* un peu plus large que l'image */
background-color: transparent;
background-repeat: no-repeat;
background-position: left center;
}
option.icone1 {
background-image: url(../image/icone1.gif);
}
option.icone2 {
background-image: url(../image/icone2.gif);
}[code]

smartdub a écrit :
La méthode propore est
1. d'assigner des identifiants, class ou id, à chaque ligne d'option.
2. à partir du fichier CSS, définir le style (l'image) à assigner à chacun:

option {
min-height: 12px /* hauteur de l'image */
padding-left: 16px; /* un peu plus large que l'image */
background-color: transparent;
background-repeat: no-repeat;
background-position: left center;
}
option.icone1 {
background-image: url(../image/icone1.gif);
}
option.icone2 {
background-image: url(../image/icone2.gif);
}[code]

Salut smartdub et bienvenue sur le forum,

Je me permets de te signaler que cette méthode n'est pas du tout propre (j'avais pensé à cette éventuel possibilité). Est ce que les images sont de type contenu ou de mise en forme ? Si c'est de type contenu, où peut on mettre le texte de remplacement par soucis d'accessibilité ?

++

ps : Attention aux règles du forum
Modifié par Nolem (03 Mar 2009 - 22:31)

smartdub a écrit :
La méthode propore est
1. d'assigner des identifiants, class ou id, à chaque ligne d'option.
2. à partir du fichier CSS, définir le style (l'image) à assigner à chacun:

option {
min-height: 12px /* hauteur de l'image */
padding-left: 16px; /* un peu plus large que l'image */
background-color: transparent;
background-repeat: no-repeat;
background-position: left center;
}
option.icone1 {
background-image: url(../image/icone1.gif);
}
option.icone2 {
background-image: url(../image/icone2.gif);
}[code]

Merci de votre réponse mais il faut avoir recours au fichier CSS pour définir : Class & id !

Ce que je ne veux pas (tout en HTML)!

Je ne comprend pas que l'on puisse faire une liste déroulante qu'avec un fichier CSS !!

Il doit y avoir un autre moyen !

Merci !

Nolem a écrit :
Je me permets de te signaler que cette méthode n'est pas du tout propre (j'avais pensé à cette éventuel possibilité). Est ce que les images sont de type contenu ou de mise en forme ? Si c'est de type contenu, où peut on mettre le texte de remplacement par soucis d'accessibilité ?

En soit c'est la plus élégante (il n'y a pas d'histoire de propreté dans cette méthode). Elle ne sera cependant pas fonctionnelle partout (tout le monde connait les limites de personnalisation des éléments de formulaire et les différences des navigateurs à ce sujet).

En ce qui concerne ces images, en effet, la question suivante se pose : "Sont-elles porteuses de sens ?". On ne connait pas trop le contexte pour ce sujet mais l'exemple donné semble indiqué qu'il s'agit d'afficher le drapeau à côté de chaque pays (je divague peut être) donc non porteuses de sens (le nom du pays prend le relai).

Dans le cas inverse, il s'agira à ne pas douter d'une grave erreur de conception.

Jacquot a écrit :
Merci de votre réponse mais il faut avoir recours au fichier CSS pour définir : Class & id !

Ce que je ne veux pas (tout en HTML)!

Je ne comprend pas que l'on puisse faire une liste déroulante qu'avec un fichier CSS !!

Il doit y avoir un autre moyen !

Merci !

Il nous faut plus d'information sur le contexte. Comme dit ci-dessus soit il s'agit d'un cas simple de personnalisation (donc recours aux CSS) soit il va falloir (re-)réfléchir à la chose. Pas d'autre issue de secours.

Salut,

yodaswii a écrit :

...
En ce qui concerne ces images, en effet, la question suivante se pose : "Sont-elles porteuses de sens ?". On ne connait pas trop le contexte pour ce sujet mais l'exemple donné semble indiqué qu'il s'agit d'afficher le drapeau à côté de chaque pays (je divague peut être) donc non porteuses de sens (le nom du pays prend le relai).

Je pense que cela tombe sous le sens. Ce sont des images de contenu. Dans le cas où l'on supprime le select pour en faire un menu (ul - li), il est indéniable que ce soit du contenu. Dans le cas où le css est supprimé ou remplacé ou ..., le menu est accessible.

Jacquot a écrit :

...
Ce que je ne veux pas (tout en HTML)!
...
Il doit y avoir un autre moyen !
...

Je ne vois pas où est vraiment le problème. Pour ton information, le html permet d'afficher le contenu et le CSS permet de mettre en forme. Si tu adoptes cette solution qui me parait peu élégante, tu peux mettre ta css en interne :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" >
   <head>
       <title>CSS dans le head</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <style type="text/css">
           /* code CSS ici */
       </style>
   </head>
   <body>
       <!-- contenu de la page -->
   </body>
</html>

Sinon, comme cité plus haut, tu as la solution de faire ton menu en javascript ou en flash (accessibilité = 0).

++
Modifié par Nolem (07 Mar 2009 - 22:26)