28234 sujets

CSS et mise en forme, CSS3

Formulaire à 2 colonnes sous IE

Bonjour

Sous IE, tous les champs INPUT du div "colonne_gauche" s'alignent à droite...

Voici le code HTML

<div class="colonne_gauche">
<b>Nom *</b><br />
<input type="text" name="nom" style="width: 100px;" /><br /><br />
<b>Soci&eacute;t&eacute;</b><br />
<input type="text" name="societe" style="width: 100px;" />
</div>
<b>Pr&eacute;nom *</b><br />
<input type="text" name="prenom" /><br /><br />		
<b>Fonction</b><br />
<input type="text" name="fonction" />


Et le CSS

.colonne_gauche {
float: left;
width: 290px;
}


Merci d'avance
Je n'ai pas tout à fait saisi ton problème mais je pense que tu devrais revoir complêtement le principe de fonctionnement des css.

Par exemple tu utilise une balise <b> pour mettre en gras, ce qui est typiquement de la mise en page.

tu devrais déplacer cette donnée dans le css :

.colonne_gauche {
float: left;
width: 290px;
font-weight: bold;
}


Ensuite si tu veux que tes input aient un certain comportement il faut le définir dans la css avec un :


.colonne_gauche input {
display: block;
text-align: left;}


Le display block te permets d'enlever tous les retour à la ligne (<br />) que tu utilises. car l'input est un élément "en ligne" par défaut.

J'espère que ma réponse t'aidera.

FoW
Déjà tes input devrait être couplés à des labels. Tu utilise <b> là ou tu devrait avoir ces labels. Ensuite tu devrais ajouter des id a tes input en place des "name" (si tu y tiens vraiment tu peux conserver les "name" pour la compatibilité...). Et supprimer tous ces br comme te l'as suggéré FoW.


<label for="nom">Nom *</label>
<input type="text" id="nom" name="nom" />


CSS:


input {
 display:block;
 width: 100px;
}
label {
 font-weight:bold;
 display:block;
}


Pas trop compris le problème d'origine non plus... ?
Modifié par jb_gfx (23 Mar 2005 - 19:15)
OK, merci pour ces précisions, mais le problème du départ n'est toujours pas résolu :

Voici la mise en page recherchée (fonctionne sous Mozilla et Netscape)
Nom *
[___________]
Societe
[___________]

Et voici ce qu'IE me rend
Nom *
____________________________________[___________]
Societe
____________________________________[___________]

J'ai bien tout remis comme vous me l'aviez dit, mais je ne vois vraiment pas.

Merci d'avance
Modifié par nicolas.charlot (24 Mar 2005 - 08:50)
C'est moi qui t'ai dit une bétise dans mon post précédent, tu dois en fait appliquer display:block uniquement sur tes labels, par sur les input.

Testé ça fonctionne bien sous IE et FF.

Il faudra certainement (tu t'en doutais) ajouter une div colonne_droite pour réaliser ta deuxième colonne.
Sujet clos
Aller à