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 du moment : -45%
Harman Kardon Citation One MK3 – Enceinte ...
Voir le deal
99 €

    Mission 10 - Jouons avec l'ordre

    valtena_ethan
    valtena_ethan
    MasculinAge : 33Messages : 473

    Ven 10 Avr 2020 - 23:34

    Pour les exercices suivants, je vous propose un code de départ représentant une page d'accueil simplifiée :
    Code:
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Never Utopia missions</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>h1 {
            text-align: right;
            margin: 20px;
        }

        body {
            margin: 0px auto;
            width: 800px;
            background: lightsteelblue;
            padding: 0px;
        }

        html {
            background: aliceblue;
            margin: 0px;
            padding: 0px;
        }

        .forum {
            border: 1px black solid;
            margin: 10px;
            background: aliceblue;
            flex-basis: 40%;
        }

        .forum h2 {
            padding: 0px 10px;
        }

        .forum div * {
            padding: 0px 20px;
        }

        .main-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }</style>
    </head>
    <body>
    <h1> Mon joli forum</h1>
    <div class="main-content">
        <div class="forum">
            <h2> vie du forum</h2>
            <div>
                <div class="sous-forum">
                    <p>règlement</p>
                </div>
                <div class="sous-forum">
                    <p>présentation</p>
                </div>
                <div class="sous-forum">
                    <p>flood</p>
                </div>
            </div>
            <div>
                <button>up</button>
                <button>down</button>
            </div>
        </div>
        <div class="forum">
            <h2> code</h2>
            <div>
                <div class="sous-forum">
                    <p>tuto</p>
                </div>
                <div class="sous-forum">
                    <p>problème</p>
                </div>
                <div class="sous-forum">
                    <p>commande</p>
                </div>
            </div>
            <div>
                <button>up</button>
                <button>down</button>
            </div>
        </div>
        <div class="forum">
            <h2> graph</h2>
            <div>
                <div class="sous-forum">
                    <p>tuto</p>
                </div>
                <div class="sous-forum">
                    <p>problème</p>
                </div>
                <div class="sous-forum">
                    <p>commande</p>
                </div>
            </div>
            <div>
                <button>up</button>
                <button>down</button>
            </div>
        </div>
        <div class="forum">
            <h2>roleplay</h2>
            <div>
                <div class="sous-forum">
                    <p>tuto</p>
                </div>
                <div class="sous-forum">
                    <p>problème</p>
                </div>
                <div class="sous-forum">
                    <p>commande</p>
                </div>
                <div>
                    <button>up</button>
                    <button>down</button>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>


    exercice 1 CSS [débutant/intermédiaire]:

    Quel code devrait-on appliqué pour avoir ce résultat là : Mission 10 - Jouons avec l'ordre  CGGrhJh

    Pourquoi avoir choisi cette solution plutôt qu'une autre ?


    exercice 2 CSS / JS [intermédiaire/avancé]


    Comment faire pour que les boutons up/down change l'ordre blocs pour l'utilisateur ?


    exercice 3 JS [avancé]

    Comment stockeriez-vous les changements d'ordre de l'exercice2 pour les rechargements ultérieurs de la page

    Des XP à gagnerN'oubliez pas que chaque participation fournie dans cette mission vous rapporte 1 XP dans le domaine correspondant !
    Sygea
    Sygea
    FémininAge : 73Messages : 62

    Mer 22 Avr 2020 - 19:10

    Helloooo
    Alors j'ai essayé seulement le niveau débutant parce que je n'ai jamais touché au JS o/ J'ai opté pour le flexbox parce que ça s'adapte à toutes les largeurs et qu'on peut rajouter facilement des blocs sans que ça casse tout D: Après, je pense que ça fait peut-être beaucoup de div et qu'il y a plus succin pour arriver au même résultat ?
    Aussi j'ai passé les boutons en block pour qu'ils soient les uns sous les autres >.>

    (J'espère pas répondre trop tard, merci pour cette mission c: )

    Head
    Code:
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Never Utopia missions</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>h1 {
            text-align: right;
            margin: 20px;
        }

        body {
            margin: 0px auto;
            width: 800px;
            background: lightsteelblue;
            padding: 0px;
        }

        html {
            background: aliceblue;
            margin: 0px;
            padding: 0px;
        }

        .forum {
            border: 1px black solid;
            margin: 10px;
            background: aliceblue;
            flex-basis: 40%;
        }

        .forum h2 {
            padding: 0px 10px;
        }

        .forum div * {
            padding: 0px 20px;
        }

        .main-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

          .forum button{display: block}
          .conteneur{display: flex; flex-wrap: wrap}
          .</style>
    </head>

    HTML
    Code:
    <body>
    <h1> Mon joli forum</h1>
    <div class="main-content">
        <div class="forum">
            <h2> vie du forum</h2>
          <div class="conteneur">
            <div class="gauche">
                <div class="sous-forum">
                    <p>règlement</p>
                </div>
                <div class="sous-forum">
                    <p>présentation</p>
                </div>
                <div class="sous-forum">
                    <p>flood</p>
                </div>
            </div>
            <div class="droite">
                <button>up</button>
                <button>down</button>
            </div>
          </div>
        </div>
        <div class="forum">
            <h2> code</h2>
          <div class="conteneur"> 
          <div>
                <div class="sous-forum">
                    <p>tuto</p>
                </div>
                <div class="sous-forum">
                    <p>problème</p>
                </div>
                <div class="sous-forum">
                    <p>commande</p>
                </div>
            </div>
            <div>
                <button>up</button>
                <button>down</button>
            </div>
          </div>
        </div>
        <div class="forum">
            <h2> graph</h2>
          <div class="conteneur">
            <div class="gauche">
                <div class="sous-forum">
                    <p>tuto</p>
                </div>
                <div class="sous-forum">
                    <p>problème</p>
                </div>
                <div class="sous-forum">
                    <p>commande</p>
                </div>
            </div>
            <div class="droite">
                <button>up</button>
                <button>down</button>
            </div>
          </div>
        </div>
        <div class="forum">
            <h2>roleplay</h2>
          <div class="conteneur">
            <div class="gauche">
                <div class="sous-forum">
                    <p>tuto</p>
                </div>
                <div class="sous-forum">
                    <p>problème</p>
                </div>
                <div class="sous-forum">
                    <p>commande</p>
                </div>
            </div>
                <div class="droite">
                    <button>up</button>
                    <button>down</button>
                </div>
            </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    Shaneliae
    Shaneliae
    FémininAge : 28Messages : 313

    Jeu 23 Avr 2020 - 18:09

    Hey !

    Alors pour la partie HTML, j'ai utilisé une solution similaire à celle de Sygea mais je n'ai touché qu'au CSS.

    Le CSS que j'ai ajouté :
    Code:
    .forum {
       display: flex;
       flex-wrap: wrap;
    }

    .forum h2 {
       width: 100%;
    }
    .forum div {
       flex-grow: 1;
    }

    .forum div button {
       display: block;
    }

    Explications :
    Flex ici est la solution la plus simpleà mes yeux. Inline-block aurait pu fonctionner, mais il aurait fallu faire quelques réglages en plus. Un float ou absolute sur la div contenant les boutons aurait aussi pu faire l'affaire, mais c'est moins propre, surtout pour du responsive par exemple. Le flex-grow sur les div permet de leur dire de prendre toute la place dont elles ont besoin par défaut, histoire d'éviter qu'elles se mettent à 50% par défaut. Pour les boutons j'ai aussi choisi le display block, c'est le plus simple et rapide, on aurait aussi pu utiliser flex avec un flex-direction column, mais c'est un peu long pour juste 2 boutons.

    Pour la suite, j'avoue ne pas avoir encore écrit le code, j'ai toujours autant horreur du JS et de sa syntaxe merdique. Mais dans l'idée, selon moi avec un petit onclick, on récupère l'ordre actuel de la case .forum où est le bouton et on lui fait un +1 ou -1 selon la fonction dans le onclick. J'écrirais peut être une solution pour cela plus tard et je posterai quand ce sera fait !



    valtena_ethan
    valtena_ethan
    MasculinAge : 33Messages : 473

    Jeu 23 Avr 2020 - 21:43

    Sygea a écrit:Helloooo
    Alors j'ai essayé seulement le niveau débutant parce que je n'ai jamais touché au JS o/ J'ai opté pour le flexbox parce que ça s'adapte à toutes les largeurs et qu'on peut rajouter facilement des blocs sans que ça casse tout D: Après, je pense que ça fait peut-être beaucoup de div et qu'il y a plus succin pour arriver au même résultat ?
    Aussi j'ai passé les boutons en block pour qu'ils soient les uns sous les autres >.>

    (J'espère pas répondre trop tard, merci pour cette mission c: )


    Et non c'était pas trop tard.

    Comme le montre, Shaneliae, les div "conteneur" n'étaient pas necessaire. Cependant, ta solution est propre, claire et facile, c'est le principal.


    Shaneliae a écrit:
    Pour la suite, j'avoue ne pas avoir encore écrit le code, j'ai toujours autant horreur du JS et de sa syntaxe merdique. Mais dans l'idée, selon moi avec un petit onclick, on récupère l'ordre actuel de la case .forum où est le bouton et on lui fait un +1 ou -1 selon la fonction dans le onclick. J'écrirais peut être une solution pour cela plus tard et je posterai quand ce sera fait !

    Je suis très curieux de voir ta solution. Si ça te motive, je peux poster la mienne Very Happy
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 15 Mai 2020 - 21:10

    Salut !

    J'ai la flemme de faire le premier exercice, donc j'ai seulement fait le 2e exercice en utilisant le HTML/CSS de Shaneliae.

    Voilà donc ma solution pour faire bouger l'ordre :
    Code:
    // Chaque fois qu'on clique sur un bouton
    $('button').click(function() {

      // On sélectionne le forum
      var leforum = $(this).closest('.forum');
      // On sélectionne l'index du forum
      var lindex = leforum.index();

      // Si on monte
      if ($(this).html() == "up") {
        // Si on n'est pas tout en haut
        if (lindex > 0) {
          // On déplace le forum avant le forum précédent
          leforum.prev().before(leforum);
        }
      }

      // Si on descend et qu'on est pas tout en bas
      else if (lindex < $('.forum').length - 1) {
        // On déplace le forum après le forum suivant
        leforum.next().after(leforum);
      }
    });

    On aurait aussi pu jouer avec l'ordre des éléments en modifiant le CSS (order des éléments flexbox) à la place des éléments directement, mais bon, voilà, je trouvais ça plus simple pour moi.



    Contenu sponsorisé


      La date/heure actuelle est Mar 5 Nov 2024 - 17:25