Position d'une image?

Version imprimable

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:

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:

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

12/02/2009, 12h29
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?
12/02/2009, 14h22
kaselander

Citation:

Envoyé par 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?

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?

Bonsoir,

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

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:

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 ;)

12/02/2009, 21h45
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!
12/02/2009, 21h49
Macmillenium

pourrait tu poster ton code complet ?

Citation:

Envoyé par Macmillenium

pourrait tu poster ton code complet ?

OK si ça peut apporter quelque chose de positive:

CODE HTML COMPLET:

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
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
101
102
103
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <title>Mon titre</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
 
<body background="http://fonds.toutimages.com/fo_beige/beige064.jpg">
<center><div id="en_tete"><img src="banniere2.gif"></div></center>
   <div id="menu">
	<div class="menu"><a href="page1.html">Menu 1</a></div>
	<div class="menu"><a href="page2.html">Menu 2</a></div>
	<div class="menu"><a href="page3.html">Menu 3</a></div>
	<div class="menu"><a href="page4.html">Menu 4</a></div>
	<div class="menu"><a href="page5.html">Menu 5</a></div>
	<div class="menu"><a href="page6.html">Menu 6</a></div>
	<div class="menu"><a href="page7.html">Menu 7</a></div>
	<div class="menu" id="activ"><a href="page8.html">Menu 8</a></div>
  </div>
 <div id><marquee direction="left" scrollamount="3" height="30"  bgcolor="#DDDDDD" width="900">
 <font face="Verdana" size="2">Dans cette barre passeront des informations  utiles aux abonnés et visiteurs !!!</font>
		</marquee>
 
 
<div id="corps">
<form name="formulaire" action="E-mail" method="post" onSubmit="return verif()">
 
  <h4>Contactez-nous</h4>
 
  <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=""/>
    	    Adresse mail
	 </p>
    	 <p>
    	    <img src="image05.gif" width="16" height="16" alt=""/>
    	     20 30 31 45 / 20 21 89 84
    	 </p>
         <p> 
           <img src="photo.gif" height="85" align= right  alt="Photo FEDAS-CI"/>
         </p>		
 
	<fieldset>
		<legend>Compte client</legend>
 
	<p>
		<label for="form_firstname">Nom :</label>
		<input type="text" id="form_firstname" name="firstname">
	</p>
	<p>
	    <label for="form_lastname">Prénom :</label>
            <input type="text" id="form_lastname" name="lastname">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
	</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>
	    <img src="photo.gif" height="85" align= right alt="Photo FEDAS-CI"/>
	</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>
 
</div> 
 
<div id="pied_de_page">
  <p>
      Mon texte
  </p> 
 
  </div>
 
 
</body>
</html>

CODE CSS FORMULAIRE:

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
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
#Formulaire
{
	width: 60%;
	position:relative;
}
 
image
{
        position:absolute;
        top:0;
        right:0;
}
 
/* fieldset , legend */
fieldset,
{
	margin-bottom: 10px;
	border: #CCC 3px 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;
}
/*Fin code formulaire*/

NB: je veux juste que l'image apparaisse dans le coin haut droit du formulaire voire à l'angle. Et j'y ai ajouté ce que tu m'as proposé sans résultat peut-être que j'ai commis une erreur quelque part.
Merci à toi pour ton aide et saches que je débute dans la conception web et ça me fascine énormément.

12/02/2009, 22h43
Macmillenium
Laquelle des images tu veux mettre dans le coin :roll: je ne vois pas de trace dans ton code ?

et puis je l'ai déjà dit, il ne faut pas oublier :

Code:

<form name="formulaire" id="formulaire" action="E-mail" method="post" onSubmit="return verif()">

n'oublie pas aussi d'affecter la classe .image à ton image
Code:

1 2 3 4 5 6 7 .image { position:absolute; top:0; right:0; }
et html :
Code:

1 2 3 4 <form name="formulaire" id="formulaire" action="E-mail" method="post" onSubmit="return verif()"> ... <img src="image.gif" alt="" class="image" /> ...

C'est cette image là:

Code:

1
2
3
4
 
         <p> 
           <img src="photo.gif" height="85" align= right  alt="Photo FEDAS-CI"/>
         </p>

13/02/2009, 09h12
kaselander

Salut Macmillenium,

