28172 sujets

CSS et mise en forme, CSS3

Bonjour

débutant en PHP et en CSS j'ai fait une premiere petite appli qui permet lorsqu'on cherche un nom de domaine de trouver les mots de la langue francaise se terminant par l'extension qu'on souhaiterait afin de faire un jeu de mot...

ex: je veux une extension en .be (belgique) et j'aurai comme resultat bebe et je pourrais eventuellement acheter le nom de domaine "be.be".

bref, l'affichage des resultats s'affiche séquentiellement les mots les uns en dessous des autres.

Or je souhaiterai faire en sorte que les resultats s'affichent sur plusieurs colonnes avec un maximum de 10 réponses par colonne.

Or je ne sais pas comment faire en CSS pour réaliser ca.

vous pouvez checker mon appli sur http://postwan.com/vue/

Merci
Salut l'amis!

Pour ma part je code sa sous Php et je met le morceau de css dans mon HTML au lieu d'une feuille annexe

De toute fâçon cela ne changera pas même si un jour tu change la déco, donc sa sépare juste la décoration (feuille annexe), de la mise en forme (intégrer HTML)

Au pire vois des include si tu as peur de mettre du CSS dans ton HTML


Tout cela marche bien entendu sou php, voir JavaScript si tu est partant, mais je sais pas si tu gère...
je comprends pas ta reponse... Smiley decu

ma question n'est pas où je dois coder mon CSS car en effet c'est en externe et que je relie sur l'HTML avec link mais ce que je veux savoir c'est comment creer des colonnes en CSS

thks l'ami Smiley cligne
Je viens de tilter!!!

Je pense pas que ce soit possible^^
Un formulaire est très cadrer du fait des non voyants...
De plus cela ferais un énorme menu déroulant...

Regarde ceci: poser la souris deux seconde sur cours.
http://www.siteduzero.com/

Si c'est sa que tu veut il fraudais le faire avec des div. Mais en formulaire pour ma part je pense sa impossible.
Modifié par sanoc (01 Jul 2011 - 19:54)
Le plus simple pour toi est d'entourer chaque tiers de ta liste de mots par des div et d'appliquer un style à ces derniers en leur donnant une largeur et la propriété float.

Si tu veux 3 colonnes de largeur identique et occupant toute la largeur de ton conteneur tu peux simplement leur donner une largeur de 33%.

Par exemple :

.tri_column {
width: 33%;
float: left;
}
Tout cela sur son optgroup???
J'ai du mal a croire cela, mais bon j'attendrais de voir le résultat Smiley cligne

Réflexion a part:

--> width:33%;
J'imagine que sa ce fait par rapport a la taille du optgroup
donc 33% sa va déjà faire mince
Encore plus quand il aura 4-5 colonne
Bonsoir,

s'il est possible de compter les éléments affichés par le script php, à chaque multiple de 10 il est possible de créer une division.
Au passage une liste avec des li serait plus logique que des /br
Il faut aussi voir le nombre de colonnes pour que l'affichage reste lisible (3?)

Des ul en float left width 30 % text-align center contenant chacune 10 li me sembleraistconvenir


En css3 voir http://ie7nomore.com/fun/columns/ (css3 multiple column layout)


Petit conseil... je garderais les valeurs saisies en mémoire lors du rechargement de la page (au moins le choix du nombre de lettres...)
A la base mikiko demande comment afficher les résultats sur 3 colonnes. Donc ça n'a rien à voir avec un formulaire, un select ou un optgroup. C'est une simple liste de mots à afficher dans des colonnes.

a écrit :

bref, l'affichage des resultats s'affiche séquentiellement les mots les uns en dessous des autres.

Or je souhaiterai faire en sorte que les resultats s'affichent sur plusieurs colonnes avec un maximum de 10 réponses par colonne.


