hover sur un input bouton dans le css qui ne fonctionne pas

**patricktoulon** · 28/06/2013, 16h54

re
la je commence a avoir mal a la tete

voila un testaera avec balise fermé
je l'ai ai tous fait comme ca
et voila ce que ca donne

Invité · 28/06/2013, 17h09

Oui j'ai essayé et honnêtement, j'aurais tout refait !

Quand j'ai un code (c'est rarissime

) pas propre qui agit différemment de ce qu'il devrait, je relis tous, je réindente ce qui est mal indenté et je refais ce qui est à refaire.

Tu as bien fait d'utiliser un <!DOCTYPE html>

**patricktoulon** · 28/06/2013, 19h29

Re
alors voila ca fait plus de 3 heures que je bataille

et c'est bien l'interprétation qui est a remettre en cause

j'ai contrôlé un par un les textaera (leurs dimension et emplacement )

en effet exemple
si un textaera se trouve left 20 et a 10 de top et fait 30 de large et 23 de haut
celui d'en dessous devrai fait 20 de left 33 de top 30 de large et 23 de haut

et bien rien que ca c'est pas bon lors de l'affichage
les coordonnées sont bien bonnes mais pour je ne sais quelle raison il se chevauche un petit peu

j'ai essayé la proposition de JérémieL en l'occurrence la prise en charge des textaera dans le css ca ne fonctionne pas avec IE en tout cas

en ce qui concerne les balises (fermée ou non) si je suis JérémieL dans son idée j'obtiens n'importe quoi le style inline est pris comme le texte qui doit se trouver a l'interieur

je ne peut pas faire un css pour tout les input ca deviendrait une usine a gaz

quelqu'un peut m'expliquer la je suis a plat au bout du rouleau

voici une capture d'ecran du tableau sur les données des textaera
vous constaterez qu'il n'y a pas d'erreurs
merci pour le retour

**NoSmoking** · 28/06/2013, 19h29

Je rajouterais à ce qui à déjà été dit que une construction comme

Code html :

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

1
2
3
<textarea id="F2"name="F2"
  <INPUT STYLE="Text-ALIGN:center";>
</textarea>

est non conforme.

Un élément TEXAREA ne doit contenir que sa value, pas d'autres éléments.

Il est ou l'intérêt de mettre un INPUT dans une TEXAREA ?

**rodolphebrd** · 28/06/2013, 20h24

Il serait intéressant de fournir un modèle du projet final pour bien cerner ce qui est voulu.
Ne sommes nous pas éloigné de la question initiale ?
Si oui, cela permettrait de bien guider ceux qui viendront apporter leur aide.

**patricktoulon** · 28/06/2013, 21h39

bonsoir

apres une debacle quelque vaisseau eclaté dans les yeux lol...

voila une ebauche de ce que je veux

dites moi si il s'affiche correctement

il y a juste un bouton impression et fermer

Invité · 28/06/2013, 22h24

Si tes éléments se chevauchent alors qu'ils sont en float , essaye de mettre ton div conteneur en overflow: auto.

**NoSmoking** · 29/06/2013, 07h06

Ta construction sur base d'éléments positionnés en absolute et plus que moyenne, tu gagnerais à l'aisser tes éléments dans le flux.

As tu connaissance de l’existence de la balise LABEL, de ce que sont les formulaires?

**patricktoulon** · 29/06/2013, 12h58

Bonjour NoSmoking
Non je ne connaissais pas

je viens de regarder un peu de tout les cotés des exemples

mais comment faire pour que sa resemble a ce que je veux

j'ai pris un exemple simple sur le net je l'ai copié sur un .text et sauver en html et la surprise je n'ai deja pas le meme resultat

pourais tu me faire un exemple qui implique comment les inputs doivent se comporter graphiquement

Au plaisir

**patricktoulon** · 29/06/2013, 14h23

Re
je viens d'essayer un peu avec les balises LABEL

en effet si on se debrouille pour que le flux genere un affichage correct
ca semble prometteur mais javais essayer sans doc type
et lorsque que je me sert du

Code :

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

<!doctype html>

la ca deraille
alors j'ai essayé

Code :

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

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN >

la l'affichage est bon mais on reviens au probleme de depart mon mouse over dans le css ne fonctionne plus

c'est a s'arracher les cheveux

heu.... une idée

**patricktoulon** · 29/06/2013, 14h48

re
voila un exemple avec la vue

Code :

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