après avoir réessayé ce que tu m'as conseillé j'ai pu obtenir un résultat. Voilà, j'ai déplacé le paragraphe contenant mon image pour le placer sous l'intitulé "contactez-nous" et j'ai appliqué ton procédé, le résultat:
http://zepload.com/images/1234512384_Capture02.jpg

Nb: c'est une image quelconque que j'ai choisi juste pour exemple.
J'aurais aimé que l'image apparaisse un peu plus en haut encore alors si t'as une petite astuce je l'attend pendant ce temps je continue de chercher.

Au fait, il y a un autre problème, mes images n'apparaissent pas du tout sous IE v 6.0 , et j'ai un mauvais emplacement des boutons "Envoyer" et "Effacer" une capture:
http://zepload.com/images/1234513327_Capture04.jpg

http://zepload.com/images/1234513407_Capture05.jpg

Pareil avec Opéra v9.62 mais bon positionner des boutons "Enoyer" et "Effacer".

A plus!:yaisse2:
13/02/2009, 10h37
Macmillenium
Citation:

Envoyé par kaselander

Nb: c'est une image quelconque que j'ai choisi juste pour exemple.
J'aurais aimé que l'image apparaisse un peu plus en haut encore alors si t'as une petite astuce je l'attend pendant ce temps je continue de chercher.

Il faut jouer sur les valeur de top et right, par exemple :
Code:

1 2 3 4 5 6 7 .image { position:absolute; top:-5px; right:-5px; }
13/02/2009, 10h50
kaselander
Enfin j'ai pu trouver le code magique donc j'ai obtenu le résultat souhaité et je me demande pourquoi je n'y ai pas penser plus tôt, voici les modifs apportées dans mes codes sources:

CODE HTML, ajout de:
Code:

1 2 <div id="bloc_photo"><img src="photo.gif" height="120" align= right alt="Photo_FEDAS-CI" title="FEDAS-CI"/> </div>
CODE CSS, ajout de:
Code:

1 2 3 4 5 div#bloc_photo { float:right; width:150px; height:150px; }
NB: Mes images sont présentes maintenant sur IE, Opéra. Je teste mes pages sur Firefox, Safari et les deux cités précédemment Mais le problème de positionnement de bouton demeure sous IE.
13/02/2009, 11h01
kaselander
Citation:
Envoyé par Macmillenium

Il faut jouer sur les valeur de top et right, par exemple :

Code:

1 2 3 4 5 6 7 .image { position:absolute; top:-5px; right:-5px; }
En lieu et place à ce que tu m'as conseillé, j'ai mis les codes html et css énoncés dans mon message précédent, une capture:

http://zepload.com/images/1234519080_Capture06.jpg

C'est avec IE que j'ai un problème par rapport à mes boutons Envoyer et Effacer du formulaire.
13/02/2009, 16h33
Erwan31

Bonjour,
pour que le form soit pris en compte comme référent pour ses enfants en position absolue sir IE et Opera, tu dois lui attribuer un position:relative.

Ensuite tu as des éléments mal balisés: la date n'a rien à faire dans un H5.
Un titre de section Hn doit toujours introduire un contenu ;)

> Attention au fond de page qui pertubent la confort de lecture (ton fond beige064.jpg).

Pour ton image

Code:

<img src="photo.gif" height="120" width="" alt="Photo_FEDAS-CI" title="FEDAS-CI"/>

align= right

L'attibut align est un attribut déconseillé par les spécification HTML4, comme tous les attributs de présentation qui doivent être "converti" en déclarations CSS, ceci afin de bien séparer structure et présentation, et ne ne pas invalider ta page.
D'ailleurs ,tu utilises un doctype Strict qui exige un srtict séparation entre le couple structure/contenu et présentation (CSS).
D'autre part tu as oublié de mettre la valeur right entre guillemets droits.
Tu dois au minimum indiquer les attributs height, width (que tu as oublié) et alt.

Sache que le title que tu as indiqué pour ton image n'est pas destiné à la
décrire mais à fournir des informations sur l'image elle même, ce sont ce qu'on
appelle des métadonnées (info EXIF, taille etc)
Si tu souhaites la décrire, le meilleur moyen est d'y ajouter une légende et de
mettre un alt vide (alt="") piusqu'il aurait redondance d'information en cas de
non affichage de l'image.
13/02/2009, 23h07
kaselander

Salut,

j'ai pris note de tes remarques et je vais procéder à quelques modifications et merci pour ton lien, il y a plein d'informations utiles.