Bonjour à tous. Alors voilà j'ai un problème que je n'arrive pas à résoudre du à ma nullité en CSS.
En fait j'aimerai faire un formulaire qui contient 2 parties. Pour avoir un alignement parfaitement du texte d'un coté, et des objets de l'autre (textbox etc..)
Le hic c'est que quand j'essaye de scinder mon bloc en 2, ca part en vrille totale^^
Bloc unique qui marche (hormis le fait que c'est pas bien aligné)
<div class='form'>
<div class="form_bloc_haut"></div>
<div class="form_bloc_centre">
<div class="form_raccord"></div>
<span class="form_bloc">Your Name</span>
<span class="form_bloc_droite"><input name="name2" type="text" id="name2" size="20" maxlength="70" class="textfield"/></span>
<div class="form_raccord"></div>
<span class="form_bloc">Your FirstName</span>
<span class="form_bloc_droite"><input name="name2" type="text" id="name2" size="20" maxlength="70" class="textfield"/></span>
<div class="form_raccord"></div>
<span class="form_bloc">Your Mail</span>
<span class="form_bloc_droite"><input name="name2" type="text" id="name2" size="20" maxlength="70" class="textfield"/></span>
<div class="form_raccord"></div>
<span class="form_bloc">Your Password</span>
<span class="form_bloc_droite"><input name="name2" type="text" id="name2" size="20" maxlength="70" class="textfield"/></span>
<div class="form_raccord"></div>
<span class="form_bloc">The place You Want</span>
<select name="place2" id="place2" class="select">
<option selected="selected">A Free Place</option>
</select>
<div class="form_raccord"></div>
<input type="submit" name="valid" id="valid" value="Become Famous" class="button" />
<div class="form_raccord"></div>
<div class="form_bloc_bas"></div>
</div>
</div>
BLOC qu ej'essaye de scinder en 2 mais qui part en cacauette : (La barre du bas part en live vers le haut etc)
<div class='form'>
<div class="form_bloc_haut"></div>
<div class="form_bloc_centre">
<div class="form_raccord"></div>
<span class="form_gauche">
TEST
</span>
<span class="form_droite">
<input name="name2" type="text" id="name2" size="20" maxlength="70" class="textfield"/>
</span>
<div class="form_raccord"></div>
<div class="form_bloc_bas"></div>
</div>
</div>
Et enfin le css :
.form
{
width : 495px;
}
.form_bloc_haut
{
position:relative;
background-image: url('http://www.monsite.com/images/cadre1.png');
width : 495px;
height : 28px;
overflow : hidden;
}
.form_bloc_centre
{
position:relative;
background-image: url('http://www.monsite.com/images/cadre2.png');
width : 495px;
}
.form_bloc_bas
{
position:relative;
background-image: url('http://www.monsite.com/images/cadre3.png');
width : 495px;
height : 28px;
overflow : hidden;
}
.form_bloc
{
position:relative;
color:#FFFF00;
}
.form_bloc_droite
{
margin-right:100px;
}
.form_droite {
position:relative;
float:left;
margin-left:20px;
width:245px;
}
.form_gauche {
position:relative;
float:left;
width:245px;
}
.form_raccord
{
background-image: url('http://www.monsite.com/images/cadre2.png');
width : 495px;
height : 3px;
}
Merci d'avance car là je suis un peu sur les nerfs de pas trouver le problème :(
[ Lien ]