AccueilDernières imagesRechercherS'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.

-46%
Le deal à ne pas rater :
Oceanic OCEAB120W Batteur électrique – Blanc
7.51 € 13.91 €
Voir le deal

    Comment créer une DIV?

    Skyleen
    Skyleen
    FémininAge : 31Messages : 476

    Mar 8 Jan - 18:35



    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
    Graph
    Graph"X"
    MasculinAge : 38Messages : 268

    Lun 25 Fév - 8:05

    merci



    Comment créer une DIV? 906554signaturegraphXAnonymous
    Comment créer une DIV? 3150065406_1_2_RyY9oMWP
    Comment créer une DIV? 3150229838_1_2_05FjnHrV
    Mon forum Reptile:

    bianca ~♥~
    bianca ~♥~
    FémininAge : 55Messages : 111

    Mer 13 Mar - 13:53

    merci ^^



    Comment créer une DIV? Coco_c11
    Isalia
    Isalia
    FémininAge : 24Messages : 125

    Mer 13 Mar - 15:27

    Merci.
    LuxAeterna
    LuxAeterna
    FémininAge : 45Messages : 99

    Mer 13 Mar - 15:28

    Merci Very Happy

    EDIT

    Merci beaucoup, ton explication est limpide !
    Coconut Dynamite
    Coconut Dynamite
    FémininAge : 31Messages : 149

    Mer 13 Mar - 21:59

    Merci pour ce tutoriel !
    Capouccino
    Capouccino
    FémininAge : 26Messages : 204

    Sam 23 Mar - 15:53

    Danke o/



    "Espérer l'inespérable c'est croire en l'impossible."
    Crown
    Crown
    MasculinAge : 28Messages : 16

    Dim 24 Mar - 12:11

    Merci d'avance :)



    Comment créer une DIV? Sign_110
    Capouccino
    Capouccino
    FémininAge : 26Messages : 204

    Dim 24 Mar - 14:25

    Salut ^^ C'est re moi o/
    J'aurais bien une question. Est-il possible de créer une DIV sans passer par la feuille de style CSS et le panneau d'administration ?
    En gros, la créer directement dans le message ?



    "Espérer l'inespérable c'est croire en l'impossible."
    fregadeth
    fregadeth
    MasculinAge : 47Messages : 80

    Jeu 28 Mar - 20:09

    merci
    Joxtop
    Joxtop
    FémininAge : 32Messages : 47

    Sam 30 Mar - 19:27

    Merci ♥
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Sam 30 Mar - 19:40

    Merci cela va en aider plus d'un :)
    TheHG
    TheHG
    FémininAge : 29Messages : 52

    Mer 17 Avr - 23:37

    Merci beaucoup ! :)
    Leelo'
    Leelo'
    FémininAge : 23Messages : 28

    Jeu 18 Avr - 16:14

    Merci **



    Comment créer une DIV? Ma_sig11
    Skyleen
    Skyleen
    FémininAge : 31Messages : 476

    Sam 20 Avr - 23:33

    Merci pour tout vos remerciements.

    MoiSadike > Bonne question c'est très simple. Pour utilisé une Div sans touché à la feuille de style, il te faut donc procéder comme ceci :

    Code:
    <div style="ton css ">  ....</div>

    style remplace donc " classe " qui lui était utilisé pour ton css. Voilou =)



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    Kruzoé
    Kruzoé
    FémininAge : 29Messages : 30

    Dim 21 Avr - 11:02

    merci :)
    Kashmeer
    Kashmeer
    FémininAge : 35Messages : 15

    Mar 23 Avr - 9:53

    Merci pour ce tuto que je vais lire attentivement ^^
    Katsumi
    Katsumi
    FémininAge : 26Messages : 12

    Mer 1 Mai - 3:08

    Merci !
    Nithz
    Nithz
    MasculinAge : 32Messages : 32

    Mer 1 Mai - 13:44

    merci



    Comment créer une DIV? Signat10
    Ailee
    Ailee
    FémininAge : 27Messages : 32

    Mer 1 Mai - 13:48

    Merci beaucoup Very Happy



    Comment créer une DIV? Aileebybolt-3c9cfb1
    Anonymous
    Invité

    Lun 20 Mai - 0:33

    merci
    Hessnellia
    Hessnellia
    FémininAge : 28Messages : 18

    Mar 21 Mai - 7:40

    Merci beaucoup !
    Brodette
    Brodette
    FémininAge : 26Messages : 119

    Ven 31 Mai - 18:23

    Merci beaucoup Very Happy



    Comment créer une DIV? Ariel10
    Faucon
    Faucon
    FémininAge : 24Messages : 64

    Sam 22 Juin - 15:08

    Ow :ange: Merci ♥
    Morrigan
    Morrigan
    FémininAge : 30Messages : 22

    Dim 23 Juin - 14:30

    Merci beaucoup ♥
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar - 10:34