Le blog de Luc

Étiquette : css

  • Les hacks CSS (memento)

    Les hacks CSS (memento)

    Voici un petit article qui peu servir à beaucoup de monde, même si l’abandon d’IE à apporté une bouffée d’oxygène à la création web, il reste des moments où des différences d’affichage se font sentir entre Firefox IE et WebKit (Safari, Chrome et bientôt Opéra).

    Voici des éléments à ajouter à votre feuille de style CSS pour appliquer des rendu spécifiques à certain moteurs.

    On commence par WebKit avec par exemple une marge de 10 px :

    CSS
    6 lines
    1
    2
    3
    4
    5
    6
    @media screen and (-webkit-min-device-pixel-ratio:0)
    {
        #monId {
            margin : 10px;
        }
    }
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    Pour Firefox :

    CSS
    6 lines
    1
    2
    3
    4
    5
    6
    @-moz-document url-prefix()
    {
         #monId {
            margin : 10px;
        }
    }
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    Le plus Courant, un Hack pour IE :

    HTML
    5 lines
    1
    2
    3
    4
    5
    <!--[if lt IE 8]>
    <br />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%23monId%20%7B%0A%20%20%20%20%20margin%20%3A%2010px%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
    <p>
    < ![endif]-->
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

  • Ce mardi je vous emmène au casino !

    C’est avec ce code source que vous allez pouvoir jouer au « Bandit manchot ». Il est séparé en deux parties, le Html et le JavaScript.

    Pour voir le résultat, cliquez ici.

    Le code Html :

    HTML
    61 lines
    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
    <body>
    <br />
    <div id="globale">
    <br />
    <div id="contenu">
    <br />
    <div id="levier2">
                    <input type="image" value="·" onclick="lancer_jeu();" id="levier"/>
                </div>
    <p>
    <br />
    <div id="resultat">
    <br />
    <p id="affichage_gains">
                    ---
                    </p>
    <p>
                </div>
    <p>
    <br />
    <div id="pot">
    <br />
    <p class="vert">votre pot <br />est de :
                    </p>
    <p>
    <br />
    <p id="affichage_pot">100
                    </p>
    <p>
    <br />
    <p class="vert">mise :
                    </p>
    <p>
    <br />
    <p id="affichage_mise">0
                    </p>
    <p>
                </div>
    <p>
    <br />
    <div id="jackpot">
                    <img name="s1" src="media/theme/slot-vide.png" alt="slot-vide"/>
                    <img name="s2" src="media/theme/slot-vide.png" alt="slot-vide"/>
                    <img name="s3" src="media/theme/slot-vide.png" alt="slot-vide"/>
                </div>
    <p>
    <br />
    <div id="boutons">
                    <input onclick="miser();" type="image" src="media/theme/mise-plus.png" id="miser1"/>
                    <input onclick="tout_miser();" type="image" src="media/theme/mise-tout.png" id="miserall"/>
                </div>
    <p>
            </div>
    <p>
        </div>
    <p>
    </body>
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    Le code JavaScript :

    JavaScript
    113 lines
    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
    var mise = 0;
    var pot = 100;
    var gains = 0;
    // nombre de slots
    var nombre_slots = 3;
    // declaration d'un tableau avec "slots" comme valeur
    var slots = new Array(nombre_slots);
    //dclaration de la valeur des slots
    var valeur_des_slots = 0;
    function lancer_jeu()
    {
        if (mise == 0) return;
        // rinitialisation de la valeur des slots
        valeur_des_slots = 0;
        // creation et remplissage du tableau
        for (var index = 0; index < nombre_slots; index++) { slots[index] = tirer_aleatoirement_image(); } s1.src=slots[0]; s2.src=slots[1]; s3.src=slots[2]; calculer_gains(); } //Cette fontion sert pour augmenter la valeur du pot function garder_gains() { if (valeur_des_slots > 0)
        {
            //alert('Vous avez Gagné !!!'); // Affiche une box avec le message "Vous avez Gagné"
            pot = pot + gains;
        }
    }
    //fonction pour tirer alatoirement une image
    function tirer_aleatoirement_image()
    {
        var nombre_images = 4;
        // nom de toutes les images d'un slot
        var images = new Array("./media/slot/slot-euro.png","./media/slot/slot-cerise.png","./media/slot/slot-etoile.png","./media/slot/slot-couronne.png");
        // tirage de l'alea
        var alea = Math.floor(Math.random()*nombre_images);
        // recuperation du nom de l'image dans le tableau
        var slot = images[alea];
        // mise  jour de la valeur des slots
        valeur_des_slots = (Math.pow(10,alea)) + (valeur_des_slots);
        return slot;
    }
    function calculer_gains()
    {
        //je fais un switch case pour savoir quels sont mes gains
        switch(valeur_des_slots)
        {
            case nombre_slots:
                gains = mise*20;
                alert('jackpot');
                garder_gains();
                break;
            case nombre_slots * 1000:
                gains =  mise*15;
                garder_gains();
                break;
            case nombre_slots * 100:
                gains = mise*10;
                garder_gains();
                break;
            case nombre_slots * 10:
                gains = mise*5;
                garder_gains();
                break;
            case 12:
            case 102:
            case 1002:
                gains = mise*2;
                garder_gains();
                break;
            default:
                gains = 0;
                break;
        }
    // rechargement automatique de la mis tant que le pot est plein (plus ergonomique)
        mise = 0;
        if (pot > 0)
        {
            pot -= 1;
            mise = 1;
        }
        document.getElementById("affichage_pot").innerHTML = pot;
        document.getElementById("affichage_gains").innerHTML = gains;
        document.getElementById("affichage_mise").innerHTML = mise;
    }
    function miser()
    {
        if (pot > 1)
        {
            pot -= 1;
            mise += 1;
            document.getElementById("affichage_pot").innerHTML = pot;
            document.getElementById("affichage_gains").innerHTML = gains;
            document.getElementById("affichage_mise").innerHTML = mise;
        }
    }
    function tout_miser()
    {
        if (pot > 1)
        {
            mise += pot;
            pot = 0;
            document.getElementById("affichage_pot").innerHTML = pot;
            document.getElementById("affichage_gains").innerHTML = gains;
            document.getElementById("affichage_mise").innerHTML = mise;
        }
    }
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    Le code css :

    CSS
    131 lines
    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
    *
    {
        margin: 0;
        padding: 0;
    }
    p
    {
        font-family: Arial;
    }
    /*------------------divs---------------------*/
    #globale
    {
        width: auto;
        height: auto;
    }
    #contenu
    {
        position: relative;
        top:25px;
        margin-left:auto;
        margin-right: auto;
        background: url(../theme/fond.png) no-repeat;
        width: 642px;
        height: 426px;
    }
    #levier
    {
            float: right;
            width: 96px;
            background: url(../theme/levier-depart.png) no-repeat;
            width:100px;
            height:300px;
    }
    #levier2
    {
            float: right;
            width: 96px;
    }
    #levier:hover
    {
        background: url(../theme/levier-milieu.png) no-repeat;
    }
    #levier:active
    {
        background: url(../theme/levier-jouer.png) no-repeat;
    }
    #jackpot
    {
        float:right;
        top:30px;
        position:relative;
        right:30px;
    }
    #resultat
    {
        position: relative;
        background:url(../theme/resultat.png) no-repeat;
        width: 532px;
        height: 61px;
        margin-left:6px;
        top:20px;
    }
    #resultat p
    {
        font-size: 30px;
        top:15px;
    }
    #result-tirage
        {
            position: relative;
            float: right;
            width:auto;
            top:35px;
            right:40px;
        }
    #pot
    {
        position: relative;
        background:url(../theme/mise.png) no-repeat;
        width: 149px;
        height: 199px;
        float:left;
        top:40px;
        margin-left: 7px;
    }
    #pot p
    {
        font-size: 15px;
        top:35px;
        margin-top: 10px;
    }
    #boutons
    {
        position: relative;
        top:50px;
        float: left;
        left:90px;
        width: auto;
        height: auto;
    }
    #affichage_gains
    {
        position: relative;
        color:green;
        text-align: center;
    }
     #affichage_pot
    {
            position: relative;
            color:green;
            text-align: center;
    }
    #affichage_mise
    {
            position: relative;
            color:green;
            text-align: center;
    }
    /*------------------------------classes--------------------*/
    .vert
    {
            position: relative;
            color:green;
            text-align: center;
    }
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    Grand maître L