IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Adapter un extranet à la résolution des écrans


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé Avatar de lodan
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    2 064
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 064
    Par défaut Adapter un extranet à la résolution des écrans
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <label >Opération </label>
    <input type="text" name="operation_nom" id="operation_nom" size="40" />
    Mon code CSS correspondant

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Membre Expert
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Octobre 2008
    Messages
    1 051
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Octobre 2008
    Messages : 1 051
    Par défaut
    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).

  3. #3
    Membre éprouvé Avatar de lodan
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    2 064
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 064
    Par défaut
    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.

  4. #4
    Membre Expert
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Octobre 2008
    Messages
    1 051
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Octobre 2008
    Messages : 1 051
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <table>
       <tr>
           <td><label>labla</label></td>
           <td><input .... /></td>
       </tr>
          // ainsi de suite
    </table>

Discussions similaires

  1. Réponses: 14
    Dernier message: 24/11/2023, 20h24
  2. Adapter mon site à la résolution d'écran
    Par oshigamie dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 20/06/2014, 21h27
  3. [Débutant] Adapter une Form à la résolution d'écran
    Par jeremyvb11 dans le forum VB.NET
    Réponses: 8
    Dernier message: 22/05/2012, 19h05
  4. Réponses: 20
    Dernier message: 16/08/2006, 15h32
  5. Obtenir la résolution d'écran des utilisateurs ?
    Par piff62 dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 23/04/2006, 00h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo