Discussion :

[elkhazak]

Bonjour,

J'ai téléchargé un code source d'un multi step inscription et je l'ai modifié et tt va bien jusqu'à quand j'ai essayé de rendre quelques champs vertical en mode horizontal, j'ai essayé plusieurs méthodes mais j'arrive pas à changer ça :


à ça :


Voici le code CSS :

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
@charset "utf-8";
/* CSS Document */
 
body{font-family:tahoma;font-size:12px;}
#signup-step{margin:auto;padding:0;width:53%}
#signup-step li{list-style:none; float:left;padding:5px 10px;border-top:#004C9C 1px solid;border-left:#004C9C 1px solid;border-right:#004C9C 1px solid;border-radius:5px 5px 0 0;}
.active{color:#FFF;}
#signup-step li.active{background-color:#004C9C;}
 
#signup-form{clear:both;border:1px #004C9C solid;padding:20px;width:50%;margin:auto;}
 
.demoInputBox{padding: 10px;border: #CDCDCD 1px solid;border-radius: 4px;background-color: #FFF;width: 50%;}
.signup-error{color:#FF0000; padding-left:15px;}
.message {color: #396;font-weight: bold; font-size:16px; margin-left:22%; width: 100%;padding: 10;}
.btnAction{padding: 5px 10px;background-color: #39F;border: 0;color: #FFF;cursor: pointer; margin-top:15px;}
 
label{line-height:35px;}
h1{
    margin:3px 0;
    font-size:13px;
    text-decoration:underline;
    text-align:center;
}
.tLink{
    font-family:tahoma;
    size:12px;
    padding-left:10px;
    text-align:center;
}

et le code HTM :

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
<form name="frmRegistration" id="signup-form" method="post">
	<div id="personal-field">
	<div class="clearfix">
	<div class="demi">
		<label>Name</label><span id="name-error" class="signup-error"></span>
		<div><input type="text" name="name" id="name" class="demoInputBox"/></div>
		<label>Email</label><span id="email-error" class="signup-error"></span>
		<div><input type="text" name="email" id="email" class="demoInputBox" /></div>
	</div>
	<div class="demi">
		<label>Tel</label><span id="email-error" class="signup-error"></span>
		<div><input type="text" name="tel" id="tel" class="demoInputBox" /></div>
		<label>Adresse</label><span id="email-error" class="signup-error"></span>
		<div><input type="text" name="adr" id="adr" class="demoInputBox" /></div>
	</div>
	</div>
	</div>
	<div id="password-field" style="display:none;">
		<label>Enter Password</label><span id="password-error" class="signup-error"></span>
		<div><input type="password" name="password" id="user-password" class="demoInputBox" /></div>
		<label>Re-enter Password</label><span id="confirm-password-error" class="signup-error"></span>
		<div><input type="password" name="confirm-password" id="confirm-password" class="demoInputBox" /></div>
	</div>
	<div id="general-field" style="display:none;">
 
		<label>Gender</label>
		<div>
		<select name="gender" id="gender" class="demoInputBox">
		<option value="female">Female</option>
		<option value="male">Male</option>
		</select></div>
	</div>
	<div>
		<input class="btnAction" type="button" name="back" id="back" value="Back" style="display:none;">
		<input class="btnAction" type="button" name="next" id="next" value="Next" >
		<input class="btnAction" type="submit" name="finish" id="finish" value="Finish" style="display:none;">
	</div>
</form>

Merçi d'avance.

[Invité]

Bonjour,

1/ merci de poster le code CSS + HTML directement dans la discussion.
La balise [CODE] ("#") du menu est faite pour ça.

2/ merci de NE poster QUE le code CSS + HTML NECESSAIRE.
On n'a pas besoin de tout le fichier

3/ merci de poster le CODE HTML GENERE ("voir la source HTML).
Dans le forum CSS, PAS de code PHP.
Le code JavaScript est lui aussi inutile dans ce cas.

4/ Pour te répondre :

Code html :

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

1
2
3
4
5
6
7
8
<div class="clearfix">
<div class="demi">
... (2 premiers input)
</div>
<div class="demi">
... (2 derniers input)
</div>
</div>

Code css :

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

1
2
3
4
.clearfix:before, .clearfix:after { display:table; content:''; }
.clearfix:after { clear:both; }
 
.demi { float:left; width:50%; margin:0; padding:0; border:0; }

[elkhazak]

Merciii beaucoup c'est parfait
d'accord j'ai modifié le tout