[Résolu] Problème de transition CSS

[Booya]

Bonjour,

j'ai un projet a rendre pour la fin de l'année, et en gros, je dosi faire un site responsive en mobile first, avec vue tablette et bureau d'une façon précise...

je suis a la page "portfolio" en vue mobile, ou en fait il y a 6 cadre en 1 colonne avec une transition en rollover d'un texte.

sur les 5ers cadre, la transition fonctionne, mais des que j'applique les caractéristiques au 6ème cadre, il y a un mystérieux bug...

Voila le lien pour dl mon code: https://mega.nz/#!FvBkhSYY!Dv2Do8YvspsAGrxI5L8jjWeCst1YxQqSU1YNL-0ZeY8

petite vidéo de démo, ce sera plus simple:

si quelqu'un pouvait m'aider a comprendre ce serait sympa...

on m'a dit de recommencer le code, je veux bien, mais j'aimerai quand meme bien essayer de savoir d'ou pourrait venir ce problème

merci

[Sillmar]

Tu exploites mal le display:Flex.  Honnêtement je ne l'ai pas encore vraiment utilisé mais j'ai la solution

sur cette classe tu mets ça
.flex-bureau {
     position:relative;
}

et sur div[class^='img'] tu enlèves aussi le display: flex;

Tu décommentes ta classe port6 et ça marche.


Petit conseil : tu as énormément de répétition dans tes classes  :  .port1 2 3 4 5 6...

Le but d'une classe est d'être utilisé plusieurs fois au sein d'une même page dans le but d'éviter les répétitions et d'optimiser ton code.

Au niveau de ton HTML, évites les Div dans des <a> c'est pas terrible !

Ton bloc je le verrais plutot comme cela :

Code: [Sélectionner]

<div class="bloc-port" id="bloc-1">
       <a href=""> </a>
             <div class="bloc-port-hover">
                    <h2>Rénovation</h2>
                    <p>De minim eiusmod fidelissimae iis eu enim commodo, ingeniis...</p>
            </div>
 </div>
Donc en gros tu mets une position : relative, les dimensions... de ton bloc sur la classe .bloc-port, et tu utilises cette classe sur tous tes blocs.
Ensuite chaque bloc tu mets un "id" bloc-1 le 2eme bloc-2  ... 3 4 5... et tu affectes un background à chacun.

Ton <a> tu le mets en position : relative,  display:block et z-index:2
Et sur la classe .bloc-port-hover tu lui mets la transition + position: absolute et ton bottom...

En espérant t'avoir aidé 

[Ripou]

Les gars vous parlez chinois j'ai rien comprit mais ça m'avait l'air bien GG Silmar, plus je ne comprend rien au plus cela veut dire que vous êtes en bonne voie de résolution de problème 

[Ephis]

Coucou !

Très bonne réponse de Sillmar !
Rien à dire sur sa solution.

En revanche, je ne suis pas 100% d'accord avec lui sur le fait de mettre une div dans un a !
Si tu es en HTML (4.01), la balise a spécifie ne contenir que des éléments inline (p, span, etc.).
Or en HTML 5, la spécification à changé, elle peut englober des paragraphe, list, table ou bloc, a condition que ceux-ci ne contiennent pas d’interaction (bouton, lien, etc).

En même temps c'est logique, tu va pas mettre un lien dans un lien ...

Bref, donc en fonction de si tu fais de l'HTML 4 ou 5, c'est permis.

Je rebondi dessus pour te proposer un correctif tout simple pour ton HTML5/CSS3 :
https://www.w3schools.com/code/tryit.asp?filename=FGM6F4YXXAME

Et je surenchéri avec Sillmar, pourquoi tu différencie tes classes alors qu'elles font la même chose ?
Et à quoi te servent les id ?
Pourquoi ne pas utiliser une balise img pour l'image de fond ? (voir ma solution)

Si jamais tu veux exploiter des images de différentes résolution, flexbox peut résoudre ton problème pour l'affichage des cartes.
Dans mon code exemple, je me base sur le principe que toutes tes images ont la même résolution !

[Sillmar]

Tu as raison Ephis, j'ai répondu assez rapidement hier
Notamment pour la <a> contenant des DIV, mais vu qu'il débute, autant qu'il essaie de faire un HTML propre plutôt qu'un gros <a> avec 200 trucs dedans
Même si c'est valide maintenant, je ne trouves pas ça génial, notament pour le référencement.

Et pour les images tu as raison, mais je lui ai déjà donné pas mal de choses à corriger, je ne voulais pas en rajouter une couche supplémentaire

Booya => pour le référencement google, les backgrounds ne sont pas pris en compte, par contre les images avec des Alt="" sont référencées. Donc cela peut-être pas mal d'associer tes H2 à des images contenues dans un bloc plutot que de mettre des background
Et en plus, cela allègera ton CSS

[Ephis]

Notamment pour la <a> contenant des DIV, mais vu qu'il débute, autant qu'il essaie de faire un HTML propre plutôt qu'un gros <a> avec 200 trucs dedans

Oui, certes, mais quitte à être en étude, autant apprendre tout de suite les normes HTML 5 que 4 !
Et les mettre tout de suite en pratique de manière intelligente !
Et puis il fait déjà du CSS3, alors autant faire du HTML5 cache !

Et pour les images tu as raison, mais je lui ai déjà donné pas mal de choses à corriger, je ne voulais pas en rajouter une couche supplémentaire

Yep, mais encore une fois, je suis de l'avis de donner tout de suite les bons réflexe, avec une bonne explication s'il faut.
D'ailleurs si tu veux plus d'explication sur ce sujet ou un autre, je suis sûr que Sillmar et moi seront ravis de t'apporter nos expériences.
Car il y a toujours plusieurs façons de réaliser la même chose quand il s'agit de HTML5/CSS3

Booya => pour le référencement google, les backgrounds ne sont pas pris en compte, par contre les images avec des Alt="" sont référencées. Donc cela peut-être pas mal d'associer tes H2 à des images contenues dans un bloc plutot que de mettre des background
Et en plus, cela allègera ton CSS

Et surtout, si tu fais des blocs généré par un scripts (php, javascript, autres ...), il sera plus facile de fournir le lien de l'image dans une balise img, que de devoir générer du CSS et des identifiants uniques pour chaque images !
Et puis même pour le copier/coller, c'est plus simple !

[choc]

Yop,

c'est bon début.
Pour ma part, son design de site en responsive, me fait plus penser à du plein page puis mis en frist mobile. mais il est très ludique.
je te recommande d'agrandir pour la version mobile, les tailles (trouve un emule de téléphone).
Ton design est ludique et sur une bonne voie.

Comme les Ephis et Sillmar ont expliqué. ton erreur n'est pas de savoir ou elle est. mais c'est l'organisation qui a engendré cette panne (bug)

CHOCODG EXPLIQUE UNE ASTUCE:
mon astuce qui est toujours à porté de main. pour du HTML et le CSS.

Bah c'est ma propre main.... et mon bras.
le parent de mon doigt est ma pomme de ma main qui rattache aux autres doigts et un qui ce trouve être spécifique. Il se nomme le pouce qui dispose d'un position aux autres complémentaire.......
c'est une solution qui touche aussi le CSS.

si mon bras est blanc, car il n'as pas été au soleil, et que mes doigts avec ma main l'ont été, donc je sais ou se trouve ma jonction aux niveau des parents et enfants. 

Spoiler for Hiden:

Le poignet

cette méthode permet de faire la soustraction de parent et des enfants, tout comme de l'addition d'eux sur un environnement concret.
la base de cette idée m'est venu tout simplement. Comme tu as certainement entendu ou écrire?
Le HTML est le squelette de ta page, et le CSS sa mise en forme..... maintenant on peut limite parler de muscle, car c'est le but recherché par les conventions CSS avec les translations transformations etc. 

la petit sœur
et surtout, le truc qui est souvent oublier. peu de lignes, jamais oubliez que c'est le HTML qui fait la coordination et synchronisation de tout les scripts (java, CSS, Javascript, etc..)

 courage...Booya, tu fait déjà de la bonne indexation de code. c'est le plus important. 

cdt et tdc

[Sillmar]

Choc, il faut vraiment que tu te calmes sur les produits psychotropes 

[Daboù]

Il part loin le garçon...

De la famille de Jean Claude vandame ?

[choc]

je suis pas d'accord, la réflexion c'est le pouvoir...