[CSS] SELECT capricieux :(

zanimal -  
Brachior Messages postés 616 Statut Membre -
Bonjour,

Je n'ai pas un grand niveau css et je bloque sur quelque chose de simple et logique.

J'ai un texte aligné a gauche qui tiens sur une ligne. A sa droite un select aligné à droite.
Juste en dessous je veux faire la meme chose. Mon texte se mets bien à la ligne mais mon select est centré comme si celui du dessus le boquais. J'ai esseyé de jouer avec les margin bottom, margin-top, rien n'y fait.
J'ai esseyé des div et des span, tout... il veux pas s'aligner sous l'autre select :(

<form>
<div class="txtarea" align="center"><textarea name='msg' rows=20 COLS=35 id=source></textarea></div>
<span class="texta1"><strong>Le message sera reçu au minimum : </strong></span>
<span class="choice1"><select name="start">
<option value="choix1">option1
<option value="choix2">option2
<option value="choix3">option3
<option value="choix4">option4
<option value="choix5">option5
<option value="choix6">option6
</select></span>
<span class="texta2"><strong>Et au maximum : </strong></span>
<span class="choice2"><select name="stop">
<option value="choix22">option21
<option value="choix23">option22
<option value="choix24">option23
<option value="choix25">option24
<option value="choix26">option25
<option value="choix26">option26
</select></span>
<div class="send" align="center"><input type='submit'></div>
</form>


Le CSS :
.txtarea{
padding-top: 70px ;
 float: center;
 }
 textarea{
 background:none;
 }
 
.choice1{
margin-top: 100px ;
margin-bottom:20px;
background-color: blue;
margin-right: 20px;
 float: right;
 }
 
 .texta1{
 margin-top: 100px ;
 margin-bottom:20px;
 background-color: green;
 margin-left: 20px;
 float: left;
 }
 
 .choice2{
 margin-top: 20px ;
background-color: blue;
margin-right: 20px;
 float: right;
 }
 .texta2{
  margin-top: 20px ;
 background-color: green;
 margin-left: 20px;
 float: left;
 }
 
 .send{
 margin-top: 200px ;
 background-color: red;
 float: center;
 }


Si vous pouvez m'aider ce serait super :)
Configuration: Firefox 3.0

2 réponses

  1. zanimal
     
    Bien merci pour ton aide, j'ai une nouvelle idée de structure qui me semble moins buguée, bye.
    0
    1. Brachior Messages postés 616 Statut Membre 46
       
      de rien ^^ revient pour modifier l'etat de ton post ;)
      0
  2. Brachior Messages postés 616 Statut Membre 46
     
    j'vois pas trop c'que tu veux faire Oo
    j'ai repris ton code et je me retrouve avec une sorte de pyramide Oo
    où ton minimum se retrouve apres ton maximum Oo
    -1
    1. zanimal
       
      merci de ton aide,

      C'est surement parce que je n'ai donné que la partie du code problematique

      actuellement j'ai :

      mon textarea centré
      en dessous aligné a gauche un texte et aligné a droite mon menu deroulant.
      en dessous un autre texte toujours aligné a gauche avec un menu deroulant qui devrait etre en dessous de l'autre, aligné a droite.
      or, je ne sais pourquoi, il est centré.

      Si tu ne peux pas m'aider comme ca je posterais le code complet.
      0
      1. Brachior Messages postés 616 Statut Membre 46 > zanimal
         
        en fait ..
        t'es span st en position relative
        dc c'est normal que ton select soit bloqué par l'autre

        tu as dc plusieurs solution ( ou du moins moi j'en vois 2 ^^ )

        soit tu passe en position:absolute; a la place de tes floats
        mais alors question redimenssionnement de la fenetre c'est assez galere

        soit tu places tes selects ds un div et tes textes ds un autre div
        et tu les modifies via le css
        0
      2. zanimal > Brachior Messages postés 616 Statut Membre
         
        Oui la 1ere solution ne me plait pas beaucoup.
        La deuxieme c'est la premiere chose que j'avais faite, mais que je mette div ou span ca ne change rien du tout.

        Je viens d'esseyer de mettre le select dans une div, elle meme dans la div texte. Résultat l'alignement se fait impécablement mais un nouveau problème : Je ne suis plus en face du texte, il me saute une ligne.
        J'ai alors esseyé :

        select{float: top-right;}

        Ca ne change rien. Pfffff ca m'enerve un peu d'etre bloqué sur un truc simple comme ça. Je suis pas sorti de l'auberge :S
        0