1
2
3
4
5
6
7
 
 
<div class="feuille" style="width:760px;height:45px;border:1px #0FF000 solid;">
<LABEL FOR="t2">
<INPUT TYPE="text" ID="t1" style="width:80px;border:1px #000000 solid;"> <INPUT TYPE="text" ID="t2"class ="colonnedesignation" style="width:425px;border:1px #000000 solid;"> <INPUT TYPE="text" ID="t3"style="width:70px;height:40px;border:1px #000000 solid;"> <INPUT TYPE="text" ID="t4"style="width:70px;height:40px;border:1px #000000 solid;"> <INPUT TYPE="text" ID="t5"style="width:75px;height:40px;border:1px #000000 solid;"> 
</LABEL>
</div>

voir la capture
on en reviens toujour au meme probleme
si je met pas de doctype html ca fonctionne avec un probleme d'affichage mais avec les boutons
si je met un doctype quelqu'il soit d'autre j'ai un probleme d'affichage et je n'ai plus le hover des boutons

je crois que je vais passer par vbs

en virant tout doctype sachant que ce sera un hta au final

**patricktoulon** · 30/06/2013, 00h31

re
Bonsoir NoSmoking ou bonjour vu l'heure qu'il est

je viens de le refaire entierement avec ton system de balises label

et whoaou!!! le code diminue de 2 tiers avec le css

je finalises et je poste un exemple tu me dira si le code est plus propre

en tout cas nickel pour faire des formulaires

merci pour le tuyaux

**NoSmoking** · 30/06/2013, 10h13

Envoyé par NoSmoking

As tu connaissance de l’existence de la balise LABEL, de ce que sont les formulaires?

cette remarque n'avait pour but que de te faire découvrir d'autres balises HTML pour créer un document, il existe autre chose que des TEXTAREA, c'est chose faite donc.
Attention toutefois à ne pas l'utiliser à tord et à travers.

L'utilisation d'une feuille de style te fera gagner de la souplesse et du temps pour la mise en page et la maintenance.

exemple de réalisation simple

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
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE HTML >
<html>
<head>
<meta charset="UTF-8">
<title> DEVIS </title>
<style>
html, body{
  font-family:Verdana;
  font-size:100%;
  margin:0;
  padding:0;
}
#facture{
  font-family:Verdana;
  font-size:0.8em;
  width:65.5em;
  min-width:65.5em;
  margin:2em;
  padding:.5em;
}
input{
  border:1px solid #888;
  font-family:Verdana;
  font-size:1em;
  height:1.5em;
  line-height:1.5em;
}
label{
  display:inline-block;
  height:2em;
}
#empied{
  text-align:center;
  margin-bottom:1em;
  clear:both;
}
#contenu{
  clear:both;
}
#contenu p,
#contenu input,
#contenu label{
  margin:0;
  padding:0;
}
#contenu input,
#contenu label{
  display:inline-block;
  height:2em;
  line-height:2em;
  border:1px solid #888;
  border-left:0;
  border-bottom:0;
}
#contenu label{
  background:#EEF;
  text-align:center;
}
#contenu .col_1{
  width:6em;
  border-left:1px solid #888;
}
#contenu .col_2{
  width:38em;
}
#contenu .col_3{
  width:7em;
}
#contenu .col_4{
  width:7em;
}
#contenu .col_5{
  width:7em;
}
/* dernière ligne de saisie */
#contenu .dernier input{
  border-bottom:1px solid #888;
}
/* ligne Total */
#contenu p.ligne_total label.col_1_2_3{
  visibility:hidden;          /* masque mais occupe la place */
  width:51em;                 /* largeur des cellules */
  border:0;
  border-left:3px solid red;  /* plus largeur des bordures */
}
#contenu p.ligne_total label,
#contenu p.ligne_total input{
  border-bottom:1px solid #888;
  line-height:2.5em;
  height:2.5em;
}
#contenu p.ligne_total label{
  border-left:1px solid #888;
}
.rouge{
  color:#F00;
}
</style>
</head>
<body>
<div id="facture">
  <div id="contenu">
    <p><label class="col_1">Référence</label><label class="col_2">Désignation des travaux</label><label class="col_3">Total heure</label><label class="col_4">Tarif horaire</label><label class="col_5">Total</label></p>
    <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
    <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
    <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
    <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
    <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
    <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
    <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
    <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
    <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
    <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
    <p class="dernier"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
    <p class="ligne_total"><label class="col_1_2_3"></label><label class="col_4">Total Devis</label><input class="col_5" type="text"></p>
  </div>
  <div id="empied">
    <br><strong class="rouge">Achat des matèriaux à la charge du client.</strong>
    <br>TOTO-SERVICE- 277, Chemin de fond Résidence " lesPoulettes" - 83200 Toulon
    <br><strong>Tél : 05 45 78 95 56</strong>
    <br>E-mail:TOTO,service@hotmail,fr
    <br>Individuelle au capital de 6500 €- SIRET : XXX XXX XXX XXXXX - Code APE YYYY A
    <br>TVA intra : TVA non applicable article 293 B du CGI
  </div>
