Usage: Si utilisé avec le mode "scale", il faut que l'élément qui le contient ait un height:100% pour que le height soit "computed", parce que le mode scale se fie au computed height (celui donné explicitement par le CSS).--- crop Clips the image to fit the dimensions of the object. image Default. Enlarges or reduces the border of the object to fit the dimensions of the image. scale Stretches or shrinks the image to fill the borders of the object.***
1 <!--[if lt IE 7]>
2 <style>#logo{
3 background:none;
4 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fond.png", sizingMethod="scale");
5 }</style>
6 <![endif]-->
C'est une méthode simple pour transformer les liens en boutons. Cette méthode n'a rien d'original mais elle permet d'obtenir le même affichage sous IE et mozilla. Sans vrai bidouille au niveau du CSS. Attention au texte dans le bouton, il peut dépasser d'un navigateur à l'autre. L'astuce vient de l'encapsulation de la ligne de boutons dans un "div" de hauteur fixe.
1 Partie HTML :
2 <div id="Menu1Ligine">
3 <div class="ElementMenu">
4 <a href="First.html">One</a>
5 </div>
6 <div class="ElementMenu">
7 <a href="Second.html">Two</a>
8 </div>
9 </div>
10
11 Partie CSS :
12 .ElementMenu a {
13 float : left;
14 padding : 3px;
15 min-width: 120px;
16 width: 120px;
17 height: 18px;
18 text-align: center;
19 text-decoration: none;
20 border:1px solid #FCC212;
21 margin : 3px;
22 color: #000000;
23 }
24
25 .ElementMenu a:hover {
26 background-color:#EEA60D;
27 border:1px solid #FCC212;
28 color: #FFFFFF;
29 }
30
31 .ElementMenu a:active {
32 background-color:#EEA60D;
33 border:1px solid #FCC212;
34 color: #FFFFFF;
35 }
36
37 #Menu1Ligine {
38 display : block;
39 margin : 0px;
40 height : 25px;
41 padding-top : 95px;
42 }
Pages : 1