Et en passant, un petit conseil amical : calme toi avant de te mettre tout les membres du forum à dos. Tes dernières publications n'apportent vraiment rien de bon.
Modifié par jb_gfx (01 Jul 2011 - 20:52)
Oula, je crois que cette fois j'ai enfin compris xD
Il me faut décidément un bon tour de chauffe

Du coups l'idée de Pascal31 me parait correct, même si tu aller sur la même lancer.
Penser a enlever les puce et alinéa pour un rendu propre cependant.

(Je ne voyais pas ce qu'il voulais afficher, donc vraiment HS désoler xD)

@jb_gfx

Il n'y avait rien de méchant, il faut arrêter de dramatiser...
J'ai même pris le temps de te mettre un smileys au vue de ta signature...
Et j'ai fait ma remarque de width histoire de comprendre comment tu aller faire car malgré que je n'y croyait pas, je trouver sa utile d'apprendre ta technique si tu y arriver.

Concernant l'autre post assez agaçant, il/elle a commencer a attaquer en prenant tout d'un air accabler de reproche. Je lui est expliquer en détail, m'en suis excuser un minimum et lui est dit au-revoir proprement.

Ne serait-il pas possible de ne pas tout prendre méchamment et d'avancer un peu.
(J'en profite pour te dire merci pour le lien, j'ai pas encore eux l'occasion!, je l'essayerai demain je pense)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Module de Recherche de Noms de Domaine</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
* {
			margin					: 0;
			border					: none;
			padding					: 0;
}

html {
			overflow				: hidden;
}

body {
			background-color		: maroon;
			width					: 100%;
			height					: 100%;
}

h1 {
			text-align				: center;
			margin-bottom			: 25px;
}

/*------------------------------------------------------*/
/*     Le Formulaire                                    */
/*------------------------------------------------------*/

#form {
			text-align				: center;
			margin					: 0 auto;

			border-bottom			: 3px double white;
}

#form div {
			background-color		: skyblue;
			float					: left;
			display					: block;
			margin					: 8px;
			padding					: 0 10px 10px 10px;

			width					: 200px;
}

#form div+div+div+div+div+div {
			background-color		: magenta;
}

#form div p {
			margin					: 0;
			color					: red;
}

#form div select {
			border					: 1px solid black;
}

#form div select option {
			color					: red;
}

#form input {
			font-size				: 24px;
			font-weight				: bold;
			text-align				: center;

			border					: 3px double blue;
			border-radius			: 50px;

			margin					: 25px auto;
			width					: 300px;
			height					: 50px;
}

/*------------------------------------------------------*/
/*     Récapitulation des sélections                    */
/*------------------------------------------------------*/

#recap {
			clear					: both;
			margin					: 25px 0;
			text-align				: center;
			width					: 100%;
}

#recap p {
			color					: white;
			width					: 49.9%;
			float					: left;
}

/*------------------------------------------------------*/
/*     Liste Alphabétique                               */
/*------------------------------------------------------*/

#alpha {
			clear					: both;
			padding					: 25px;
			width					: 100%;
			text-align				: center;
}

#alpha a {
			margin-right			: 25px;

}

/*------------------------------------------------------*/
/*     Le Conteneur multicolonne                        */
/*------------------------------------------------------*/

#conteneur {
			width					: 90%;
			margin					: 0 auto;
			background-color		: white;
			text-align				: center;

			column-count			: 7;
			column-width			: auto;
			column-gap				: 1em;
			column-rule				: 1px solid black;  

			-ms-column-count		: 7;
			-ms-column-width		: auto;
			-ms-column-gap			: 1em;
			-ms-column-rule			: 1px solid black;  

			-moz-column-count		: 7;
			-moz-column-width		: auto;
			-moz-column-gap			: 1em;
			-moz-column-rule		: 1px solid black;  

			-webkit-column-count	: 7;
			-webkit-column-width	: auto;
			-webkit-column-gap		: 1em;
			-webkit-column-rule		: 1px solid black;  
}
</style>

<script language="javascript" type="text/javascript">
window.onload = function ()
{
	insertion();

	var tab = ["a", "g", "t", "y"];
	
	cacher(tab);
};

/*=====================================================*/
/*     Cacher les Lettres de la Liste Alphabétique     */
/*=====================================================*/

function cacher(liste)
{
	var node = document.getElementById("alpha").getElementsByTagName("a");

	/*--------------------------------------------------*/
	/*     Toutes les Lettres redeviennent visibles     */
	/*--------------------------------------------------*/

	for (var i=0; i<liste.length; i++)
	{
		node.item(i).style.visibility = "visible";
	}
	
	/*-----------------------------------------------*/
	/*     On masque les Lettres de la Sélection     */
	/*-----------------------------------------------*/

	for (var i=0; i<liste.length; i++)
	{
		for (var j=0; j<node.length; j++)
		{
			if (node.item(j).innerHTML.toUpperCase() == liste[i].toUpperCase())
					node.item(j).style.visibility = "hidden";
		}
	}
}

/*==============================================================*/
/*     insertion d'une nouvelle option dans la boite select     */
/*==============================================================*/

function addOption(selectbox, text, value )
{
	var optn = document.createElement("OPTION");

	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}

/*===================================================*/
/*     liste des insertions dans la boite select     */
/*===================================================*/