</div>
</body>
</html>

Tu pourrais également faire une recherche sur l'utilisation des grid en HTML, ou encore regarder du coté de display:table-xxxx.

Envoyé par patricktoulon

l'affichage est bon mais on reviens au probleme de depart mon mouse over dans le css ne fonctionne plus

A l'explication que tu donnes sur le problème du mouseover/out, regarde si un élément ne recouvre pas tes boutons.

**patricktoulon** · 30/06/2013, 14h06

Bonjour nosmoking

je te remercie pour le temps que tu a passé a me repondre

de toute facons je suppose que je ne suis pas au bout de mes decouvertes

voila un exemple presque fini de la page devis tel que je veux qu'elle se presente sans les boutons pour le moment

tu remarquera que pratiquement tout les inputs n'ont plus le style inline
sauf quelques uns

la balises label quand on la domestique on peut faire beaucoup de chose

j'ai reussi a comprendre comment suprimer les espaces verticales entres les inputs mais ceux qui sont horizontals je n'y arrive pas

j'ai été obligé aussi d'utiliser le "position absolute" pour certains car c'etait difficile de les metres dans le css

cet exemplaire est sans doctype

avec "doctype ...." quelqu'il soit j'ai un defaut d'affichage

parcontre biensur! sans doctype je n'ai plus le hover sur les boutons

je remarque aussi forcement le poid du fichier qui est passé de 94K a 12K environ
c'est pas negligeable

je regarde un peu ton exemple pour comprendre

merci pour le retour

**patricktoulon** · 30/06/2013, 15h14

il n'y a qu'un mot a dire

respect!!

je constate qu'avec doctype html les dimensions sont differentes il faut seulement que je m'y habitue

j'ai un peu repris ton exemple en changeant quelque dimensions car a l'impression il falllait modifier le pourcentage les marges ect....

je les ai changer en pixel car "xxem" pour le moment c'est du chinois
que veux tu on change pas un vieux

j'ai aussi vu comment tu occupais un espace en invisible
ca change de mes "</br>"

alors c'est assez etonnant j'avais essayé de mettre "class="toto"" a l'interieur de l'input
comme tu l'a fait mais chez moi dans le css ca ne fonctionnait pas bon pour ca je n'ai pas d'explication peut etre par ce que c'est a l'interieur de la balise "P"

je vais essayer maintenant de placer la case date ainsi que la case client et sujet du devis de la meme maniere que tu l'a faite
on va bien rigoler enfin moins moi

j'essais de l'aboutir et je reviens

merci pour ton exemple qui ma plus qu'éclairé
+20 POINTS

**rodolphebrd** · 30/06/2013, 15h52

Je suis en train de jeter un coup d'oeil sur ton travail.
Attention de bien écrire ton code html en commençant ta page par:

Code html :

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

1
2
3
4
<!DOCTYPE HTML >
<html>
<head>
<meta charset="UTF-8">

L'encodage est important aussi....
Ne pas oublier la balise title.

ET puis je ne comprends pas pourquoi tu mets tous tes input dans des label...

Ce n'est pas l'exemple que t'a donné NoSmoking.

**patricktoulon** · 30/06/2013, 21h56

Bonsoir rodolphebrd

oui tout a fait je l'ai bien compris l'exemple de NoSmoking est du tonnerre me demontrant comment manipuler les (classes /div)dans le css ou les input/label/ect..)

il est vrai que selon le doctype les unités de mesure ne donne pas le meme effet et ne sont pas forcement respectées
c'etait ca le probleme pour moi ,il suffit de sy faire c'est tout

mais j'avoue que je commence a etre seduit de la puissance du css
jusqu'a present je n'ai que bidouiller avec le html mais sa m'interresse beaucoup

ca change du VB

je fini ma page et je reviens demain

merci a tout les deux en tout cas pour votre devouement

Au plaisir

**NoSmoking** · 30/06/2013, 22h31

Allez petit essai pour ton entête

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
  <div id="entete">
    <div id="gauche">
      <img src="http://www.developpez.net/template/images/logo.png" alt="logo">
      <p></p>
      <p></p>
      <p></p>
      <p><label>N° DEVIS :</label><input type="text"></p>
      <p><label>Objet :</label><input type="text"></p>
    </div>
    <div id="droite">
      <p></p>
      <p><label>Date :</label><input type="text"></p>
      <p><textarea></textarea></p>
      <p><label>Téléphone :</label><input type="text"></p>
      <p><label>N° Client :</label><input type="text"></p>
      <p></p>
    </div>
  </div>

avec le CSS suivant

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
#entete p{
  margin:0;
  padding:0;
  min-height:1.5em;
  line-height:1.5em;
}
#gauche{
  float:left;
  width:50%;
}
#gauche label{
  display:inline-block;
  width:6em;
  text-align:right;
}
#gauche input{
  display:inline-block;
  width:16em;
}
#droite{
  float:right;
  right:0;
  text-align:right;
}
#droite input{
  float:right;
}
#droite textarea{
  margin:0;
  padding:0;
  width:21em;
  height:10em;
  border:1px solid #888;
  resize:none;
  overflow:hidden;
}

ou un truc approchant.

Bonne continuation, ...mais cela dit si cela ne doit pas être partagé, au vu du contexte, une feuille excel me semblerait plus appropriée, d'autant qu'il y a lieu de sauvegarder les données saisies.

mais j'avoue que je commence a etre seduit de la puissance du css

on craque tous

**patricktoulon** · 01/07/2013, 15h48

Bonjour Nosmoking

je viens d'éssayer ton exemple entete gauche droite,tres seduisant
mais il y a un truc que je ne comprend pas
dans ton exemplaire la gauche est completement a gauche et la droite completement a droite de la page
et lors de l'apercu avant impression tout est ok avec un zoom de 100%
j'avoue que j'ai raté un épisode

dans l'exemplaire avec les imput le #contenu est plus petit sinon ca prend plusieur pages

ors je veux qu'il n'y ai pas de parametrage a faire pour l'imprimante
j'avoue que je ne comprend pas le pourquoi du comment

Bonne continuation, ...mais cela dit si cela ne doit pas être partagé, au vu du contexte, une feuille excel me semblerait plus appropriée, d'autant qu'il y a lieu de sauvegarder les données saisies.

on craque tous

oui figure toi que mon application d'origine est un fichier excel bourré de VBA
cela dit office 2007 32 bits a de plus en plus de mal a tourner avec une exploitation 64 bits vu les mises a jour me supprimant une a une les options de compatibilité

donc je suis en train de faire la meme chose dans un HTA

voila ou moi j'en etais avec ton exemplaire
il y a un souci au niveau du SUJET et un leger decalage sur la ligne total des que le height depasse 20px
ET UN exemplaire excel qui ma bien servi depuis 5 ans sans les macros

merci pour le temps passé a mon projet en tout cas

je continu

edit 2 minute plus tard:
je crois comprendre que

Code :

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

 float:right;

n'y est pas pour rien

**patricktoulon** · 03/07/2013, 18h54

Bonjour a tous
quelq'un pourrait me dire si le code CSS de ma page html est bien fonctionnel
voila le code

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
 
<!DOCTYPE HTML >
<html>
<head>
 
 <link rel="stylesheet" type="text/css" href="print.css" media="print">
<style>
 
.feuille{width:760px;height:1090px;border:2px solid red;}
 
.MON_MENU{position:absolute;left:900;top:10;border:2px solid orange;}
 
#lignetotal{clear:both;width:758px;height:21px;border-top:1px solid #888;}
 
#entete p{  margin:0;  padding:0;  min-height:21px;  line-height:21px;}
 
#gauche{  float:left;  width:380px;}
#gauche label{  display:inline-block;  width:6em;  text-align:right;}
#gauche input{  display:inline-block;  width:16em;}
#gauche .logo{height:120px}
#gauche .labgauche{height19px;border:1px solid #888;}
#gauche input{height:20px;border:1px solid #888;}
 
#droite{ height:190px;margin:0;  padding:0; display:inline-block;float:right;  right:0;  text-align:right;width:340px;}
 
