Discussion :

[kaselander]

Bonjour,

je voudrais placer une image en haut dans le coin droit de mon formulaire, une image à l'angle de mon formulaire et j'ose espérer avoir été clair sinon je tacherai de fournir plus d'infos, voici mon code:

CODE HTML DE MON FORMULAIRE:

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
55
56
57
58
59
60
61
62
63
<form name="formulaire" action="E-mail" method="post" onSubmit="return verif()">
 
<fieldset>
	<legend>Contactez-nous</legend>
 
	<h5>Du Lundi au Samedi de 8h à 17h</h5>
 
    <p>
    	<img src="image03.gif" width="16" height="16" alt=""/>
    	adresse postale<br />Localisation
    </p>
    <p>
       <img src="image04.gif" width="16" height="16" alt=""/>
        E-mail
    </p>
    <p>
       <img src="image05.gif" width="16" height="16" alt=""/>
       Téléphone / Fax
    </p>
    <p> 
       <img src="photo.gif" height="85" align= right  alt="Photo FEDAS-CI"/>
    </p>		
</fieldset>
 
<fieldset>
     <legend>Compte client</legend>
 
  <p>
      <label for="form_lastname">Nom :</label>
      <input type="text" id="form_lastname" name="lastname">
  </p>
  <p>
      <label for="form_firstname">Prénom :</label>
      <input type="text" id="form_firstname" name="first_name">
  </p>
  <p>
     <label for="form_mail">E-mail :</label>
     <input type="text" id="form_mail" name="mail">
  </p>
  <p>
      <label for="form_phone">Téléphone : *</label>
      <input type="text" id="form_phone" name="phone">
  </p>
  <p>
      <label for="form_request">Vos demandes : *</label>
          <select id="form_request" name="request">
	                  <option value="th">Théme1</option>	
			  <option value="th">Thème2</option>
			  <option value="th">Thème3</option>
			  <option value="th">Thème4</option>
			  <option value="th">Thème5</option>
			  <option value="th">Thème6</option>
	  </select>
  </p>
  <p>
      <label for="form_message">Votre message : *</label>
      <textarea name="message" cols="30" rows="5"></textarea>
  </p>
  <p>
      <input type="submit" value="Envoyer" name="envoyer"/> <input    type="reset" value="Effacer" name="effacer"/>
  </p>
</fieldset>
</form>

CODE CSS DU FORMULAIRE:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
#Formulaire
{
	width: 60%;
}
 
image
	{
	 propriété: valeur;
	 propriété: valeur;
	}	
 
/* fieldset , legend */
fieldset
{
	margin-bottom: 10px;
	border: #CCC 2px solid;
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
	font-weight: thin;
}
 
fieldset:hover
{
	background-color: #FFF;
}
 
fieldset legend
{
	padding: 0 10px;
	border-left: #CCC 1px solid;
	border-right: #CCC 1px solid;
	font-size: 1.2em;
	color: blue;
}
 
 
/* Label */
label
{
	background-color: #FFCC66;
	display: block;
	width: 20%;
	float: left;
	padding-right: 1%;
	text-align: right;
	letter-spacing: 1px;
}
 
label:hover
{
	font-weight: bold;
}
 
form_label_nostyle
{
	background: none;
}
 
 
/* Input */
input, select
{
	margin-left: 1%;
	width: 58%;
	border: #CCC 1px solid;
}
 
input:hover, select:hover, input:focus, select:focus
{
	border: #999 1px solid;
	background-color: #DDEEFF;
}
 
 
/* button submit */
input[type="submit"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
 
 
}
 
input[type="submit"]:hover
{
	background-color: #66CC33;
	cursor: pointer;
}
 
input[type="reset"]
{
	border: #DDEEFF 1px solid;
	width: 27%;
 
}
 
input[type="reset"]:hover
{
	background-color: #E6484D;
	cursor: pointer;
}

Je ne sais quel code css utiliser pour la mise en forme de l'image alors s'il vous plaît aider à le résoudre et merci d'avance

[Erwan31]

Bonjour,
tout dépend du type d'image que tu veux placer. Est-ce une image décorative
ou est-elle porteuse d'information?
Sinon je vois que ton code est assez bien structuré mais à quoi te sert le premier fieldset?

[kaselander]

Bonjour,
tout dépend du type d'image que tu veux placer. Est-ce une image décorative
ou est-elle porteuse d'information?
Sinon je vois que ton code est assez bien structuré mais à quoi te sert le premier fieldset?

Salut,
oui tu as parfaitement raison sur le premier <fieldset> et j'ai l'ai vite retiré lorsque j'ai vu qu'il est inutile.
Pour le type, je pourrai dire porteuse d'information car ce sera une photo de la structure afin que les visiteurs la voient pour la localiser plus facilement lorsqu'ils voudront s'y rendre.
Et merci de trouver mon code assez bien, ça me fait énormément plaisir. Alors sachant maintenant à quoi servira l'image, tu peux me guider?

[Macmillenium]

Bonsoir,

Tu as deux possibilités:
- Mettre ton image en background :

Code css :

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

1
2
3
4
5
6
 
#Formulaire
{
	width: 60%;
        background:url(tonimage.gif) no-repeat right top;
}

- Mais comme tu dis que ce n'est pas une image de décoration, tu peux la positionner en absolute :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#Formulaire
{
	width: 60%;
        position:relative;
}
 
image
	{
         position:absolute;
         top:0;
         right:0;
	}

et attention à ne pas oublier id="formulaire" sur ton form

[kaselander]

Merci mais ça ne fonctionne pas, je vais laisser tomber vu que c'est pas vraiment très important mais si d'aventure je trouve le code magique je pourrai toujours l'insérer et en faire partager aux autres.

Encore merci!

[Macmillenium]

pourrait tu poster ton code complet ?