AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Comment créer une DIV?

    Partagez
    avatar
    Skyleen
    FémininAge : 25Messages : 476

    le Mar 8 Jan 2013 - 18:35

    Rappel du premier message :



    COMMENT CREER UNE DIV?

    Bonjour à tous,
    Étant donner que je me tourne complètement vers le codage, j'ai eu l'envie de faire ce petit tutoriel qui pourrait aider beaucoup de débutant. Ainsi je vais essayer de vous apprendre au moins quelques bases assez importantes dans le domaine du HTLM et CSS. Rien de bien très glorieux en effet mais au moins, cela vous sera très utile pour tous vos projets à l'avenir. Comme je n'ai pas vue de tutoriel sur le forum concernant la balise Div, je m'y met donc. Bonne lecture en espérant que vous apprécierez.
    Pour voir la leçon, un petit merci s'impose =)
    Qu'est-ce qu'une " DIV" ?

    La balise < div> ( signifiant division ) est utilisé pour diviser des documents ou éléments en plusieurs sections. Ces dernières seront alignées de différentes façon selon le style où le css utiliser. ( D'après mes recherches sur google, cette balise avait sur les premiers navigateur pour unique attribut : Align. ) Aujourd'hui la balise < div> est celle qui est le plus utiliser et désormais, plusieurs attribut lui on été attribué.

    En voici quelque unes :

    id="..." : sert d'identificateur global.
    class="..." : une liste de classe séparer par des espaces.
    style="..." : une information locale de style
    align="..." : contrôle l'alignement : left, right, center et justify

    Sachez aussi que la balise < div> est très similaire à la balise < span> mais < div> a sa propre distinction importante : elle peut encadrer tout un bloc d'un élément mais elle occasionne toujours un saut à la ligne ce qui peut parfois gêner pour ceux qui n'en connaissent pas tout les rouages. Elle peut contenir des paragraphes, des titres, des tableaux, et même d'autres divisions. Ce qui fait de < div>, la balise idéale pour marquer différentes sortes de blocs tel qu'un chapitre, un résumé ou une note.

    Maintenant que vous savez à quoi sert cette balise, nous allons apprendre ensemble comment en créer une de toute pièce.

    Tout d'abord il nous faut une balise < div> Ce qui vous donnera ceci :
    Code:

    <div>  TEXTE </div>

    Mais ça ne nous donne pas grand chose vu qu'elle n'a ni attribut, ni de css. Nous allons donc y remédier en lui donnant l'attribut qui pourra beaucoup vous aider dans la création de vos fiches où autres.

    Code:
    <div class="..."> TEXTE </div>

    Encore une fois vous ne verrez pas de changement car votre attribut n'a pas d'élément créer dans votre CSS. Pour ce faire, allez sur votre forum et faites ceci : Panneau d'administration > Affichage > Couleur > Feuille de Style CSS.

    Dans votre fiche vous allez créer l'élément qui ira avec votre attribut. Pour ce faire, voici ce que nous devons faire.

    Code:
    .nom de votre element {
    ...
    }

    <div class="nom de votre element"> Texte </div>

    Exemple :

    Code:
    .skyleen {
    ...

    }

    <div class="skyleen"> TEXTE </div>

    Votre < div> est créer et votre base de CSS aussi. Maintenant il faut décorer votre < div> via des éléments de css.


    Exemple :

    Code:
    .skyleen {
    width : 200px;
    height: 20px;
    background: #ffffff;
    center;color: red;

    }

    <div class="skyleen"> TEXTE </div>

    Ce qui vous donne ceci :
    TEXTE


    Mais il faut vous rappeller ce qui se passe si vous mettez deux < div> côte à côte.

    TEXTE
    TEXTE


    Automatiquement elles iront à la ligne. Pour remédier vous devrez ajouter deux éléments.
    Celle-ci à votre élément de css :

    Code:
    {float : left; }

    et celle-ci à la fin de votre balise :

    Code:
    <div style="clear:both"></div>

    Ce qui doit vous donner ceci au totale :


    Code:
    .skyleen {
    width : 200px;
    height: 20px;
    background: #ffffff;
    center;color: red;
    float : left;

    }

    <div class="skyleen"> TEXTE </div>
    <div style="clear:both"></div>

    Exemple :

    TEXTE
     
    TEXTE


    Et voilà ! Vous savez créer une balise < div> et vous savez aussi comment éviter le retour à la ligne. Merci beaucoup pour avoir lu tout ceci et pardon pour mon manque de temps à corriger tout ce charabia. A bientôt :)



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    avatar
    Kathee
    FémininAge : 24Messages : 664

    le Lun 9 Sep 2013 - 3:23

    Merci, prof !^^





    Nous serions ravis de vous accueillir - Venez donc voir ce petit petit fofo
    avatar
    Tekesuta
    FémininAge : 22Messages : 33

    le Dim 29 Sep 2013 - 15:25

    sankyouu!
    avatar
    HeartLessB
    FémininAge : 19Messages : 78

    le Jeu 24 Oct 2013 - 16:04

    Merci
    avatar
    Evydence
    FémininAge : 20Messages : 60

    le Ven 1 Nov 2013 - 1:22

    Merci !
    avatar
    Shadoxx
    MasculinAge : 22Messages : 20

    le Sam 2 Nov 2013 - 15:58

    Merci. :3



    avatar
    KosukeMurakawa
    MasculinAge : 22Messages : 8

    le Dim 19 Jan 2014 - 19:44

    merci
    fascicularia
    MasculinAge : 49Messages : 181

    le Sam 25 Jan 2014 - 2:56

    Merci pour le partage
    avatar
    Asunie
    FémininAge : 25Messages : 68

    le Dim 30 Mar 2014 - 14:16

    Merci !
    avatar
    Jeff`22
    MasculinAge : 16Messages : 34

    le Ven 25 Juil 2014 - 14:28

    Merci beaucoup, je pense déjà connaitre le contenu du tutoriel mais revoir les bases, c'est toujours bien ! c:
    avatar
    SEVAN
    FémininAge : 25Messages : 46

    le Lun 1 Sep 2014 - 12:11

    merci !
    avatar
    skyfighter
    MasculinAge : 34Messages : 350

    le Jeu 16 Oct 2014 - 15:31

    merci





    avatar
    Merwyn Arehdel
    FémininAge : 17Messages : 298

    le Dim 19 Oct 2014 - 18:29

    Merci ^^



    Just want to be yours.
    avatar
    Panddora
    FémininAge : 19Messages : 25

    le Dim 4 Jan 2015 - 13:58

    Merci!:)




    avatar
    Ryukaï
    MasculinAge : 19Messages : 613

    le Sam 24 Jan 2015 - 22:56

    J'aime les bananes!



    avatar
    Malf Claymore
    FémininAge : 23Messages : 125

    le Dim 1 Fév 2015 - 11:28

    merci beaucoup très utile comme tuto
    avatar
    Fartiny
    FémininAge : 19Messages : 119

    le Dim 1 Mar 2015 - 19:28

    Merci c:
    avatar
    Chocolakato
    FémininAge : 27Messages : 785

    le Mer 20 Mai 2015 - 19:30

    Eeet eh merci Very Happy



    avatar
    picka234
    Age : 52Messages : 440

    le Lun 22 Juin 2015 - 12:38

    merci



    avatar
    Ju' de fruits
    FémininAge : 24Messages : 82

    le Sam 19 Sep 2015 - 13:50

    Merci !



    avatar
    Kelalin
    FémininAge : 24Messages : 1584

    le Dim 20 Sep 2015 - 22:49

    Merci (*≧▽≦)
    avatar
    Invité

    le Lun 23 Nov 2015 - 12:08

    merci :)
    avatar
    Invité

    le Mer 25 Nov 2015 - 0:34

    S.V.P. et merci ! :)
    avatar
    Nyhnn
    FémininAge : 17Messages : 15

    le Lun 4 Jan 2016 - 21:05

    Merci! Very Happy
    avatar
    Abby Reever
    FémininAge : 25Messages : 115

    le Mer 13 Jan 2016 - 21:59

    roh ca c'est cool! Merci!
    avatar
    Lizbeth
    FémininAge : 20Messages : 162

    le Mar 26 Jan 2016 - 15:31

    Merci, je commence enfin mon apprentissage du codage ! :ange:
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Sep 2017 - 2:23