[CSS 3] Formulaire et alignement [Résolu]

fazpedro · 19/07/2011, 13h33

Bonjour,
je me prends la tête à aligner mon <label> à droite et qu'il puisse ainsi se coler à la gauche de l'input et du select... mais je n'y arrive pas ...

malgré la relecture de la documentation....! le <label> reste à gauche...

où est mon erreur (de débutant...) ?
Merci de votre aide.

mon code :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<title>MON SITE</title>
<style type="text/css">
#mainContent {
width : 90%;
font-size : 100%;
float : left;
font-family : Georgia, Arial, Helvetica, sans-serif;
text-align : left;
}
form  {
	width: 90%;
	margin: 0%
}
form * {
	font: 90% Verdana, Arial, Helvetica, sans-serif;
}
form p  {
	clear: both;
	margin: 0%;
}
form label {
	position: relative;
	text-align: right;
}
fieldset {
	float: left;
	padding : 1%;
	margin-bottom : 1%;
	width : 90%;
}
legend {
color : #a0522d;
font-size : 90%;
font-family : Arial Black, Helvetica, sans-serif;
background : #edd;
}
input[type="submit"], input[type="reset"] {
font-weight : bold;
cursor : pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover {
background-color : white;
}
input[type="submit"]:active, input[type="reset"]:active {
background-color : #a6bede;
color : black;
}
input {
	position: relative;
	float: right;
	background-color : #a9b8de;
	border-top : none;
	font-family : Georgia, "Times New Roman", Times, serif;
	color : #202020;
}
select {
	position: relative;
	float: right;
	background-color : #a9b8de;
	border-top : none;
	font-family : Georgia, "Times New Roman", Times, serif;
	color : #202020;
}
</style>
</head>
<body>
<div id="mainContent">
<form method="post" action="">
<p />
<br />
<fieldset>
<legend> &nbsp; Annoncer un &eacute;v&egrave;nement sur une journ&eacute;e &nbsp; </legend>
<label>Tarif &nbsp; : &nbsp; </label>
<select name="tarif" tabindex="1" class="ev">
<option value="Gratuit"> Gratuit </option>
<option value="Payant"> Payant </option>
</select>
<br />
<br />
<label>Montant &nbsp; : &nbsp; </label>
<input type="text" tabindex="2" name="montant" class="ev" />
<br />
<br />
<label>Nom du lieu &nbsp; : &nbsp; </label>
<input type="text" tabindex="3" name="lieu3" class="ev" />
<br />
<br />
</fieldset>
<p>
<input type="submit" tabindex="4" value="Envoyer" />
<input type="reset" tabindex="5" value="Tout effacer" />
</p>
</form>
</div>
</body>
</html>

Elwyn · 19/07/2011, 16h09

Rajoute display: block;
J'ai testé, ça fonctionne

fazpedro · 19/07/2011, 17h45

Désolé Elwyn mais çela ne fonctionne pas,

j'ai essayé à plusieurs endroits du code mais aucun ne fonctionne ?

par exemple si je le mets là :

Code :

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

1
2
3
form label {
	display: block;
....

le <label> se retrouve carrément à droite mais au-dessus de l'input ou du select...

alors que je souhaite qu'il soit juste à gauche de l'input ou du select
Merci.

Elwyn · 20/07/2011, 16h24

Je l'avais compris comme cela.
Essaye ça :

Code :

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

1
2
3
4
5
6
form label {
 
	text-align: right;
	display: inline-block;
	width: 80%;
}

Candygirl · 20/07/2011, 21h05

Hello,

Citation:

Envoyé par fazpedro

form label {
text-align: right;
}

La propriété text-align n'a d'influence que sur les éléments de type block. Tu dois donc l'appliquer à un ancêtre, genre le fieldset:

Code :

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

1
2
3
fieldset {
	text-align: right;
}

fazpedro · 21/07/2011, 14h02

Merci Candygirl

Code :

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

fieldset {text-align: right;}

fonctionne bien !

une dernière question :

dans mon formulaire complet : Avec Firefox, le texte "Partie réservée aux inscrits...." se retrouve bien en-dessous de mon formulaire...

par contre avec internet explorer (version 7) : le texte se retrouve à droite du formulaire

Merci de votre aide.

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div id="mainContent">
<br />
<fieldset>
<legend> &nbsp; Message simple &nbsp; : &nbsp; </legend>
<form name="formulaire" action="contact_simple.php" method="post">
<br />
<label for="mail">Votre E-Mail &nbsp; : &nbsp;</label>
<input type="text" tabindex="1" name="mail" value="<? echo $mail_affiche; ?>" onfocus="this.className='ev_focus';" onblur="this.className='ev';valide(this, 'err_id');" class="ev" /><span id="err_id" style="color:red"></span>
<br />
<label for="nom">Nom &nbsp; : &nbsp;</label> 
<input type="text" tabindex="2" name="nom" value="<? echo $nom_affiche; ?>" onfocus="this.className='ev_focus';" onblur="this.className='ev';valide(this, 'err_id');" class="ev" /><span id="err_id" style="color:red"></span>
<br />
<label for="message">Message &nbsp; : &nbsp</label>
<textarea type="text" name="message" class="ev" tabindex="3" onfocus="this.className='textarea_focus';" 
onblur="this.className='textarea';valide(this, 'err_nom');" >
</textarea>
<br />
<br />
<input id="submit" tabindex="4" type="submit" value="Envoyer" />
<br />
<br />
</fieldset>
</form>
<br /><br /><br />
<p>
<h3>&nbsp; Partie r&eacute;serv&eacute;e aux inscrits &nbsp; : &nbsp; </h3>
	<ul id="tabnav">
	<br />
		<li><a href="contact_ev.php" tabindex="5" >Nous envoyer plusiers &eacute;v&egrave;nements</a></li>
		<br /><br />
		<li><a href="contact_mp3.php"  tabindex="6">Nous envoyer votre composition (morceau de musique en MP3)</a></li>
		<br /><br />
		<li><a href="liens2.php"  tabindex="6">Nous proposer des liens</a></li>
		<br />
	</ul>
<br />
<br />
</p>
</div>

Candygirl · 21/07/2011, 14h13

Tu devrais fournir le html et css généré complet si tu veux qu'on puisse se faire une bonne idée du résultat. En l'état, sur FF j'ai la partir réservée aux inscrits qui vient sur la droite de ton formulaire.

Y a-t-il une raison pour que tu fasses flotter ton fieldset ? Si non, vire-le, si oui, alors un clear:both sur le h3 devrait t'assurer qu'il vienne bien au-dessous.

fazpedro · 21/07/2011, 15h02

Génial Candygirl

j'ai effectivement viré

Code :

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

1
2
3
fieldset {
	float: left;

et là ... le texte se retrouve bien en-dessous que ce soit sous Firefox ou I.E....

Encore merci !

21/07/2011, 14h13	#7
Candygirl Modératrice Inscription : juillet 2006 Messages : 1 529 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Suisse Informations forums : Inscription : juillet 2006 Messages : 1 529 Points : 1 869 Points : 1 869	Tu devrais fournir le html et css généré complet si tu veux qu'on puisse se faire une bonne idée du résultat. En l'état, sur FF j'ai la partir réservée aux inscrits qui vient sur la droite de ton formulaire. Y a-t-il une raison pour que tu fasses flotter ton fieldset ? Si non, vire-le, si oui, alors un clear:both sur le h3 devrait t'assurer qu'il vienne bien au-dessous. __________________ Les bons réflexes: avant de poser une question: règles \| faq \| tutoriels \| recherche clarté, politesse, vocabulaire et orthographe soignés = efficacité remercier ceux qui ont pris le temps d'aider et si c'est le cas
	10

19/07/2011, 16h09	#2
Elwyn Membre chevronné Ingénieur systèmes et réseaux Inscription : juillet 2006 Messages : 836 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Ingénieur systèmes et réseaux Informations forums : Inscription : juillet 2006 Messages : 836 Points : 712 Points : 712	Rajoute display: block; J'ai testé, ça fonctionne __________________ Dire Straits, Bob Dylan, Led Zeppelin, the Who, Pink Floyd, AC/DC, Guns & Roses, the Doors, ...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email