[Résolu] Problème de transition CSS

Messages : 297 Ancienneté : Localisation : Liege [Résolu] Problème de transition CSS par Booya » 14/06/2017 17:56

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!Dv2Do8YvspsA ... 1YNL-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

Modifié en dernier par Booya le 16/06/2017 19:09, modifié 1 fois.

Dayum Dayum Dayuuuuum

Messages : 3 293 Ancienneté : Localisation : Aix-en-provence Re : Problème de transition CSS par Sillmar » 14/06/2017 18:31

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 : Tout 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é

Modifié en dernier par Sillmar le 14/06/2017 18:34, modifié 1 fois.

Quand 900 ans comme moi tu auras, moins en forme tu seras !

Messages : 228 Ancienneté : Localisation : Liège Re : Problème de transition CSS par Ripou » 15/06/2017 11:09

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

En quête d'une signature correcte ultérieurement

Messages : 3 838 Ancienneté : Re : Problème de transition CSS par Ephis » 15/06/2017 12:14

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.as ... M6F4YXXAME

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 !

Modifié en dernier par Ephis le 15/06/2017 12:16, modifié 1 fois.

Code de parrainage Star Citizen : STAR-XRZ7-RMFR
Vous vous gagnez 5.000 crédit et moi 1 point.

Messages : 3 293 Ancienneté : Localisation : Aix-en-provence Re : Problème de transition CSS par Sillmar » 15/06/2017 13:27

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

Quand 900 ans comme moi tu auras, moins en forme tu seras !

Messages : 3 838 Ancienneté : Re : Problème de transition CSS par Ephis » 15/06/2017 14:24

Sillmar a écrit : ↑15/06/2017 13:27 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 !

Sillmar a écrit : ↑15/06/2017 13:27 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

Sillmar a écrit : ↑15/06/2017 13:27 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 !

Code de parrainage Star Citizen : STAR-XRZ7-RMFR
Vous vous gagnez 5.000 crédit et moi 1 point.

Messages : 619 Ancienneté : Localisation : tu cible choc est là Re : Problème de transition CSS par choc » 15/06/2017 18:40

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

Spoiler - Montrer

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

Modifié en dernier par choc le 16/06/2017 12:17, modifié 1 fois.

mes pieds sont jaloux.
quand l'un se fait dépasser par l'autre. il se dépêché de le dépasser
et moi simple marionnette, je marche à leur jeu.

Messages : 3 293 Ancienneté : Localisation : Aix-en-provence Re : Problème de transition CSS par Sillmar » 15/06/2017 18:53

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

Quand 900 ans comme moi tu auras, moins en forme tu seras !

Messages : 955 Ancienneté : Localisation : 77 Re : Problème de transition CSS par Daboù » 15/06/2017 19:30

Il part loin le garçon...

De la famille de Jean Claude vandame ?

Messages : 619 Ancienneté : Localisation : tu cible choc est là Re : Problème de transition CSS par choc » 16/06/2017 10:06

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

mes pieds sont jaloux.
quand l'un se fait dépasser par l'autre. il se dépêché de le dépasser
et moi simple marionnette, je marche à leur jeu.