Modifications sur les inputs, labels d'un formulaire

Version imprimable

29/03/2012, 19h00
maxredphenix

3 pièce(s) jointe(s)

Modifications sur les inputs, labels d'un formulaire

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:
Pièce jointe 92278

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):
Pièce jointe 92279

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

Merci d'avance

maxredphenix
29/03/2012, 19h57
_tom_
Bonjour,

Tu peux appliquer sur tes labels ceci :
Code:

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 ;)
30/03/2012, 09h26
aritas

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

Bonjour,

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

Code:

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:

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.

30/03/2012, 11h41
_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 ;)
30/03/2012, 11h53
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.
30/03/2012, 23h00
maxredphenix

Bonsoir,

Merci pour vos réponses. C'est bon grâce à vos conseilles j'ai reussi à réorganiser mes formulaires comme je voulais.

Pour le menu est ce que quelqu'un aurait une idée? De plus je voudrais rajouter une page de connexion avec base mysql du même style que celle de joomla :
http://www.joomla.fr/images/stories/...mo_j!15_11.jpg

Et une fois connecter je voudrais que cela rentre dans le menu pour la déconnexion comme...joomla, d'ou le faite que je cherche a faire une continuité du menu sur toute la largeur de l'écran:
http://www.joomla.fr/images/stories/...mo_j!15_12.jpg

Est ce que vous savez si il y a moyen de faire cela avec un quelque chose d'existant pour comme "éviter de réinventer la roue comme on dit souvent"

Je pense utiliser Jquery pour bonifier mes interfaces dont les champs heures/dates (qui d'ailleurs ne fonctionnent pas, mais ??? je sais pas pourquoi) est ce que vous me le conseillez ou pas? car beaucoup d'avis pour et contre sur le net.

Encore merci pour vos réponses.

maxredphenix