Mission#3 - Cherchez l'erreur !

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 !! (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 :

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 ?

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^^)

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.

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^^

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à ^^

C'est ça^^

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 :)

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 ?

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.



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

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;

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 !!