Discussion :

[jean-pierre96]

Bonjour,

comment faire pour réaliser un espacement par rapport à la marge gauche de la page, et non par rapport à l'élément parent à gauche?

merci pour votre aide

[Deallyra]

margin-left ne marche pas?

[jean-pierre96]

Si mais l'espacement se fait par rapport à l'élément avant.

En fait par exemple:

Code :

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

1
2
3
4
 
Nom: Toto
Prénom: Dudu
Fonction: Tata

faudrais que j'aligne comme ceci:

Code :

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

1
2
3
4
 
Nom:      Toto
Prénom:   Dudu
Fonction: Tata

[Deallyra]

c'est pour un formulaire?
ou c'est juste un exemple?

[jean-pierre96]

C'est pour un formulaire en effet. Mais il y aura du texte simple aussi à aligner en fait

[LeXo]

avec en css la propriété float

sinon avec une position absolute

[jean-pierre96]

Auriez vous un exmple?

[Bisûnûrs]

Exemple de formulaire :

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
27
28
p.formcontact{
   clear:both;
   margin-bottom:2px;
   height:20px;
   line-height:20px;
}
p.formcontact label{
   display:block;
   float:left;
   width:100px;
   text-align:left;
}
p.formcontact input, p.formcontact textarea{
   display:block;
   float:left;
   color:#123456;
   border :1px solid #abc;
   padding:1px;
   font:normal 11px arial,sans-serif;
}
p.formcontact input{
   width:200px;
}
p.formcontact textarea{
   width:400px;
   height:200px;
   overflow:auto;
}

Code :

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
<p class="formcontact">
   <label for="nom">Nom :</label>
   <input id="nom" type="text" />
</p>
<p class="formcontact">
   <label for="mail">E-mail :</label>
   <input id="mail" type="text" />
</p>
<p class="formcontact">
   <label for="sujet">Sujet :</label>
   <input id="sujet" type="text" />
</p>
<p class="formcontact">
   <label for="message">Message :</label>
   <textarea id="message"></textarea>
</p>

[Deallyra]

tu peux utiliser la balise html <label> et le css
label
{
display : block;
width : 130px;
}

Code html :

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

1
2
3
4
5
6
 
<label for = "Societe">
	_ Société :
</label>
<input name = "Societe" type = "text" id = "Societe" size = "20" />
<br />

EDIT : oups désolée Bisûnûrs.... j'avais pas lu toute ta réponse...

[LeXo]

un tres bon tuto pour les formulaires

Formulaire & CSS

[jean-pierre96]

Je vous remercie tous énormément

Bye

[jean-pierre96]

En fait je viens de détecter un problème sous firefox que je n'arrive pas à résoudre. J'utilise le code de Bisûnûrs. Et quand j'ai le code:

Code :

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

1
2
3
 <p class="formcontact"><label for="message">Message :</label>
<textarea id="message"></textarea></p>
<h3>Autres</h3>

Sous IE le textarea s'affiche bien aligné, et le titre "Autres" s'affiche en dessous à la ligne. Par contre sous firefox, ben le titre "Autres" il reste coincé sur la gauche du textarea.

Comment résoudre ce problème?

Merci de m'aider

[jean-pierre96]

Vraiment aucune idée?