#droite .titredate { float:left;height:18px;}
 
#droite .ldroite{border:1px solid #888;height:20px;border-left:1px solid #888;}
#droite .date{ width:150px;height:18px;text-align: center;border:1px solid #888; }
#droite .pcoordonnée_client{  float:right; width:250px;   height:18px; border-top:2px solid #888;border-right:2px solid #888;border-bottom:0px solid #888; border-left:2px solid #888; } 
#droite .coordonnée_client{   float:right;width:250px;  height:18px;  border-top:1px solid #888;border-right:2px solid #888;border-bottom:0; border-left:2px solid #888; } 
#droite .dcoordonnée_client{  float:right; width:250px;  height:18px;  border-top:1px solid #888;border-right:2px solid #888;border-bottom:0; border-left:2px solid #888; } 
#droite .espace{  visibility:hidden; width:200px;border:0;}
#droite .telclient{  float:right;border:0;}
#droite .tel{ width:223px;height:17px;text-align: center;border:1px solid #888;border-right:2px solid #888;border-bottom:0; }
#droite .titretel{border:1px solid #888;border-bottom:0;border-left:2px solid #888;border-right:0;}
#droite .numclient{  float:right;border:0;}
#droite .titrenum{height:20px;border:1px solid #888;border-bottom:2px solid #888;border-left:2px solid #888;border-right:0;}
#droite .num{ width:188px;height:17px;text-align: center;border:1px solid #888;border-left:1px solid #888;border-right:2px solid #888;border-bottom:2px solid #888; }
 
#contenu {clear:both;margin:0;  padding:0;width:760px;height:500px;}
 
#contenu .titre {height:25px;border-top:2px;}
#contenu  input, label {; margin:0;  padding:0;}
 
#contenu  .titre label{  display:inline-block;  height:25px;  line-height:25px;}
#contenu .titre label{  background:#EEF;  text-align:center;}
 
#contenu  .lignetotal{margin:0;  padding:0;}
#contenu .lignetotal{height:35px;float:right;}
#contenu .lignetotal  .ttt{ text-align: center; background:#EEF;width:146px;display:inline-block;  height:35px;  line-height:35px;  border:2px solid #888;border-right:1px solid #888;border-top:0;}
#contenu .lignetotal input{  display:inline-block;  height:35px;  line-height:35px; width:80px; border:2px solid #888;;border-top:0; border-left:0;}
 
 #contenu a .acol_1 {    width:80px;text-align: center;border-left:2px solid #888;border-top:2px solid #888;border-right:1px solid #888;border-bottom:0;}
 #contenu a .acol_2{    width:446px;border-top:2px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;}
 #contenu a .acol_3{   width:73px;text-align:center;border-top:2px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;}
 #contenu a .acol_4{   width:73px;text-align:center;border-top:2px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;}
 #contenu a .acol_5{   width:80px;text-align:center;border-top:2px solid #888;border-bottom:0; border-left:0;border-right:2px solid #888;}
 
 #contenu p .col_1 {   height:20px;width:80px;text-align: center;border-left:2px solid #888;border-top:1px solid #888;border-right:1px solid #888;border-bottom:0;}
 #contenu p .col_2{   height:20px; width:446px;border-top:1px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;}
 #contenu p .col_3{  height:20px;width:73px;text-align:center;border-top:1px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;}
 #contenu p .col_4{  height:20px;width:73px;text-align:center;border-top:1px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;}
 #contenu p .col_5{  height:20px; width:80px;text-align:center;border-top:1px solid #888;border-bottom:0; border-left:0;border-right:2px solid #888;}
 
 #contenu p .dcol_1 {   height:20px; width:80px;text-align: center;border-left:2px solid #888;border-top:1px solid #888;border-right:1px solid #888;border-bottom:2px solid #888;}
 #contenu p .dcol_2{    height:20px;width:446px;border-top:1px solid #888;border-right:1px solid #888;border-bottom:2px solid #888; border-left:0;}
 #contenu p .dcol_3{   height:20px;width:73px;text-align:center;border-top:1px solid #888;border-right:1px solid #888;border-bottom:2px solid #888; border-left:0;}
 #contenu p .dcol_4{  height:20px; width:73px;text-align:center;border-top:1px solid #888;border-right:1px solid #888;border-bottom:2px solid #888; border-left:0;}
 #contenu p .dcol_5{   height:20px;width:80px;text-align:center;border-top:1px solid #888;border-bottom:2px solid #888; border-left:0;border-right:2px solid #888;}
 
