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 :

    @media screen and (-webkit-min-device-pixel-ratio:0)
{
    #monId {
        margin : 10px;
    }
}

    Pour Firefox :

    @-moz-document url-prefix()
{
     #monId {
        margin : 10px;
    }
}

    Le plus Courant, un Hack pour IE :

    <!--[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]-->

  • 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 :

    <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>

    Le code JavaScript :

    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;
    }
}

    Le code css :

    *
{
    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;
}

    Grand maître L