28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'essaye de mettre certains de mes formulaires (qui étaient sous forme de tableaux) en CSS, mais je me demande si je procède de la bonne façon, car partout je vois qu'il ne faut pas abuser des balises <div>, or je n'ai que ça Smiley langue

Donc en fait, je veux que mon formulaire ait 2 colonnes, une qui est en float left, et l'autre float right, tout ça pour tout bien aligné.
Et pour ça, j'ai un div pour contenir tout le formulaire, puis undiv pour la colonne de gauche et un div pour la colonne de droite, et çà pour chaque ligne! (si c'est pas clair, l'exemple ci-dessous va vous aider : les cadres rouges représentent des div, et toutes ces div sont dans un div général)

upload/6194-exemple.PNG

Donc je me demandais si je faisais bien les choses pour avoir un formulaire du type de l'image (avec les input bien alignés, les noms partant du même endroit, etc etc)

Pour info, je vous montre un bout du css pour les colonnes (champGauche c'est le div de gauche, et champDroit celui de droite) :

label
{
	font-style : italic;
	width : 180px;
	float : left;
	margin : 0px;
}

.champDroit,.champGauche
{
	margin-top : 2px;
	margin-bottom : 3px;
}

.champDroit
{
	float : right;
	width : 350px;
	height : 25px;
}

.champGauche
{
	float : left;
	width : 350px;
	height : 25px;
}


Et voilà le bout de code HTML qui fait la première ligne du formulaire (première ligne de l'image également) :

<div class="champGauche">
    <label for="nomAffaire">Nom de l'affaire : </label>
    <input type="text" id="nomAffaire" name="nomAffaire" value="" MAXLENGTH="50" />
</div>
<div class="champDroit">
    <label for="numAffaire">N°de l'affaire : </label>
    <input type="text" id="numAffaire" name="numAffaire" value="" MAXLENGTH="6" />
</div>


Merci d'avance pour votre aide Smiley smile
Modifié par poopsinou (02 Jun 2006 - 09:17)
Salut Poopsinou,

Je trouve effectivement que tu as beaucoup de div.
A ta place j'en enlèverai certains inutiles (par exemple tu peux regrouper les 2 premiers)... Mais plutôt que de me lancer dans de grandes explications, je te conseillerais ce tutoriel qui est très bien fait.

Il te permet de construire un formulaire de manière simple sans en surcharger la structure...
Voilà,
Bon courage Smiley cligne
Ok je vais regarder ça !!
En fait j'ai fait comme ça, parce que je savais pas comment simuler 2 colonnes, et que la première soit alignée à gauche et la deuxième à droite, enfin je me comprend Smiley langue

Je vais regarder pour voir si on peut faire plus simple, surtout que sous IE c'est super bien là, mais faut pas essayer sous Firefox, ça se chevauche dans tous les sens lol

Merci pour ta réponse!
Bon je viens de le regarder : j'ai vu certains trucs intéressant, mais je vois toujours pas comment simplifier mon formulaire.

Dans le tutoriel, ils n'ont qu'une colonne, mais moi j'en ai 2 (parce qu'il s'agit d'un très très long formulaire), alors comment je fais si je veux que tout soit bien aligné dans chaque colonne sans mettre autant de div ?? Je me demande en fait si c'est tout simplement possible.

Par exemple si je regroupe les deux premières div de la première ligne comme tu as di, je perds ma notion de colonne.

Je sais pas si je suis claire ...
Bah fait deux "div colonnesque" contenu dans un div par moitié de page... non ?!

Ca t'en fera 6 en tout... est ce trop ?!
Bah fait deux "div colonnesque" contenu dans un div par moitié de page... non ?! --> tu veux dire un div par moitié de page + deux div dans chacun de ses div ???
Dans ce cas là, est ce qu'un div par moitié de page ne suffit pas seulement?
Ca ferait bien 2 colonnes? Pourquoi recoupé encore ?? (parce que pour que les labels et input soit bien alignés, j'ai fait un align left et j'ai donné une taille aux label (la même, comme ça tout le monde arrive à la même place).

Et sinon je voulais savoir, comment je lui dis à la fin d'une ligne de demi(page d'aller à la ligne suivante ?? avec <br /> ??
Si tu fais autrement, en effet deux divs suffisent pour tout aligner.

Ensuite, pour le form en lui même, tu te sers de <br /> pour faire un retour de chariot, oui.
Ok bon ben j'ai refais ma page, et finalement c'est nickel sous IE comme sous Firefox.

J'ai fait une boîte pour les champs de gauche et une pour celle de droite, mais par contre j'en ai pas 6 (ou moins je sais plus), mais plus parce que parfois j'ai des champs qui devait prendre la longueur des deux boites, donc obligé de fermer les boites pour les mettre et de les réouvrir (logique je pense lol).

Donc en tout j'ai 19 boites au lieu de 35.