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

Mise en page CSS Discussion :

Changer la taille d'une colonne pour la propriété table-cell de display


Sujet :

Tableau en CSS

  1. #1
    Membre du Club
    Homme Profil pro
    Inscrit en
    Mai 2013
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2013
    Messages : 120
    Points : 51
    Points
    51
    Par défaut Changer la taille d'une colonne pour la propriété table-cell de display
    Bonjour à tous!!

    Voila j'ai dans une div 3 label et 3 input de type texte. Chacun des label correspondent à un input. J'essaie de tous les aligner et j'ai réussi grace à la propriété table-cell de display. Mais certains input doivent être plus grand que les autres et lorsque j'en agrandi un il dépasse sur l'autre colonne du table-cell (voir image ci_jointe). Et donc j'aimerai que lorsque l'on modifie la taille d'un input la colonne du table-cell se modifie ou alors savoir comment modifier la taille de la colonne. car j'ai testé avec column-width mais sans succès. voici mon code:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <em style=" display: table-cell;column-width:150%; ">
    		<label for="designation" class="label">Désignation</label><br class="br"/>
    		<input id="designation" name="designation" type="text" style="width:150%; height :30px;" required />
    		</em>
    		<em style=" display: table-cell; table-layout: auto; ">
    		<label for="reference" class="label" style="display:inline;">Reference</label><br class="br"/>
    		<input id="reference" name="reference" type="text"  style="width:75%;" required>
    		</em>
    		<em style=" display: table-cell; ">
    		<label for="indice" class="label">Indice</label><br class="br"/>
    		<input id="indice" name="indice" type="text"  style="width:15%; ">
    		</em>

    ma class label:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .label {
    float:left;
    width:161px;
    padding:8px 0px 2px 0px;
    }
    Quelqu'un aurai-t-il une idée ? Merci d'avance pour votre aide .

    Nom : alignement.PNG
Affichages : 287
Taille : 2,8 Ko

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    commence par mettre de l'ordre dans ton code :
    • le HTML d'un coté
    • le CSS de l'autre (= pas inline)

  3. #3
    Membre du Club
    Homme Profil pro
    Inscrit en
    Mai 2013
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2013
    Messages : 120
    Points : 51
    Points
    51
    Par défaut
    Voici mon code html:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <em >
    		<label for="designation" class="label">Désignation</label><br class="br"/>
    		<input id="designation" name="designation" type="text"  required />
    		</em>
    		<em >
    		<label for="reference" class="label" >Reference</label><br class="br"/>
    		<input id="reference" name="reference" type="text" required>
    		</em>
    		<em  >
    		<label for="indice" class="label">Indice</label><br class="br"/>
    		<input id="indice" name="indice" type="text" >
    		</em>

    et le code css:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    em {
    display: table-cell;
    }
    #designation{
    width:150%; 
    height :30px;
    }
    #reference{
    width:75%;
    }
    #indice{
    width:15%;
    }
    .label {
    float:left;
    width:161px;
    padding:8px 0px 2px 0px;
    }

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    <em> n'est pas appropriée ici.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div class="mes_inputs">
      <p>
        <label for="designation" class="label">Désignation</label><br class="br"/>
        <input id="designation" name="designation" type="text"  required />
      </p>
      <p>
        <label for="reference" class="label" >Reference</label><br class="br"/>
        <input id="reference" name="reference" type="text" required>
      </p>
      <p>
        <label for="indice" class="label">Indice</label><br class="br"/>
        <input id="indice" name="indice" type="text" >
      </p>
    </div>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .mes_inputs {
      display:table;
    }
    .mes_inputs p {
      display: table-cell;
      padding-right:10px;
    }
    .mes_inputs input {
      width:100%;
    }
    .mes_inputs p:first-child {
      width:50%;
    }
    #indice{
      width:30%;
    }
    .label {
    padding:8px 0px 2px 0px;
    }

    Pour info : une taille en % est définie par rapport à son parent.

  5. #5
    Membre du Club
    Homme Profil pro
    Inscrit en
    Mai 2013
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2013
    Messages : 120
    Points : 51
    Points
    51
    Par défaut
    Ah merci beaucoup ça fonctionne parfaitement!! Par contre peut tu m'expliquer ta dernière phrase ? Car j'ai pas tout compris.
    Et si je veux augmenter de nouveau la taille de l'input designation et que les deux autres s'adapte en conséquence comment je peux faire avec se que tu m'a donné ?

    Sinon j'essaie d'appliquer le même principe a deux select car j'ai un soucis avec, en faites avec le table-cell le 2e select sors un peu de la page (voir image) donc il dois y avoir un moyen de réduire la taille des colonnes des deux select. voici mon code des deux select:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div class="mes_inputs">
    		<p>
    		<label for="annee_issu_lot1" class="label">Année issu lot</label><br class="br"/>
    		<select id="annee_issu_lot" name="annee_issu_lot" onchange="maj_num_lot(annee_issu_lot.value)" class="select">
    			<option value="">...</option>
    			<?php for ($i=2014; $i<=3000; $i++) { ?>
    				<option value="<?php echo $i; ?>"><?php echo $i; ?></option><?php
                            } ?>
    		</select>
    		</p>
    		<p>
    		<label for="num_issu_lot" class="label">Numéro issu lot</label><br class="br"/>
    		<select id="num_issu_lot" name="num_issu_lot" type="text" class="select">
    			<option value="">...</option>
    		</select>
    		</p>
    		</div>

    Encore merci pour ton aide.
    Nom : select.PNG
Affichages : 277
Taille : 2,8 Ko

  6. #6
    Invité
    Invité(e)
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .mes_inputs p:first-child {
      width:50%;
    }
    Le 1er "p" fait 50% de son parent "mes_inputs".
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #indice{
      width:30%;
    }
    l'input "#indice" fait 30% de son parent "p".

  7. #7
    Membre du Club
    Homme Profil pro
    Inscrit en
    Mai 2013
    Messages
    120
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Mai 2013
    Messages : 120
    Points : 51
    Points
    51
    Par défaut
    Ah d'accord merci, mais je n'arrive pas a vraiment changer les tailles de mon 1er input designation et du 2e input reference. Car l'input designation doit faire environ 3 fois l'input reference en longueur. Par contre celui pour l'indice est parfait.

Discussions similaires

  1. recherche dans une colonne pour changer les données
    Par cimbra55 dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 26/03/2009, 17h49
  2. Réponses: 1
    Dernier message: 29/04/2008, 17h10
  3. [Débutant] Changer le type d'une colonne
    Par david71 dans le forum MS SQL Server
    Réponses: 8
    Dernier message: 08/11/2005, 12h26
  4. [JTable] ajuster la taille d'une colonne à la taille du texte
    Par GETah dans le forum Agents de placement/Fenêtres
    Réponses: 3
    Dernier message: 24/02/2005, 12h53

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