Discussion :

[miniBob]

Bonjour à tous,

j'ai un peu de mal avec le CSS en ce moment, j'essaie de faire une page d'inscription structurée de cette façon la :
-

Comme vous pouvez le voir le input texte pour le pseudo ne reste pas dans sa div.
Je n'arrive vraiment pas à le faire rester où il faut ^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div id="field-pseudonyme">  
   <div class="block100">
      <label for="pseudonyme">Pseudonyme (obligatoire)</label>
      <input type="text" onblur="verifPseudo();" name="pseudo" id="pseudo"/><img id="pseudoenter" width="16" height="16" alt="Attention" src="/html/images/icone/error.png"/>
   </div> 
</div>

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
19
20
21
22
23
24
25
26
27
28
29
30
31
 
div#field-pseudonyme, div#field-email, div#field-password, div#field-name, div#field-adresse, div#field-country, div#field-perso  { 
    background: #f0f; 
    width: 574px;
    height: 22px; 
    margin: 0px auto 18px auto;
    background: #F0F0F0;    
  }  
 
  .block100 { 
    float: left; 
    width: 100%; 
    height: 100%;
  }
 
  .block100 input { 
    padding-left: 26px;
    background: url(../images/layout/bg-input-name-contact.png);
    height: 22px;
    width: 224px;
    border-width: 1px;
    border-color: #808080;
    border-style: dashed;
    color: #000000;
    font-size: 12px;
    font-family: "Arial";
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
  }

Voilà, si vous arriviez à m'aider je vous en serez grandement reconnaissant :p

[devyan]

Bonjour,

• Pour qu'il reste sur la même ligne que son label il faudrait enlever le BR
• Pour que le DIV s'agrandisse pour "contenir" l'élément INPUT il faudrait enlever la déclaration CSS "height:100%" du DIV.

devyan

EDIT : complément de réponse...

[miniBob]

Merci devyan pour ta réponse.
Je suis arrivé à faire ce que je voulais du coup