#empied{
  text-align:center;
  margin-bottom:1em;
  clear:both;
}
.rouge{
  color:#F00;
}
/**************************************************************************************/
						/*LESBOUTONS*/
 
			#bouton1{position:absolute;	left:900px;top:120px;width:200px;height:41px;background-color: red;color:yellow;}
 
			#bouton1:hover{background-color:yellow;color:red;  }
 
			 #bouton2 {position:absolute;left:900px;top:200px;width:200px;height:41px;background-color: orange;color:magenta;}
 
			#bouton2:hover {background-color:magenta;color:orange}
 
 
input[type=button]
 {
display: inline-block;
margin: 0;			 
border: 4px solid gray;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
font-family: 'Roboto Condensed', sans-serif;
font-size: inherit;
fontstyle:bold
}
 
input[type=button]:hover
 {
cursor: pointer;
-webkit-transition-property: background-color, color, border-color;
-webkit-transition-duration: 0.1s, 0.1s, 0.1s;
-webkit-transition-timing-function: linear, linear, linear;
-moz-transition-property: background-color, color, border-color;
-moz-transition-duration: 0.1s, 0.1s, 0.1s;
-moz-transition-timing-function: linear, linear, linear;
transition-property: background-color, color, border-color;
transition-duration: 0.1s, 0.1s, 0.1s;
transition-timing-function: linear, linear, linear;
 font-size:20px
 font-weight:bold
}
 
 
 
/**************************************************************************************/
</style>
<script type="text/javascript"> 
    function fermer() { 
      self.close(); 
      } 
 
function impression(){
self.print();
}
 
 
</script> 
 
</head>
<body>
 
<div class="MON-MENU">
			<input type='button' id="bouton1"   value='Imprimer' onclick="impression()";return false;" />
			<input type='button' id="bouton2" value='Fermer'onclick="fermer()";return false;"/>
		</div>
 
 
 
<div class="feuille">
<div id="entete">
 
    			<div id="gauche">
     			 <img class="logo" src="logo1.jpg" alt="Mon logo">
              		 	<p></p>
     	 		<p><label class="labgauche">N° Devis :</label><input type="text"></p>
     			 <p><label class="labgauche">Objet :</label><input type="text"></p>
    			 </div>
 
    		<div id="droite">
        		<p class="titredate"><label class="ldroite">Date :</label><input class="date" type="text"><label class="espace">---------------------------------------------</label></p>
		<p class ="client"><label class="espace">---------------------------------------------</label><input class="pcoordonnée_client" type="text"><input class="coordonnée_client"  type="text"><input class="coordonnée_client" type="text"><input class="dcoordonnée_client" type="text"></p>
		<p class="telclient"><label class="titretel">Tel:</label><input class="tel" type="text"></p>   
		<p class="numclient"><label class="titrenum">Client N°</label><input class="num" type="text"></p>   
     		</div>
 
 
	<div id="contenu">
	 <a class="titre"><label class="acol_1">Référence</label><label class="acol_2">Désignation des travaux</label><label class="acol_3">unité</label><label class="acol_4">T horaire</label><label class="acol_5">Total</label></a>
	<p><input class="col_1" type="text"><input class="col_2"  type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
	 <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
	 <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
	 <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
	 <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
	 <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
	 <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
	 <p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p>
 	<p><input class="dcol_1" type="text"><input class="dcol_2" type="text"><input class="dcol_3" type="text"><input class="dcol_4" type="text"><input class="dcol_5" type="text"></p>
	 <a class="lignetotal"><label class="ttt">Total du Devis</label><input  type="text"></a>
	 </div>
 
				<div id="empied">
   				 <br><strong class="rouge">Achat des matèriaux à la charge du client.</strong>
    				<br>TOTO-SERVICE- 277, Chemin de fond Résidence " lesPoulettes" - 83200 Toulon
    				<br><strong>Tél : 05 45 78 95 56</strong>
    				<br>E-mail:TOTO,service@hotmail,fr
    				<br>Individuelle au capital de 6500 €- SIRET : XXX XXX XXX XXXXX - Code APE YYYY A
    				<br>TVA intra : TVA non applicable article 293 B du CGI
  				</div>
 
</div>
</div>
 
</body>
</script>

merci pour le coup de main

hover sur un input bouton dans le css qui ne fonctionne pas

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager