[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 :)

2 réponses

zanimal
 
Bien merci pour ton aide, j'ai une nouvelle idée de structure qui me semble moins buguée, bye.
0
Brachior Messages postés 616 Statut Membre 46
 
de rien ^^ revient pour modifier l'etat de ton post ;)
0
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
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
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
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