function insertion()
{
	/*-------------------------------*/
	/*     Extensions Génériques     */
	/*-------------------------------*/

	var s1 = document.getElementById("extensionGen");

	addOption(s1, "aero",    "aero");
	addOption(s1, "biz",     "biz");
	addOption(s1, "com",     "com");
	addOption(s1, "info",    "info");
	addOption(s1, "mobi",    "mobi");
	addOption(s1, "name",    "name");
	addOption(s1, "net",     "net");
	addOption(s1, "org",     "org");
	addOption(s1, "pro",     "pro");
	addOption(s1, "tel",     "tel");
	addOption(s1, "travel",  "travel");
	
	/*----------------------------------*/
	/*     Extensions Zone Amérique     */
	/*----------------------------------*/

	var s2 = document.getElementById("extensionAm");

	addOption(s2, "ag",      "ag");
	addOption(s2, "ar",      "ar");
	addOption(s2, "bo",      "bo");
	addOption(s2, "bz",      "bz");
	addOption(s2, "ca",      "ca");
	addOption(s2, "cc",      "cc");
	addOption(s2, "co",      "co");
	addOption(s2, "co.ve",   "co.ve");
	addOption(s2, "ec",      "ec");	
	addOption(s2, "com.ar",  "com.ar");
	addOption(s2, "com.br",  "hn");
	addOption(s2, "com.do",  "com.do");
	addOption(s2, "com.jm",  "com.jm");
	addOption(s2, "com.pa",  "com.pa");
	addOption(s2, "com.uy",  "hn");
	addOption(s2, "gd",      "gd");
	addOption(s2, "gf",      "gf");
	addOption(s2, "gl",      "cl");
	addOption(s2, "gp",      "gp");
	addOption(s2, "gs",      "gs");
	addOption(s2, "gy",      "gy");
	addOption(s2, "hn",      "hn");
	addOption(s2, "ht",      "ht");
	addOption(s2, "la",      "la");
	addOption(s2, "lc",      "lc");
	addOption(s2, "ms",      "ms");
	addOption(s2, "mx",      "mx");
	addOption(s2, "pe",      "pe");
	addOption(s2, "us",      "us");
	addOption(s2, "us.com",  "us.com");
	addOption(s2, "us.org",  "us.org");
	addOption(s2, "tc",      "tc");
	addOption(s2, "vc",      "vc");
	addOption(s2, "vg",      "vg");

	/*--------------------------------*/
	/*     Extensions Zone Europe     */
	/*--------------------------------*/

	var s3 = document.getElementById("extensionEu");

	addOption(s3, "at",      "at");
	addOption(s3, "be",      "be");
	addOption(s3, "by",      "by");
	addOption(s3, "cat",     "cat");
	addOption(s3, "ch",      "ch");
	addOption(s3, "co.at",   "co.at");
	addOption(s3, "co.no",   "co.no");
	addOption(s3, "co.uk",   "co.uk");
	addOption(s3, "com.hu",  "com.hu");
	addOption(s3, "com.pt",  "com.pt");
	addOption(s3, "cz",      "cz");
	addOption(s3, "de",      "de");
	addOption(s3, "de.com",  "de.com");
	addOption(s3, "dk",      "dk");
	addOption(s3, "es",      "es");
	addOption(s3, "eu",      "eu");
	addOption(s3, "eu.com",  "eu.com");
	addOption(s3, "fi",      "fi");
	addOption(s3, "fo",      "fo");
	addOption(s3, "fr",      "fr");
	addOption(s3, "gb.com",  "gb.com");
	addOption(s3, "gb.net",  "gb.net");
	addOption(s3, "gr",      "gr");
	addOption(s3, "gr.com",  "gr.com");
	addOption(s3, "hu",      "hu");
	addOption(s3, "im",      "im");
	addOption(s3, "is",      "is");
	addOption(s3, "it",      "it");
	addOption(s3, "li",      "li");
	addOption(s3, "lt",      "lt");
	addOption(s3, "lu",      "lu");
	addOption(s3, "lv",      "lv");
	addOption(s3, "md",      "md");
	addOption(s3, "mc",      "mc");
	addOption(s3, "me",      "me");
	addOption(s3, "me.uk",   "me.uk");
	addOption(s3, "nl",      "nl");
	addOption(s3, "no.com",  "no.com");
	addOption(s3, "nom.es",  "nom.es");
	addOption(s3, "nu",      "nu");
	addOption(s3, "org.es",  "org.es");
	addOption(s3, "org.uk",  "org.uk");
	addOption(s3, "pl",      "pl");
	addOption(s3, "pt",      "pt");
	addOption(s3, "ro",      "ro");
	addOption(s3, "ru",      "ru");
	addOption(s3, "ru.com",  "ru.com");
	addOption(s3, "se",      "se");
	addOption(s3, "se.com",  "se.com");
	addOption(s3, "se.net",  "se.net");
	addOption(s3, "si",      "si");
	addOption(s3, "sk",      "sk");
	addOption(s3, "uk.com",  "uk.com");
	addOption(s3, "uk.net",  "uk.net");

	/*---------------------------------*/
	/*     Extensions Asie/Océanie     */
	/*---------------------------------*/

	var s4 = document.getElementById("extensionAs");

	addOption(s4, "asia",   "asia");
	addOption(s4, "ae",     "ae");
	addOption(s4, "ae.org", "ae.org");
	addOption(s4, "af",     "af");
	addOption(s4, "am",     "am");
	addOption(s4, "be",     "be");
	addOption(s4, "cn",     "cn");
	addOption(s4, "co.il",  "co.il");
	addOption(s4, "cx",     "cx");
	addOption(s4, "fm",     "fm");
	addOption(s4, "hk",     "hk");
	addOption(s4, "in",     "in");
	addOption(s4, "io",     "io");
	addOption(s4, "ir",     "ir");
	addOption(s4, "jo",     "jo");
	addOption(s4, "jp",     "jp");
	addOption(s4, "ki",     "ki");
	addOption(s4, "kr",     "kr");
	addOption(s4, "mn",     "mn");
	addOption(s4, "nf",     "nf");
	addOption(s4, "ph",     "ph");
	addOption(s4, "pk",     "pk");
	addOption(s4, "sa.com", "sa.com");
	addOption(s4, "sb",     "sb");
	addOption(s4, "sg",     "sg");
	addOption(s4, "tk",     "tk");
	addOption(s4, "tl",     "tl");
	addOption(s4, "tv",     "tv");
	addOption(s4, "tw",     "tw");
	addOption(s4, "uz",     "uz");
	addOption(s4, "ws",     "ws");
	addOption(s4, "vn",     "vn");

	/*----------------------------*/
	/*     Extensions Afrique     */
	/*----------------------------*/

	var s5 = document.getElementById("extensionAf");

	addOption(s5, "ac",     "ac");
	addOption(s5, "co.za",  "co.za");
	addOption(s5, "com.ug", "com.ug");
	addOption(s5, "cm",     "cm");
	addOption(s5, "ly",     "ly");
	addOption(s5, "mu",     "mu");
	addOption(s5, "re",     "re");
	addOption(s5, "sc",     "sc");
	addOption(s5, "sh",     "sh");
	addOption(s5, "so",     "so");
	addOption(s5, "st",     "st");

	/*---------------------------*/
	/*     Nombre de Lettres     */
	/*---------------------------*/

	var s6 = document.getElementById("nb_lettres");

	addOption(s6, "3", "3 et plus");
	addOption(s6, "4", "4 et plus");
	addOption(s6, "5", "5 et plus");
	addOption(s6, "6", "6 et plus");
	addOption(s6, "7", "7 et plus");
	addOption(s6, "8", "8 et plus");
}

