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.

Le deal à ne pas rater :
Nike : Jusqu’à 50% sur les articles de fin de saison
Voir le deal

    Comment créer une DIV?

    Skyleen
    Skyleen
    FémininAge : 31Messages : 476

    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
    Lehyan
    Lehyan
    FémininAge : 28Messages : 8

    Dim 14 Fév 2016 - 5:00

    Merciii!
    coconut groove
    coconut groove
    FémininAge : 36Messages : 112

    Mar 16 Fév 2016 - 21:47

    Merci!
    Tempy
    Tempy
    FémininAge : 25Messages : 76

    Sam 20 Fév 2016 - 18:17

    merci !
    Gahia
    Gahia
    FémininAge : 35Messages : 50

    Mar 1 Mar 2016 - 16:07

    Merci ^^
    Eiv
    Eiv
    MasculinAge : 29Messages : 511

    Jeu 24 Mar 2016 - 15:52

    Merci



    Comment créer une DIV? - Page 3 Signautopia
    Comment créer une DIV? - Page 3 472020userbarfanclubdelenthil
    avatar
    Twan.
    MasculinAge : 26Messages : 13

    Ven 25 Mar 2016 - 13:57

    Merci :)
    Melik
    Melik
    MasculinAge : 31Messages : 74

    Mar 3 Mai 2016 - 14:33

    merci
    Opaline Lawrence
    Opaline Lawrence
    FémininAge : 28Messages : 9

    Dim 26 Juin 2016 - 16:36

    Merci
    Scotchy
    Scotchy
    FémininAge : 18Messages : 17

    Sam 10 Sep 2016 - 19:37

    Merci! Very Happy
    FreakCreepyGirl
    FreakCreepyGirl
    FémininAge : 27Messages : 20

    Lun 12 Sep 2016 - 1:37

    MErci!!
    Mathilde .M
    Mathilde .M
    FémininAge : 19Messages : 14

    Ven 23 Sep 2016 - 21:41

    Merci pour ton tutoriel que je vais bientôt dévorer.
    TyOwsK
    TyOwsK
    FémininAge : 28Messages : 3

    Ven 23 Sep 2016 - 23:19

    Merci
    Anonymous
    Invité

    Sam 1 Oct 2016 - 19:26

    Merci!
    Soonares
    Soonares
    MasculinAge : 27Messages : 40

    Dim 9 Oct 2016 - 23:47

    Merci
    Hakial
    Hakial
    MasculinAge : 27Messages : 50

    Sam 19 Nov 2016 - 15:12

    MErci!
    Kiwix
    Kiwix
    FémininAge : 28Messages : 68

    Ven 25 Nov 2016 - 20:35

    Super, merci !
    LadyAither
    LadyAither
    FémininAge : 29Messages : 44

    Sam 3 Déc 2016 - 17:30

    Merci beaucoup !
    Dehlila
    Dehlila
    FémininAge : 41Messages : 31

    Sam 28 Jan 2017 - 17:49

    Merci
    Neigeou
    Neigeou
    FémininAge : 19Messages : 53

    Dim 5 Fév 2017 - 17:20

    Merci !
    Brigitte-Jones
    Brigitte-Jones
    FémininAge : 59Messages : 1

    Lun 6 Fév 2017 - 21:33

    Merci
    Jak SZ
    Jak SZ
    FémininAge : 34Messages : 217

    Dim 12 Fév 2017 - 21:25

    merci pour le partage !

    :love:
    Bliniss
    Bliniss
    FémininAge : 35Messages : 6

    Lun 13 Fév 2017 - 2:27

    Merci :happy:
    Envola
    Envola
    FémininAge : 32Messages : 63

    Lun 13 Fév 2017 - 18:13

    Hey , merci ! Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:21