• le B.A. BA

    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" ;)


  • Commentaires

    1
    Mercredi 2 Novembre 2011 à 20:30

    Nagalia ton blog est troooop bien!

    2
    Mercredi 2 Novembre 2011 à 20:36

    La j'ai un problème: Sa me donne bien la boite mais ça me rajoute dans la ligne au dessus:

    p>

    Je ne peux pas le retirer!

    Si je l'enlève tous s'efface

     

    3
    Mercredi 2 Novembre 2011 à 20:38

    Efface le dans le html

    4
    Mercredi 2 Novembre 2011 à 20:40

    Déjà essayé

    5
    Mercredi 2 Novembre 2011 à 20:40

    Tu peux me montrer tout ton code html?

    6
    Mercredi 2 Novembre 2011 à 20:42

    <div class="boite">Blabla d'exemple</div>

    7
    Mercredi 2 Novembre 2011 à 20:45

    Heu... très bizarre... Je vois pas d'ou sort ce p> XD

    Tu peux me montrer tout le code de ton article? (si c'est que ça, je vois vraiment pas quoi faire ^^')

    8
    Mercredi 2 Novembre 2011 à 20:46

    J'ai essayé sur une nouvelle page pour vérifier si ça marchait

    (Je fais des tests)

    9
    Mercredi 2 Novembre 2011 à 20:48

    Et ça marche?

    10
    Mercredi 9 Novembre 2011 à 22:12

    Coucou =D

    Merci pour le tutoriel,mais faut-il a chaque fois faire le code?car c'est un peu ennuyant de tout faire ...

    Peut-on par exemple quand on fait un article il se met directement?

    11
    Mercredi 9 Novembre 2011 à 22:35

    Pas que je sache... C'est vrais que ça serai plus pratique, mais a force, c'est automatique d'écrire dans le html ;) Et puis, <div class="CLASSE"> c'est quand même pas trop long a écrire ^^

    12
    Jeudi 10 Novembre 2011 à 21:59

    Tu as raison ;) Merci♥ 

    13
    Jeudi 10 Novembre 2011 à 22:00

    de rien =)

    14
    Jeudi 10 Novembre 2011 à 22:18

    Désolé de te rederanger >.> je n'arrive pas a mettre la "boite au milieu j'ai essayé sur l'accueil de mon blog mais c'est toujours a gauche =/

    15
    Jeudi 10 Novembre 2011 à 22:37

    zut, j'ai pas fait un article sur l'alignement --'

    sélecteur {margin: 0 auto;}

     

    16
    Jeudi 10 Novembre 2011 à 22:39

    xD Merci *-* j'avais totu essayé mais j'ai rien trouvée xD /SORT/ Il faut le mettre dans css?J'attends que tu fasse l'article car la je suis perdue >.> /sort/ *se sent bête comme un poisson rouge/regarde son poisson -oui oui j'ai un poisson rougeu_u-/

    17
    Jeudi 10 Novembre 2011 à 22:42

    Oui, c'est à mettre dans le css, dans le code de ta classe ;)

    Je pense que je vais mettre l'article demain

    18
    Jeudi 10 Novembre 2011 à 22:44

    D'accord*-* 

    19
    Samedi 12 Novembre 2011 à 18:31

    je n'ai rien compris tu peux m'expliquer

    20
    Dimanche 13 Novembre 2011 à 12:35

    Tu pourais me dire ce que tu n'a pas compris exactement? 

    21
    Dimanche 13 Novembre 2011 à 13:13

    j'ai compris mais ça ne marche pas sur mon blog

    22
    Dimanche 13 Novembre 2011 à 13:54

    Peux tu me montrer tes codes? (Css et Html)

    23
    Dimanche 13 Novembre 2011 à 13:56

    ok je fait de le passer mes doit aller manger

    24
    Dimanche 13 Novembre 2011 à 14:05

    voila mon code

    .boite{ width: 90%; border: 1px double #29436f; box-shadow: 0px 0px 10px #29436f;padding: 5px 15px 5px 15px; margin: 5px 5px 5px 15px; color: #29436f; background-image: url("http://data0.eklablog.fr/hello-project/mod_article23631380_1.jpg");}

    25
    Dimanche 13 Novembre 2011 à 14:06

    je n'ais pas le code htlm

     

    26
    Dimanche 13 Novembre 2011 à 14:10

    Il faut mettre du html aussi, ça ne risque pas de marcher sinon ;)

    Met ce code dans l'article ou tu veux mettre ta boite:

    <div class="boite">Texte, image....</div>

    27
    Dimanche 13 Novembre 2011 à 14:19
    28
    Mercredi 14 Décembre 2011 à 17:34

    Coucou nagalia, j'ai fait le tuto et ça marche parfaitement !

    Mais, comment fait-on pour centrer la boite ?

    29
    Mercredi 14 Décembre 2011 à 17:54

    Met des marges de façon à ce que ça la sert ou après ya un truc Center et tout ça je crois

    30
    Mercredi 14 Décembre 2011 à 18:10

    rajoute

    margin: 0 auto;

    dans le css

    31
    Mercredi 14 Décembre 2011 à 18:12

    Auto = Pour centrer? Oui?

    32
    Mercredi 14 Décembre 2011 à 18:17

    Oui, c'est pour centrer. ça supprime les marge de gauche et de droite par contre, mais tu peux rajouter margin-top et margin-bottom, pour faire les marges en haut et en bas.

    /!\ Il faut indiquer la largeur de l'éément pour le centrer

    margin: 0 auto;
    width: Xpx; 

    33
    Dimanche 25 Décembre 2011 à 15:47

    Petit problème, voilà tout:

       J'ai mis le titre dans la boite (Accueil)

    Mais je saute une ligne pour mettre l'autre texte ! Sa sort de la bulle j'ai essayé d'éditer dans le CSS ... Rien DU TOUT

    Parfois ça me refais la classe :

    Bienvenue !

    Le blog ouvre maintenant

    ... M'ennerve !!!!!!!!!!!!!!!!!!!!!!!!!!
    34
    Dimanche 25 Décembre 2011 à 16:27

    Il faut que que fasse MAJ+Enter pour sauter des lignes sans tout déformer ;)

    Ou bien tu le fais en le html en mettant <br/> à chaque fois que tu reviens à la ligne

    35
    Dimanche 25 Décembre 2011 à 17:47

    Ok merci

    36
    Dimanche 5 Février 2012 à 08:04

    Aaaaah d'accord ! *a du relire l'article dix fois pour finir par comprendre*

    Super, je vais essayer ça tout de suite ! Merci. :)

    37
    Mercredi 7 Mars 2012 à 19:48

    'o' réussi du premier coup ! (bon après faut régler les détails..)

    38
    IlLouminati Profil de IlLouminati
    Dimanche 11 Mars 2012 à 12:14

    j'ai.. rien pigé >_> (alors que j'ai lu les articles en lien au moin 10 fois et que j'ai aussi relu cet article 10 fois ._.)

    Soit :  1. je suis nulle

             2. je comprend pas comme je devrais comprendre (ça m'arrive souvent)

             3. j'ai besoin d'entrainement xD

    39
    Dimanche 11 Mars 2012 à 13:07

    Qu'est ce que tu ne comprends pas? Tu mets un nom et tu rajoutes des propriétées ...

    40
    Dimanche 11 Mars 2012 à 16:36

    Le but, c'est de créer des "boite" dans les articles, comme je fais souvent. Si tu ne comprend pas avec mes explications, copie le css dans ton css et met le html dans un article quelconque pour voir le résultat sur mon blog.

    Tu modifie ensuite ce que tu veux.

    41
    IlLouminati Profil de IlLouminati
    Dimanche 11 Mars 2012 à 19:17

    c'est bon, je vien de comprendre xD

    j'avais pas compris ce que ça faisait en fait... parce que c'est la même chose que créer une classe...

    Réponse numer : 2. je comprend pas comme je devrais comprendre (ça m'arrive souvent)

    42
    Dimanche 11 Mars 2012 à 19:23

    C'est créer une classe en css et l'appliquer dans une page html ;)

    Et qu'est-ce que tu devrais comprendre que tu ne comprend pas? (c'est français c'te phrase?)

    43
    Cloudy Profil de Cloudy
    Mardi 26 Juin 2012 à 19:10

    J'arrive pas à mettre mon module simple hors de la page :( Help please!

    44
    Mercredi 27 Juin 2012 à 02:06

    Je peux voir ton code?

    45
    Cloudy Profil de Cloudy
    Mercredi 27 Juin 2012 à 08:57

    Ca va te paraître débile mais... quel code? Je suis vraiment une débutante alors c'est bien galère pour moi >.<

    46
    Mercredi 27 Juin 2012 à 11:28

    Tu dis "J'arrive pas à mettre mon module simple hors de la page"

    Quel code CSS et quel code HTML as-tu utiliser pour essayer de mettre ton module hors de la page?

    47
    Cloudy Profil de Cloudy
    Mercredi 27 Juin 2012 à 11:30

    Celui que tu avais mis sur l'article; <div class="navigation">CONTENU</div> et   .navigation {positionfixed;

                      topXpx;
                      leftXpx;

    48
    Mercredi 27 Juin 2012 à 11:59

    Déjà, dans le css, il fait que tu modifie le code que je t'ai donné

    .navigation {position: fixed;
                      top: Xpx;
                      left: Xpx;} 

    Remplace les X par un nombre de pixel, ça indiquera à quel emplacement ce trouve ton module.

    Mais attention, ça ne déplace pas le module, uniquement le contenu que tu mettre à la place de CONTENU

    <div class="navigation">CONTENU</div>

    49
    Cloudy Profil de Cloudy
    Mercredi 27 Juin 2012 à 12:15

    J'ai pas réussi mais c'est pas grave ! Merci quand mpême

    50
    Mercredi 27 Juin 2012 à 12:57

    Réessaie quand tu comprendre un peu mieux comment ça fonctionne ;)

    51
    xX Ezreal Xx Profil de xX Ezreal Xx
    Samedi 20 Octobre 2012 à 16:42

    merci pour tout ces codes !!! mais je crois avoir vu un jour dans ton blog (si je ne me trompe pas...désolé si je me trompe) un code pour avoir un header supérieur a 400ko et je ne trouve plus l'article alors si jamais tu saurais où il se trouve pourrais-tu me passez le lien ? dsl du dérengement 

    52
    Dimanche 21 Octobre 2012 à 20:41

    #header {background: url("IMAGE");}

    53
    xX Ezreal Xx Profil de xX Ezreal Xx
    Mercredi 24 Octobre 2012 à 11:12

    ok merci beaucoup !

    54
    IlLouminati Profil de IlLouminati
    Dimanche 11 Novembre 2012 à 14:59

    Est-ce qu'on peut changer la dimension de la boite juste dans le html ? (par exemple, la mettre plus petite, mais juste une boite)

    Est-ce qu'on peut faire deux boites sur la même ligne ?

    55
    Dimanche 11 Novembre 2012 à 15:22

    dans le html, c'est la même propriété qu'en css, mais avec l'attribut "style":

    <div class="boite" style="width: Xpx; height: Xpx;">Blabla</div>

    Pour mettre deux div sur la même ligne, il faut que tu les définisse comme flotante:

    <div class="boite" style="float: left">Blabla</div><div class="boite" style="float: left">Blabla</div>

    56
    IlLouminati Profil de IlLouminati
    Dimanche 11 Novembre 2012 à 20:01

    okey ^^

    Merchi nagalia :3

    57
    milari-pullip Profil de milari-pullip
    Samedi 24 Novembre 2012 à 08:38

    super merci :)

    58
    milari-pullip Profil de milari-pullip
    Mercredi 28 Novembre 2012 à 18:06

    J'ai un gros souci : quand je clique sur html dans l'éditeur d'un article (et de tous les autres articles), bah les

    codes n'aparaissent pas et je n'ai pas possibiliter une fois que j'ai mis mon code de l'enregistrer :S

    59
    papillonpomme Profil de papillonpomme
    Vendredi 10 Mai 2013 à 12:18

    Coucou !

    Merci pour ce tuto très instructif ! Je suis fan de ton blog, qui m'aide un peu sur le HTML et le CSS ! Je connaissais un peu du premier, mais tu m'as fais un intéressant rafraichissement de mémoire xD J'expérimente un peu les codes pour le moment après je me lancerais un peu plus ;)

    Mais tite question : que veut dire pudding ?

    60
    Jeudi 10 Avril 2014 à 19:33

    C'est super ! Merci :3 !

    61
    Samedi 23 Août 2014 à 11:23

    Merci beaucoup pour ce code ! (:

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :