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.


    Mission#3 - Cherchez l'erreur !

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Lun 6 Jan 2014 - 9:36

    Rappel du premier message :

    Et oui, c'est la rentrée... dur dur ! Heureusement qu'il y a Never-Utopia et les Guilde des Architectes pour se détendre !! Very Happy(non ?)

    Les deux premières missions ont été un succès, de belles participations et de bonnes explications. Je vous en félicite et j'espère que celle-ci suscitera autant d'intérêt.

    Cette mission va être progressive et faite sous forme de jeu. Le but ? Trouver l'erreur du code x). C'est très simple, je vais tout d'abord poster un code qui contient une erreur, un problème qui fait que l'affichage ne se fait pas comme je voudrais. Je vais expliquer ce que j'aimerais, montrer ce que donne le code, et c'est à vous de trouver l'erreur qu'il contient et corriger le code pour que tout s'affiche comme il faut.

    Une fois que la première erreur du code a été trouvée, et que tout le monde a bien compris, c'est à vous, n'importe qui, que ce soit celui qui a trouvé ou un autre, de poster à son tour un code dans lequel il y aura une erreur... et ainsi de suite x).

    Commençons donc avec ces blocs :

    Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur.
    Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.



    Code:
    <div style="width: 500px; margin: auto; padding: 5px;"><div style="float: left; width: 240px; height: 150px; overflow: auto; background: grey; margin: 10px; border: 5px solid darkgrey; color: darkgrey; padding: 5px;">Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur.</div><div style="width: 240px; height: 150px; overflow: auto; background: brown; margin: 10px; border: 5px solid black; color: black; padding: 5px;">Post hanc adclinis Libano monti Phoenice, regio plena gratiarum et venustatis, urbibus decorata magnis et pulchris; in quibus amoenitate celebritateque nominum Tyros excellit, Sidon et Berytus isdemque pares Emissa et Damascus saeculis condita priscis.</div></div>
    <div style="clear: both;"></div>

    J'aimerais donc que ces deux blocs soient côte à côte et non l'un en dessous de l'autre. Mon bloc gris est en float left, et leur deux largeurs cumulées devraient rentrer l'une à côté de l'autre... Pourtant le bloc marron est en dessous, alors qu'il devrait être à droite du gris.
    Pourquoi ? Comment réparer ?


    Dernière édition par Sparrow-style le Mer 11 Juin 2014 - 11:50, édité 1 fois



    avatar
    simonriou
    MasculinAge : 22Messages : 46

    le Sam 15 Fév 2014 - 14:29

    presque presque, il manque effectivement un d, mais j'ai ajouté une erreur bien plus visible pourtant^^

    c'est vrai que j'aurais du prévenir des deux erreurs.


    Ensuite, je n'en suis qu'à la partie 1 Etape 1 du cursus codage, alors j'ai réellement codé comme ça. (sans les fautes, évidemment^^)
    avatar
    Katsura
    MasculinAge : 33Messages : 190

    le Sam 15 Fév 2014 - 14:38

    Salut,
    En fait, je suis à 95% sûr que le padding ne s'applique pas à un élément inline qu'est le span (sauf bien sûr si on modifie le display). Donc l'absence du display est à mes yeux la seconde erreur... je pense.

    avatar
    simonriou
    MasculinAge : 22Messages : 46

    le Sam 15 Fév 2014 - 14:54

    Oups.... Je viens de revérifier...

    Celle là est une erreur involontaire de ma part, désolé. Mais la dernière erreur volontaire est toujours introuvée.... (ce qui en fait trois en fait...)


    Et je vais relire tous les cursus jusqu'à l'avoir par coeur avant de poster maintenant moi^^
    avatar
    Katsura
    MasculinAge : 33Messages : 190

    le Sam 15 Fév 2014 - 15:05

    Trouvé !  Il n'y a pas de "=" devant style, ça devrait être :

    Yopla!


    Code:
    <span style="font-size: 20px; color: #228b22; display:block; padding-top: 5px;"><center>Yopla!</center></span>

    Voilà voilà ^^
    avatar
    simonriou
    MasculinAge : 22Messages : 46

    le Sam 15 Fév 2014 - 15:13

    C'est ça^^
    avatar
    Tity
    FémininAge : 25Messages : 114

    le Mar 18 Mar 2014 - 18:34

    Bon je viens mettre mon grain de sel avec un mois de retard ^^' mais il me semble que le "padding" peut-être mise sur une balise "inline" même sans "display" pour par exemple augmenter l'espace entre mon texte et ma bordure, c'est le "margin" qui est inutile si il n'y a pas de "display" (si j'ai bien suivi les cours de la partie cursus :) )
    Voila, c'était ma petite intervention inutile :)
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Ven 16 Mai 2014 - 12:08

    Je m incruste \o/
    Si on met un text-align: center a la place du center il faut mettre un display:block dans le span !
    Voilà.
    Personne pour une nouvelle erreur ?

    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Dim 18 Mai 2014 - 12:15

    Bon, voilà une nouvelle erreur (je m'incruste aussi).
    J'essaye de créer un bloc recouvert par un autre qui se décale au "hover"
    comme celui-ci.

       Bloc recouvrant

       Bloc recouvert



    Sauf que j'obtiens cette... chose informe. Où sont mes erreurs?

        Bloc recouvert

        Bloc recouvrant


    Code:
    <div class="cadre" style="margin: auto; background-color: black; width: 250px; height: 100px;"> <br />  Bloc recouvert<div class="defile" style=" width: 250px; height: 100px; background-color: grey; position: absolute; color: lime;"><br />  Bloc recouvrant</div></div>
    <style> .cadre:hover > .defile {left: 250px;}</style>

    Bon, et deuxième question (plus facile je crois)
    Où devrais-je mettre mes propriétés de transitions si je voulais en mettre?

    Code:
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    avatar
    Mister CK
    MasculinAge : 23Messages : 28

    le Jeu 16 Avr 2015 - 10:09

    Coucou ^^ merci pour cette mission (qui date un peu) ! Si c'est permis, je m'essaie à la réponse :

    Et celle-ci va se faire en trois temps.

    1)Tout d'abord, les subtilités des noeuds ! (Non, pas ces noeuds-là :p)



    Ici, qu'a-t-on fait ? La partie < br /> Bloc recouvert se retrouve après la div de fermeture du bloc recouvrant, et ce afin d'éviter qu'un noeud de type "texte" ne vienne manger de la place dans le haut du bloc recouvert, ce qui force sa soeur directe, le bloc recouvrant à être décalée vers le bas.
    Mais pourquoi diable, puisqu'elle est définie en absolute, est-elle donc décalée vers le bas en premier lieu ?

    2) C'est là qu'il faut parler des positions !

    La propriété position s'accompagne de quatre autres propriétés permettant de placer précisément les blocs.

    On va donc placer, grâce à ces propriétés notre bloc recouvrant.



    Là, qu'on mette notre noeud texte < br /> Bloc recouvert avant ou après le bloc recouvrant, ce dernier ne sera pas décalé... sauf si vous omettez de mettre le bloc recouvert en position:relative;

    Bravo pour celles qui l'ont vu venir ! Re-regarder le css du bloc recouvert.
    Si vous vous contentez de mettre un top:0; left:0; au bloc recouvrant, vous allez le mettre dans le coin haut-gauche de... l'écran, car il est en position:absolute; (Je m'attarde pas dessus ici). Pour que sa position se définisse par rapport à son parent direct, il faut que celui-ci soit en position:relative;

    Oui mais... héhéhé ça ne marche plus x) Passez votre souris sur le bloc, vous remarquerez que plus rien ne se passe !

    Pas de panique ^^ c'est un problème de communication entre le css interne au HTML et le css entre les balises de style.

    3) Où mettre le css ?

    Prenons les proprietes de placement, et mettons-les entre les balises < style> :



    Maintenant, notre code s'y retrouve mieux, et l'animation peut s'effectuer convenablement :)

    /!\ Notez quelque chose d'intéressant /!\
    Pour obtenir cet effet-là, en fait, il n'y a pas vraiment besoin d'utiliser les balises de positionnement haut/bas/droite/gauche... En effet, rajouter un position:relative; à notre code de début aurait suffit à obtenir le résultat escompté. Voyez plutôt :



    Mais... d'une part c'est pas très W3C-ment approuvé ! D'autre part, ça implique que notre noeud texte < br /> Bloc recouvert doive impérativement se trouver après le bloc recouvrant (sinon sa soeur, qui est le bloc recouvrant, va être décalé vers le bas pour lui laisser de la place, rappelez-vous).
    Et en plus, ça ne nous permet pas de styliser notre transition... et non...


    Bonus : la transition smooth

    On a tous en tête le fonctionnement d'un ascenseur. Si vous appuyez sur le bouton d'appel et que la cellule n'est pas à votre étage, il est probable que l'ascenseur mette de quelques secondes à quelques minutes à arriver jusqu'à vous. Ca n'est pas instantané.
    Par contre... appuyer sur le bouton ne vous a pas pris énormément de temps, on pourrait même dire qu'a moins d'être resté appuyé comme un gros benêt sur le bouton jusqu'à l'arrivée de l'appareil, ça s'est fait instantanément ;p

    La transition n'est donc pas subie par l'élément déclencheur... mais bel et bien par l'élément déclenché !

    On comprend donc mieux pourquoi ceci :
    Code:
    -webkit-transition: left 1s linear;-moz-transition: left 1s linear;-ms-transition: left 1s linear;-o-transition: left 1s linear;transition: left 1s linear;

    ... doit se mettre sur l'élément qui va bouger, et non celui qui sera cliqué/survolé.





    Tadaaaa...

    Juste une petite note...

    Je reviens sur mon ascenseur mais, quand vous l'avez dérangé pour qu'il vienne vous aider à monter à votre appart qui se trouve au premier étage... l'ascenseur était à un endroit E. Sur un graphique, il est donc parti de ce point pour arriver à un autre, c'est le principe d'une transition.
    Pour que transition il y ait, il faut donc deux données :
    - Le point de départ
    - Le point d'arrivée

    Dans notre code, la transition s'effectue sur la propriété left, mais si vous ne donnez pas de point de départ à votre transition, il y a fort à parier que ca ne fonctionnera pas. Le bloc ne sait pas d'où partir :



    ... par contre, il sait où arriver... donc il va se jeter de sa position actuelle à sa position d'arrivée, mais il n'y aura pas de transition linéaire d'une seconde comme on le lui avait demandé.

    Voilà, j'espère que tout ça est assez clair, et pardon pour ma comparaison foireuse x)
    Si je me suis trompé quelque part, hésitez pas à le dire svp é.è merci !!
    Contenu sponsorisé


      La date/heure actuelle est Sam 18 Nov 2017 - 16:51