image over sur css avec button et texte

**pcouas** · 27/02/2008, 06h06

Bonjour

j'ai recupere sur un site un css et html pour faire des coins rond http://alistapart.com/articles/customcorners/ , cela fonctionne .
Ensuite j'ai integre cela dans un tag button, afin que mon bouton est des coins ronds, et soit auto agrandissable en fonction du texte.
Je n'ai pas mis une image, car je dois traduire le texte du bouton qui est à cote de l'image.
J'ai pris un tag "button" et non href a cause du fait que je dois pouvoir disabeler le bouton ou le cacher
Mon probleme actuel est que je ne peux pas faire de rollover sur mon image.
J'ai bien essaye le hover, mais sans succes
Voici mon source actuel sans le hover

Merci d'avance
Philippe

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
<!--  contentType="text/html; charset=UTF-16" -->
 
 
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 
  <meta http-equiv=Accept-Language CONTENT="fr" />
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
body{
margin: 0;
padding: 0;
border: 0;
height: 100%;
max-height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #cbdea8;
}
 
 
 
/* Style du bloc avec angles arrondis*/
div.bloc {
    background: url('custom_corners_topleft.gif') top left no-repeat;
    display: table;
}
 
div.blocp {
    background: url('custom_corners_topright.gif') top right no-repeat;
    padding: 10px 13px .2em 15px;
    padding-bottom: 0px;
        padding-top: 5px;
    margin: 0;
}
 
div.bloccorps {
    background: url('custom_corners_rightborder.gif') top right repeat-y;
    margin: 0;
    margin-top: -25px;
    padding: 15px 15px 0 15px;
}
div.blocpied {
    background: url('custom_corners_bottomleft.gif') bottom left no-repeat;
}
 
div.blocpied p {
    background: url('custom_corners_bottomright.gif') bottom right no-repeat;
    padding: 5px 15px 13px 15px;
    display: block;
    margin: -0px 0 0 0;
    text-align: center;
}
 
 
a.bouton,
button.bouton {
    display:-moz-inline-box;
    display:inline-block;
    margin:0;
    padding:0;
    font:16px/1.5 Trebuchet MS, Arial, Helvetica, sans-serif;    /* Police du bouton */
    white-space:nowrap;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    border:0;
    background:none;
}
 
</style>
 
 
</head>
<body>
 
<button class="bouton" id="precsuive4" accesskey="I" >
<div class="bloc">
  <div class="blocp">
 
<table><tr><td><img src="maison.png" width="24" height="24" border="0" onmouseover="this.src='graph1.png'" onmouseout="this.src='maison.png'" /></td><td><u>I</u>nfodev</td></tr></table>
  </div>
  <div class="bloccorps">
  </div>
  <div class="blocpied">
  <p></p>
  </div>
</div>
</button>
</BODY>
</HTML>

**Erwan31** · 27/02/2008, 14h35

Bonjour,
avant toute chose suppimez la ligne du charset au dessus du doctype, celle-ci
fait basculer IE en mode Quirks, désolé pas le temps d'expliquer.

image over sur css avec button et texte

CSS

Discussions similaires

Partager

Partager