Discussion :

[maxredphenix]

Bonjour a tous,

Je suis nouveau dans la création de site web (seulement 3 semaines...), la je rencontre un ptit soucis sur la mise en forme des champs contenu dans mes fieldset de mes formulaires. Voici un apercu de ce que j'ai actuellement:


Pour infos:
- Le fichier css correspondant est en pièce jointe.
- Dans le fichier php, les formulaires sont créer avec des fieldset et chaque label/input etc est dans un <span>.

Voila mes soucis:

J'arrive pas à mettre les labels bien alignés verticalement et de même pour les champs type input, textarea, select du coups ça fait très moche.

En plus de ça j'ai rechercher sur le web mais j'ai pas trouver comment faire pour réduire l’écart entre chaque champs donc ça donne forcement des fieldset très grand donc une scrollbar, ce qui n'est pas pratique pour l'usagé.

Si au cas ou vous pourriez aussi m'aider sur le menu tout en haut. Je cherche à prolonger le menu jusqu'a droite pour que çà fasse plus jolie, mais idem que le reste je bloque dessus depuis 1 semaine sans rien trouver.

Comme je m'explique souvent très mal voici ce que je voudrais obtenir (sauf que la c'est paint...dommage):


J’espère que quelqu'un pourra m'aider.......

Merci d'avance

maxredphenix

[_tom_]

Bonjour,

Tu peux appliquer sur tes labels ceci :

Code :

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

1
2
3
4
5
6
7
 
label
{
	display: block;
	width: 150px;
	float: left;
}

Le display en block permet un espace "homogène" mais provoque un retour à la ligne, d'où le float:left qui enlève ce retour à la ligne

[aritas]

Je rebondie pour poser une question : l'utilisation de la balise <ul> pourrait éviter l'utilisation des lignes css ci dessus?

[Torgar]

Bonjour,

Comme le dit _tom_ il faut utiliser les float:left; et float:right; (éventuellement), par exemple :

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
<div class="bloc">
    <div class="label">
        <p><label for="mon_input1">Label 1 : </label></p>
        <p><label for="mon_input2">Label 2 : </label></p>
    </div>
    <div class="input">
        <p><input type="text" name="mon_input1" id="mon_input1" /></p>
        <p><input type="text" name="mon_input2" id="mon_input2" /></p>
    </div>
    <div class="clear"></div>
</div>
 
<div class="bloc">
    <div class="label">
        <p><label for="mon_input3">Label 3 : </label></p>
        <p><label for="mon_input4">Label 4 : </label></p>
    </div>
    <div class="input">
        <p><input type="text" name="mon_input3" id="mon_input3" /></p>
        <p><input type="text" name="mon_input4" id="mon_input4" /></p>
    </div>
</div>
 
<div class="clear"></div>

Et le CSS qui va avec :

Code css :

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
.bloc {
    float: left;
    width: 50%;
}
 
.label {
    float: left;
    text-align: left;
    width: 50%;
    font-weight: bold;
}
 
.input {
    float: left;
    text-align: left;
    width: 50%;
}
 
.clear {
    clear: both;
}
 
p {
    padding-top: 6px;
    padding-bottom: 6px;
}

Pour les listes, d'un point de vue sémantique, ce n'est pas très juste. Tout comme les tables, mais elles ont le mérite d'être plus simple à mettre en place.

[_tom_]

@aritas, comme le dit Torgar, l'utilisation de la structure en ul/li dans ce cas là n'est pas souhaité.

Mais pour répondre à ta question, cela pourrait effectivement "éviter" le code CSS, ce qui n'est pas au final une si bonne chose que ça

[Torgar]

Il y aura toujours du CSS, même avec une gestion par liste, car il faut garder la structure colonnes/lignes, que les listes ne garantissent pas à elles toutes seules.

Il faudra au minimum utiliser un flottement pour mettre deux listes côte à côte et un interligne.