</script>
</head>


<body>
<h1>Recherche d'id&eacute;es pour des noms de domaine !</h1>

<!-- ------------------------------------------------------------------- -->
<!-- les différents menus déroulants permettant de choisir les extension -->
<!-- ------------------------------------------------------------------- -->

<form id="form" action="../controleur/annuaire.php" method="POST">
	<div>
		<p>Extensions génériques</p>
		<select id="extensionGen">
			<option value="">-- Choisissez ---</option>
		</select>
	</div>

	<div>
		<p>Extensions Zone Amérique</p>
		<select id="extensionAm">
			<option value="">-- Choisissez ---</option> 
		</select>
	</div>

	<div>
		<p>Extensions Zone Europe</p>
		<select id="extensionEu">
			<option value="">-- Choisissez ---</option> 
		</select>
	</div>

	<div>
		<p>Extensions Zone Asie/Océanie</p>
		<select id="extensionAs">
			<option value="">-- Choisissez ---</option>
		</select>
	</div>

	<div>
		<p>Extensions Zone Afrique</p>
		<select id="extensionAf">
			<option value="">-- Choisissez ---</option>
		</select>
	</div>

	<div>
		<p>Nombre de Lettres</p>
		<select id="nb_lettres">
			<option value="">-- Choisissez ---</option>
		</select>
	</div>

	<input type="submit" value="Validez vos choix" name="ok" />
</form>	

<!-- ---------------------------- -->
<!-- Récapitulatif des Sélections -->
<!-- ---------------------------- -->
	
<div id="recap">
	<p>Extension : <span>us</span></p>
	<p>Nombre de lettres : <span>3 et plus</span></p>
</div>

<!-- ------------------- -->
<!-- Liste Alphabétique  -->
<!-- ------------------- -->

<div id="alpha">
	<a href="index.php?page=A">A</a>
	<a href="index.php?page=B">B</a>
	<a href="index.php?page=C">C</a>
	<a href="index.php?page=D">D</a>
	<a href="index.php?page=E">E</a>
	<a href="index.php?page=F">F</a>
	<a href="index.php?page=G">G</a>
	<a href="index.php?page=H">H</a>
	<a href="index.php?page=I">I</a>
	<a href="index.php?page=J">J</a>
	<a href="index.php?page=K">K</a>
	<a href="index.php?page=L">L</a>
	<a href="index.php?page=M">M</a>
	<a href="index.php?page=N">N</a>
	<a href="index.php?page=O">O</a>
	<a href="index.php?page=P">P</a>
	<a href="index.php?page=Q">Q</a>
	<a href="index.php?page=R">R</a>
	<a href="index.php?page=S">S</a>
	<a href="index.php?page=T">T</a>
	<a href="index.php?page=U">U</a>
	<a href="index.php?page=V">V</a>
	<a href="index.php?page=W">W</a>
	<a href="index.php?page=X">X</a>
	<a href="index.php?page=Y">Y</a>
	<a href="index.php?page=Z">Z</a>
</div>

<!-- -------------------------- -->
<!-- le Conteneur des résultats -->
<!-- -------------------------- -->

<div id="conteneur">
abattus<br />
absolus<br />
absous<br />
abstenus<br />
abstrus<br />
abus<br />
acajous<br />
acarus<br />
accourus<br />
accrus<br />
accus<br />
acinus<br />
advenus<br />
aigus<br />
airbus<br />
altocumulus<br />
amadous<br />
ambigus<br />
amphioxus<br />
andalous<br />
angélus<br />
anus<br />
aperçus<br />
apparus<br />
ardus<br />
argus<br />
asparagus<br />
assidus<br />
attendus<br />
au-dessous<br />
au-dessus<br />
aurez-vous<br />
auriez-vous<br />
aurions-nous
</div>
</body>
</html>


@+[/i]
Bonjour

oulala je ne savais que je lèverai autant de polémique en posant ma question...

bref je veux uniquement avancer Smiley cligne

artemus24 : merci pour la solution mais je n'ai pas tout compris (voire pas du tout)

ce que tu proposes est à mettre comment?
tu fais fi de mon code php n'est ce pas?

j'ai mis en ligne ton code mais regarde ce que ca donne, ca marche pas...

moi je voulais juste quelque chose dans le style:
upload/38609-mockup.png


Merci
Modifié par mikiko (04 Jul 2011 - 16:24)
Bonjour Mikkio,

Le code qui est en ligne n'est pas celui que je t'ai fourni. C'est pour cela qu'il ne fonctionne pas correctement. D'abord tu as changé le doctype, ensuite tu as un <script> ouvert qui n'est pas refermé et qui imbrique un autre <script> qui lui est fermé. Et enfin le "Styles.css" qui est en ligne n'est pas celui que je t'ai communiqué. Et je n'ai regardé que le début du code en ligne et pas la suite !

Tu prends le code html, celui que je t'ai fourni ci-dessus, tel qu'il est sans le modifier. Ensuite tu le places dans un fichier .txt que tu sauvegardes et tu le renommes en .html. Et enfin tu cliques sur ce fichier .html.

Tu regardes le résultat de l'exécution de ce HTML et ensuite après avoir constaté que cela fonctionne alors OUI tu peux te permettre de le modifier. Mais ne commence pas à modifier ce code HTML pour dire ensuite que rien ne fonctionne.

Commence par faire cela et je t'expliquerai ce code HTML+CSS et le javascript que j'ai placé à l'intérieur.

Le JavaScript n'a, en aucune façon, court-circuité ton PHP.

@+
@Artemus24

ben en fait n'ayant pas compris ta reponse, j'ai donc pris ton code et oui je l'ai mis comme il se doit dans mon code ...

je ne vois pas de quel balise ouverte non fermée et le style css etait bien celui que tu m'as donné mais dans un link...

j'ai mis ton code sans rien touché en ligne
http://postwan.com/vue/index.html

il y a tout plein de warning et le truc est un peu bizarre
pourquoi je ne vois aucune des extensions?

peux tu m'expliquer ton code merci en tout cas car c'est à peu pres ce que je veux...

merci
Bonjour mikiko,

tu l'as reçu mon message privés ?

Constatation : le problème vient des caractères avec accents ! Je ne comprends pas du tout mais lorsque tu as recopié le code, il (????) a mal configuré les caractères avec accents ! Pourtant chez moi, je n'ai pas ce genre de problème ?

Je travaille avec notepad++ qui est configuré en ISO-8859-1, d'ailleurs comme la balise <meta> en haut du code HTML.

Donc la solution est de corriger cela dans ton éditeur en choisissant le bon code des caractères. Sous notepad++ tu vas dans la barre des menus : "encodage" puis "codage de caractères" puis "langues d'europe occidentale" puis tu sélectionnes "iso-8859-1". Et en principe cela fonctionnera normalement. Le test est de voir apparaitre le caractère accentué et non pas un "Récapitulation des sélections" au lieu de "Récapitulation des sélections".

Et en principe tout fonctionnera normalement !

Explication : pour le multicolonnage, tu trouveras la solution dans la propriété CSS .conteneur que je te redonne ci-dessous. Je n'ai pas pu le tester sur MSIE 9.0 car je suis en Windows XP PRO et comme tu dois le savoir l'Internet Explorer s'arrête, pour une question commerciale, à la version 8.0.

/*------------------------------------------------------*/ 
/*     Le Conteneur multicolonne                        */ 
/*------------------------------------------------------*/ 
 
#conteneur { 
            width                    : 90%; 
            margin                    : 0 auto; 
            background-color        : white; 
            text-align                : center; 
 
            column-count            : 7; 
            column-width            : auto; 
            column-gap                : 1em; 
            column-rule                : 1px solid black;   
 
            -ms-column-count        : 7; 
            -ms-column-width        : auto; 
            -ms-column-gap            : 1em; 
            -ms-column-rule            : 1px solid black;   
 
            -moz-column-count        : 7; 
            -moz-column-width        : auto; 
            -moz-column-gap            : 1em; 
            -moz-column-rule        : 1px solid black;   
 
            -webkit-column-count    : 7; 
            -webkit-column-width    : auto; 
            -webkit-column-gap        : 1em; 
            -webkit-column-rule        : 1px solid black;   
} 

Pour le JavaScript, j'ai fait deux fonctions pour charger, dans la partie option de la balise <select> tous les choix que tu désires mettre en ligne.

La première fonction addOption charge une occurrence dans la balise <select> correspondant à l'ID que tu auras choisi.

La deuxième fonction insertion donne la liste de toutes les occurrences que tu désires mettre en tant qu'option dans la balise <select>

Pour la liste alphabétique, j'ai fait en sorte d'occulter le caractère que tu ne désires pas voir afficher. Voici le code JavaScript :
window.onload = function () 
{ 
    insertion(); 
 
    var tab = ["a", "g", "t", "y"]; 
     
    cacher(tab); 
}; 
 
/*=====================================================*/ 
/*     Cacher les Lettres de la Liste Alphabétique     */ 
/*=====================================================*/ 
 
function cacher(liste) 
{ 
    var node = document.getElementById("alpha").getElementsByTagName("a"); 
 
    /*--------------------------------------------------*/ 
    /*     Toutes les Lettres redeviennent visibles     */ 
    /*--------------------------------------------------*/ 
 
    for (var i=0; i<liste.length; i++) 
    { 
        node.item(i).style.visibility = "visible"; 
    } 
     
    /*-----------------------------------------------*/ 
    /*     On masque les Lettres de la Sélection     */ 
    /*-----------------------------------------------*/ 
 
    for (var i=0; i<liste.length; i++) 
    { 
        for (var j=0; j<node.length; j++) 
        { 
            if (node.item(j).innerHTML.toUpperCase() == liste.toUpperCase()) 
                    node.item(j).style.visibility = "hidden"; 
        } 
    } 
}

Le tableau "tab" donne la liste des caractères à cacher. La fonction cacher se passe en deux temps. Le premier temps, il rend la visibilité pour chaque lettre au cas où celle-ci aurait été occulté.

Dans un second temps, vis-à-vis des lettres qui se trouvent dans le tableau "tab", ils seront cachées. Mais comme j'ai utilisé la propriété "visibility", l'emplacement de la lettre reste présente mais invisible.

@+
Modifié par Artemus24 (04 Jul 2011 - 20:00)