• Le minimum à savoir avant d'attaquer cette partie :
    - Créer une classe 
    - L'utiliser dans une page html

    Créer une classe                                      Balise div


    Vous avez bien lu? Ok, alors on va voir comment combiner les deux (même si je pense que vous avez déjà une petite idée)

    On va travailler avec div. Tout d'abord, créer une classe de type boite en css.

    On a vu que, devant le nom du sélecteur, on pouvait mettre un point ou un dièse. Je ne me sert presque jamais des dièse dans ekla, mais c'est bien de savoir l'utiliser si vous avez envie de créer un site web. Bref, on sais également qu'il faut mettre un ou des attribut avec div. Les deux qui nous intéresse pour faire apparaître notre objet dans une page, ce sont "class" et "id". Vous commencez a comprendre?

    Si ma classe, est précédé d'un point, je le fais apparaître avec l’attribut "class" 
    Si ma "classe" est précédé d'un dièse, je le fais apparaitre avec l'attribut "id". Et dans ce cas, on dit que c'est un identifiant

    Voici le code pour ceux qui ont besoin d'un exemple:

    CSS
    .boite{ width: 40%;
               border: 1px double black;
               box-shadow: 0px 0px 10px #de510f;
               padding: 5px 15px 5px 15px;
               margin: 5px 5px 5px 15px;
               color: black;
               background-image: url("http://ekladata.com/3XiUMiigLjJ0MbKR4SHbxwsS6WE.jpg");}
    HTML
    <div class="boite">Blabla d'exemple </div>


    Ce qui me donne:

    Blabla d'exemple



    Si vous ne voulez qu'un texte personnalisé, on utilise une autre balise : <span> 
    Cela fonction exactement de la même manière qu'avec <div>, sauf que l'on remplace "div" par "span" ;)


    51 commentaires
  • La scrollbar, c'est la barre a droite des pages internet qui permet de monter ou de descendre. Mais on peut aussi l’utiliser dans des bloc grace à la balise <div>. Voilà un exemple:

    Un titre
    Blablablablablablablablabla

    Une image


    Vous pouvez par exemple l'utiliser dans vos modules qui ont beaucoup de contenu pour ne pas allonger inutilement vos pages.

    <div style="width: LARGEURpx; height: HAUTEURpx; overflow-x: auto; overflow-y: auto;">CONTENU</div>

    Les seules valeurs à modifier sont indiquées en rouge, c'est HAUTEUR et LARGEUR (un nombre de pixel).

    Votre texte/image/autre se place dans CONTENU


    76 commentaires
  • Voici un code HTML tout simple pour faire défiler des éléments (texte, images...) de façon automatique :


    Par exemple comme ça. Une fois arrivé au bout de la ligne, le défilement recommence
    CODE :

    <marquee direction="left" scrollamount="X" >CONTENU</marquee>


    "direction" indique le sens du défilement. Il peut prendre les valeur "left" (vers la gauche), "right" (vers la droite), "up" (vers le haut) et down (vers le bas)
    "scrollamount" indique la vitesse du défilement. Plus le nombre est grand, plus le défilement sera rapide. Dans l'exemple, j'ai utilisé scrollamount="3"


    72 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique