Comment passer en mode ligne ?

**Mck698** · 21/05/2012, 17h43

Bonjour à tous,

Je souhaite mettre le textarea à droite de l’écran avec le bouton alignés aux autres petites zones de texte de mon formulaire.
Je n'arrive pas a passer en mode ligne (j'ai pourtant utiliser un span comme indiqué ici)

Je ne vois pas la solution quoi que je fasse j'arrive a ce resultat :
http://imageshack.us/photo/my-images/135/formu.png/

Je sollicite donc votre aide.

Mon code HTML :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" media="screen" title="Feuille CSS" type="text/css" href="cssformulaire.css" />
        <title>Formulaire</title>
    </head>
    <body>
 
    <form method="POST" action="??.php">
            <center><h1>Formulaire de contact</h1></center><br><br>
            <!-- Grosse zone de texte pour le descripif du probleme -->
            <span id="descriptif">Descriptif du probl&egraveme rencontr&eacute <br>
            <textarea id="descriptif" cols="30" rows="20" name="description">Expliquez ici votre probl&egraveme</textarea><br>
 
 
            <!-- Bouton envoyer -->
            <input id="descriptif" type="submit" value="Envoyer le dossier"><br><br>
 
            </span><br><br>
 
            <!-- Zone de texte pour le nom -->
           <span id="renseignement"> 
 
                <p>Nom</p><input id="renseignement" type=text name="nom"><br> 
 
                <!-- Zone de texte pour le nom de la societe -->
                <p>Nom de la soci&eacutet&eacute</p><input id="renseignement" type=text name="societe"><br>
 
                <!-- Zone de texte pour le nom de la personne a contacter -->
                <p>Nom de la personne &agrave contacter</p><INPUT id="renseignement" type=text name="nomcontact" ><br> 
 
                <!-- Zone de texte pour le numero de telephone -->
                <p>Num&eacutero de t&eacutel&eacutephone </p><input id="renseignement" type=text name="tel"> <br> 
 
                <!-- Zone de texte pour le nom de le mail du client -->
                <p>E-mail de contact</p><input id="renseignement"type=text name=email"> <br>
 
                <!-- Zone de texte pour la marque du materiel en panne -->
                <p>Marque du mat&eacuteriel concern&eacute * </p><input id="renseignement" type=text name=marque"> <br>
 
                <!-- Zone de texte pour le model du materiel en panne -->
                <p>Mod&egravele du mat&eacuteriel * </p><input id="renseignement" type=text name=model"> <br>
 
                <!-- Zone de texte pour le N° serie -->
                <p>Numero de s&eacuterie du mat&eacuteriel </p><input id="renseignement" type=text name=model"> <br>
 
           </span>
 
           <center>* Les zones de saisies ne sont pas obligatoire mais fortement conseill&eacute pour une r&eacutesolution plus rapide </center>
 
    </form>
    </body>
</html>

Et mon CSS :

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
17
18
19
20
21
22
23
24
25
26
27
28
#renseignement
{
 
	margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px 
 
 
}
 
#descriptif
{
	margin-left : 55%;
	padding-left : 10px;
	padding-right : 10px 
}
 
 
 
p
{
 
        margin-left: 10%;
	padding-left: 10px;
	padding-right: 10px 
 
 
}

J'ai egalement essayer avec " float " (vu sur un tuto) sans malheureusement trop comprendre son utilisation.

Par avance merci.

EDIT : 18h14 => Modification de l'affichage.

**Muchos** · 21/05/2012, 21h02

Envoyé par Mck698

J'ai egalement essayer avec " float " (vu sur un tuto) sans malheureusement trop comprendre son utilisation.

On sent bien que c'est là le problème

Ça marche si vous ne mettez que :

Code :

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

1
2
3
4
5
6
 
#descriptif
{
	padding-left : 10px;
	padding-right : 10px 
}

D'ailleurs, si vous ne mettez aucun css c'est tout aussi bien. Pensez aussi à lire un bon tuto sur les formulaires, car il y a du mauvais dans le code…

**Mck698** · 21/05/2012, 21h44

Bonjour Muchos tout d'abord merci de ta reponse !
Le probleme est toujours présent.
Lorsque je modifie mon CSS comme ceci :

Code :

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

1
2
3
4
5
6
 
#descriptif
{
	padding-left : 10px;
	padding-right : 10px 
}

Le textarea se positionne tout à gauche. Je souhaite obtenir ce résultat :

http://hpics.li/09b0a75

**NoSmoking** · 21/05/2012, 22h56

Bonsoir,
pourquoi passer par des éléments INLINE comme les SPAN alors qu'il te faut utiliser dans ce cas des éléments de type BLOCK comme les DIV pour encapsuler tes éléments de type BLOCK comme les P?

Tes balisages P ne sont pas géants, il existe les LABEL, ou les SPAN pour faire ce qu'ils font

Ensuite il te suffit de mettre les 2 DIV en float:left et il seront cote à cote.

Il y a également un doublon au niveau des ID, descriptif entre autres renseignement, ce qui n'est pas idéal pour appliquer des styles et qui va a l'encontre du fait qu'une ID doit être UNIQUE.

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
25
26
<h1>Formulaire de contact</h1>
<form method="POST" action="??.php">
  <div id="div1">
    <span>Nom</span>
    <br><input type='text' name="nom">
    <br><span>Nom de la soci&eacutet;&eacute;</span>
    <br><input type='text' name="societe">
    <br><span>Nom de la personne &agrave; contacter</span>
    <br><input type='text' name="nomcontact">
    <br><span>Num&eacute;ro de t&eacute;l&eacute;phone </span>
    <br><input type='text' name="tel">
    <br><span>E-mail de contact</span>
    <br><input type=text name=email">
    <br><span>Marque du mat&eacute;riel concern&eacute; * </span>
    <br><input type='text' name='marque"'>
    <br><span>Mod&egrave;le du mat&eacute;riel * </span>
    <br><input type='text' name='model"'>
    <br><span>Numero de s&eacute;rie du mat&eacute;riel </span>
    <br><input type='text' name='model"'>
  </div>
  <div id="div2">
    Descriptif du probl&egrave;me rencontr&eacute;
    <br><textarea cols="30" rows="20" name="description">Expliquez ici votre probl&egrave;me</textarea>
    <br><input type="submit" value="Envoyer le dossier">
  </div>
</form>

il te reste à mettre le CSS qui va bien.

nota:
pour les &eacute , et les autres, il ne faut pas omettre le ; final é, le mieux restant de passer à l'UTF-8

**Mck698** · 21/05/2012, 23h02

Un grand merci pour vos réponse. Je vais maintenant faire le CSS.
Je vais prendre le temps demain de revoir ces langages.

**Muchos** · 21/05/2012, 23h05

J'avais compris que tu voulais aligner à gauche. Au temps pour moi !

Comment passer en mode ligne ? [CSS 3]

Tableau en CSS

Discussions similaires

Partager

Partager