Adapter un extranet à la résolution des écrans

[lodan]

Bonjour,

J'ai un extranet dont la définition est faite pour une certaine résolution d'écran.

J'ai une administration qui veut utiliser cet extranet mais leur résolution est différente (moins fine). Du coup les label et champ input se chevauchent.

Mon code html simplifié

Code :

1
2
<label >Opération </label>
<input type="text" name="operation_nom" id="operation_nom" size="40" />

Mon code CSS correspondant

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
label{
	float: left;
	width: 31%;
	text-align: right;
	margin-right: 0.5em;
	padding: 0.5em 0 0;
	line-height: 6px;
}
input
{
	border: 1px solid #40411E;
        font-weight: normal;
	margin-left: 0.5em;
}

Dois-je rechercher en javascript la résolution de l'écran sur lequel l'extranet est utilisé et ensuite avoir autant de CSS que de définition ou y a-t-il plus simple ?

Merci de votre aide

[bob633]

Je rajouterais un position:relative; au css du label, j'enlèverais que float:left que je passerais dans le css du input avec un position:relative;

Ensuite définis une largeur pour ton input aussi.

L'intérêt de passer par le JS pour la résolution n'est pas justifié ici. Ca l'est lorsque tu affiche des images que tu veux pas déformer (donc tu choisis ta résolution et affiche la bonne image).

[lodan]

Merci pour cette réponse.

Pour la largeur du champ INPUT c'est plus compliquée. Elle varie d'un champ à l'autre. Une date, un montant, un pourcentage, un code, un libellé ou une adresse ne sont de même dimension.

[bob633]

J'avais pas fait gaffe que tu mettais seulement un code simplifié.

Pourrais-tu faire une capture de ce que tu appelles chevaucher ? Car quand c'est trop long, généralement ca fait un retour ligne, donc je vois pas trop.

En attendant, met tes input dans un id, et c'est cet id où tu mets une taille width. De ce fait peut importe la taille de ton input ... Par contre attention que tes champs input soient pas non plus trop long, de façon que ca passe sur une résolution minimum (1024x768 j'imagine à l'heure actuelle).

Une solution certainement moins propre, mais qui m'a éviter de nombres heures de galère quand je débutais, c'est tout mettre dans un tableau. Ainsi :

Code :

1
2
3
4
5
6
7
<table>
   <tr>
       <td><label>labla</label></td>
       <td><input .... /></td>
   </tr>
      // ainsi de suite
</table>