[Réglé] description et select attaché

description et select attaché [Réglé] - HTML/CSS - Programmation

Marsh Posté le 27-06-2008 à 13:37:22    

Bonjour, je crée un listing avec des select pour personnaliser le listing et a chaque résolution ou redimensionnement je me retrouve avec une description à droite et le select en bas à gauche :/ Je sais plus quoi faire.
 
http://nzbfactory.free.fr/0.jpg
 
résolution inferieur:
http://nzbfactory.free.fr/1.jpg
 
bout de code:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.         <title>
  7.             New document
  8.         </title>
  9.     </head>
  10.     <body>
  11.         <div id="optionfiltre" style="text-align:left;margin: 5px 2px 5px 2px;line-height:22px;">
  12.             <input type="submit" value="Actualiser"> <a href="#" onclick="javascript:showorhide('optionfiltre', 'actualiser', 'non');return false;"><strong>Cacher Options</strong></a> &nbsp;Langue:&nbsp;<select name="lang">
  14.                 <option value="fr">
  15.                     Français
  16.                 </option>
  17.                 <option value="en">
  18.                     English
  19.                 </option>
  20.             </select>&nbsp;Bot:&nbsp;<select name="bot">
  21.                 <option value="oui">
  22.                     Oui
  23.                 </option>
  25.                 <option value="non" selected="selected">
  26.                     Non
  27.                 </option>
  28.             </select>&nbsp;Mod:&nbsp;<select name="mod">
  29.                 <option value="all">
  30.                     Tous
  31.                 </option>
  32.                 <option value="oui">
  33.                     Activé
  34.                 </option>
  36.                 <option value="non" selected="selected">
  37.                     Désactivé
  38.                 </option>
  39.             </select>&nbsp;Type:&nbsp;<select name="type">
  40.                 <option value="all">
  41.                     Tous
  42.                 </option>
  43.             </select>&nbsp;Punkbuster:&nbsp;<select name="punkbuster">
  44.                 <option value="all">
  46.                     Tous
  47.                 </option>
  48.                 <option value="oui" selected="selected">
  49.                     Activé
  50.                 </option>
  51.                 <option value="non">
  52.                     Désactivé
  53.                 </option>
  54.             </select>&nbsp;Pays:&nbsp;<select name="country">
  55.                 <option value="all">
  57.                     Tous
  58.                 </option>
  59.                 <option value="FR" selected="selected">
  60.                     France
  61.                 </option>
  62.             </select>&nbsp;Nb par page:&nbsp;<select name="page">
  63.                 <option value="25">
  64.                     25
  65.                 </option>
  66.             </select><br>
  68.         </div>
  69.     </body>
  70. </html>


 
Merci de votre aide.


Message édité par ouiouioui10 le 30-06-2008 à 17:37:06
Reply

Marsh Posté le 27-06-2008 à 13:37:22   

Reply

Marsh Posté le 27-06-2008 à 14:43:53    

Si je peux me permettre, c'est juste illisible, quel que soit la définition d'écran.
Mais sinon, pour bien faire je mettrais chaque élément du form dans un block.
Et n'oublie les balises <form> et <label>
http://www.alistapart.com/articles [...] ccessible/
http://www.alistapart.com/articles [...] sibleforms


Message édité par David Boring le 27-06-2008 à 14:45:20
Reply

Marsh Posté le 27-06-2008 à 16:03:59    

form y est la j'ai collé juste ce qui pose problème, que ce soit court, j'ai vidé les select.

 

j'ai lu tes liens, si je les met tous à la ligne ma page va doubler de taille sa obligera à descendre à chaque page.

 

une fois les éléments fixe ensemble je verrai si je peux améliorer la lisibilité

 

merci quand même.


Message édité par ouiouioui10 le 27-06-2008 à 16:06:39
Reply

Marsh Posté le 28-06-2008 à 01:57:06    

deja tes textes devraient etre dans des <label>ensuite chaque groupe label/select dans un span avec en css white-space:nowrap (et tu peux virer les &nbsp; qui servent a rien)

 

edit:
exemple

Code :
  1. <span class="nowrap">
  2.     <label for="lang">Langue:&nbsp;</label>
  3.     <select id="lang">blabla[...]
  4. </span>
 

et en css

Code :
  1. .nowrap {white-space:nowrap;}


Message édité par mIRROR le 28-06-2008 à 02:01:59

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 30-06-2008 à 17:36:36    

J'ai corrigé, c'est parfait.
label for j'avoue c'est la 1ère fois que j'y pense sa sera automatique désormais.
 
merci pour cette réponse complète.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed