Affichage en réduction icones

**mariok** · 11/11/2014, 11h40

bonjour

voila j'utilise ce code CCS3

Code html :

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

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

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
ul.flatflipbuttons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}
 
ul.flatflipbuttons li{
margin:0;
display: inline-block;
width: 100px; /* dimensions of buttons. */
height: 100px;
margin-right: 15px; /* spacing between buttons */
background: none;
/**text-transform: uppercase;**/
text-align: center;
}
 
ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
margin-bottom: 4px;
color: black;
background: none;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
 
ul.flatflipbuttons li:nth-of-type(1) a{
color: none;
background: none;
}
 
ul.flatflipbuttons li:nth-of-type(2) a{
background:none;
}
 
ul.flatflipbuttons li:nth-of-type(3) a{
background: none;
}
 
ul.flatflipbuttons li:nth-of-type(4) a{
color: white;
background: none;
}
 
ul.flatflipbuttons li:nth-of-type(5) a{
background: none;
}
 
ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
 
ul.flatflipbuttons li b{ /* CSS for text beneath button */
display: block;
position: relative;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.2s;
}
 
 
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}
 
 
ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: none; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
 
ul.flatflipbuttons li:hover a span{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
 
 
ul.flatflipbuttons li:hover b{
opacity: 1;
}
 
/* CSS for 2nd menu below specifically */
 
ul.second li a{
background: #eee !important;
}
 
ul.second li a:hover{
background: #ddd !important;
}

avec une mise en page PHPPB2 (xooit)

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
 
/*****  Debut blocs du bas *****/ 
 
<table width="50%" border="1" align="left" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
     <th valign="middle" height="28" align="center" class="thHead" colspan="3">
       <span class="thHead"><font color="#FFFFFF">Réferences légales</font></span>
     </th>
    </tr>
   <tr>
     <td class="row1">&nbsp;</td>
       <td width="100%" height="25">
         <table width="100%" cellspacing="0" cellpadding="0"> 
           <tbody>
            <tr>
              <td valign="top" class="row1">
               <span class="gen">
                <center>
                <ul class="flatflipbuttons">
                <li><a href="https://www.phpbb.com/" TARGET="_blank"><span><img src="http://img.xooimage.com/files110/0/c/e/phpbbcom-copie-487e1e0.png"></span></a>phpbb.com</li>
                <li><a href="http://www.phpbb-fr.com/"TARGET="_blank" ><span><img src="http://img.xooimage.com/files110/c/b/d/phpbbfr-copie-487e200.png"></span></a>phpbb.fr</li>
                <li><a href="http://www.amarid.fr" TARGET="_blank" ><span><img src="http://img.xooimage.com/files110/f/6/6/amarid-487e315.png"></span></a> © AMARID</li>
                </ul>
              </center>
             </span>
            </td>
          </tr>
  </tbody>
</table>
  </td>
<td class="row1">&nbsp;</td>
 </tr>
 </tbody>
</table>
<table width="50%" cellspacing="0" cellpadding="0" border="1">
  <tbody>
    <tr>
      <th valign="middle" height="28" align="center" class="thHead" colspan="3">
        <span class="thHead"><font color="#FFFFFF">Suivez nos différents réseaux sociaux</font></span>
      </th>
    </tr>
     <tr>
 
<td class="row1">&nbsp;</td>
 
       <td width="100%" height="25" /**class="row5"**/>
         <table width="100%" cellspacing="0" cellpadding="0"> 
          <tbody>
           <tr>
         <td valign="top" class="row1">
          <span class="gen">
            <center>
             <ul class="flatflipbuttons">
             <li><a href="https://twitter.com/amarid2" TARGET="_blank"><span><img src="http://img.xooimage.com/files110/1/8/d/twitter-487e612.png"></span></a>Twitter</li>
             <li><a href="https://www.facebook.com/amarid.associationnationaleamarid?fref=ts" TARGET="_blank"><span><img src="http://img.xooimage.com/files110/1/a/1/facebook-487e605.png"></span></a>Facebook</li>
             <li><a href="https://plus.google.com/u/0/"TARGET="_blank"><span><img src="http://img.xooimage.com/files110/0/d/6/google-487e61b.png"></span></a>Google +</li>
             </ul>
           </center>
          </span>
        </td>
          </tr>
        </tbody>
       </table>
      </td>
 
<td class="row1">&nbsp;</td>
 
</tr>
</tbody>
</table>
/****  fin blocs du bas ******/

voila mon problème c'est des que je change la taille des icônes en remplaçant 100px par 60 px cela me donne ceci

Nom : Capture d’écran 2014-11-11 à 11.44.51.png
Affichages : 81
Taille : 80,5 Ko

Nom : Capture d’écran 2014-11-11 à 11.44.51.png
Affichages : 81
Taille : 80,5 Ko

quelqu'un aurait il une solution

merci pour vos réponses

**NoSmoking** · 11/11/2014, 21h35

Bonjour,
il apparaît dans le cadre de gauche que le texte passe à la ligne dans ce cas, il te faut donc réduire la police.
Dans les cadres de gauche et droite il te faut réduire la largeur de tes '"icones".

Dans tous les cas il te faut adapter le contenu au contenant.

**mariok** · 11/11/2014, 23h00

Bonsoir
d abord merci pour ta reponse mais quelles sont les variables a modifiees

Invité · 12/11/2014, 12h09

Bonjour,

une icône est censée se suffire à elle-même : inutile de surcharger avec un texte.

Par contre, il est judicieux de mettre ce texte dans l'attribut alt et/ou title de l'icône !
Au lieu de :

Code html :

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

<li><a href="https://www.phpbb.com/" TARGET="_blank"><span><img src="http://img.xooimage.com/files110/0/c/e/phpbbcom-copie-487e1e0.png"></span></a>phpbb.com</li>

Préférer :

Code html :

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

<li><a href="https://www.phpbb.com/" TARGET="_blank"><span><img src="http://img.xooimage.com/files110/0/c/e/phpbbcom-copie-487e1e0.png" alt="phpbb.com" title="accédez à phpbb.com" /></span></a></li>

Et pour info, une balise img est auto-fermante : <img src="..." alt="..." />

**mariok** · 13/11/2014, 22h22

Merci pour ta réponse etant absent depuis deux jours je testerais cela demain

Affichage en réduction icones

CSS

Discussions similaires

Partager

Partager