[CSS] SELECT capricieux :(

Fermé
zanimal - 31 mai 2008 à 12:16
Brachior Messages postés 613 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 22 juin 2009 - 31 mai 2008 à 13:58
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

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 613 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 22 juin 2009 46
31 mai 2008 à 13:58
de rien ^^ revient pour modifier l'etat de ton post ;)
0
Brachior Messages postés 613 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 22 juin 2009 46
31 mai 2008 à 12:39
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
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 613 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 22 juin 2009 46 > zanimal
31 mai 2008 à 13:12
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 613 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 22 juin 2009
31 mai 2008 à 13:26
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