[Résolu] Problème de transition CSS - Les Empafés

Messages : 297 Ancienneté : Localisation : Liege [Résolu] Problème de transition CSS par Booya » mer. 14 juin 2017 19: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 ven. 16 juin 2017 21:09, modifié 1 fois.

Dayum Dayum Dayuuuuum

Messages : 3 298 Ancienneté : Localisation : Aix-en-provence Re : Problème de transition CSS par Sillmar » mer. 14 juin 2017 20: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 mer. 14 juin 2017 20: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 » jeu. 15 juin 2017 13: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 868 Ancienneté : Re : Problème de transition CSS par Ephis » jeu. 15 juin 2017 14: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 jeu. 15 juin 2017 14: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 298 Ancienneté : Localisation : Aix-en-provence Re : Problème de transition CSS par Sillmar » jeu. 15 juin 2017 15: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 868 Ancienneté : Re : Problème de transition CSS par Ephis » jeu. 15 juin 2017 16:24

Sillmar a écrit : ↑jeu. 15 juin 2017 15: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 : ↑jeu. 15 juin 2017 15: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 : ↑jeu. 15 juin 2017 15: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 : 623 Ancienneté : Localisation : tu cible choc est là Re : Problème de transition CSS par choc » jeu. 15 juin 2017 20: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 ven. 16 juin 2017 14: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 298 Ancienneté : Localisation : Aix-en-provence Re : Problème de transition CSS par Sillmar » jeu. 15 juin 2017 20: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 : 959 Ancienneté : Localisation : 77 Re : Problème de transition CSS par Daboù » jeu. 15 juin 2017 21:30

Il part loin le garçon...

De la famille de Jean Claude vandame ?

Messages : 623 Ancienneté : Localisation : tu cible choc est là Re : Problème de transition CSS par choc » ven. 16 juin 2017 12: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.

Messages : 3 868 Ancienneté : Re : Problème de transition CSS par Ephis » ven. 16 juin 2017 12:42

Moi je suis comme les autres ... J'ai rien compris ...

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

Messages : 3 298 Ancienneté : Localisation : Aix-en-provence Re : [Résolu] Problème de transition CSS par Sillmar » ven. 16 juin 2017 12:57

ahahah Ephis

La tu détournes le sujet initial Choc.

Mais quand on explique quelque chose à quelqu'un, pour qu'il comprenne bien, premièrement il faut que ce soit clair, que la "réflexion" argumentée aille dans le sens du problème et si possible écrit correctement.
Je ne vois aucun des ces 3 point dans ton post Choc... désolé...
Résultat : tu vas embrouiller la personne plutôt que l'aider

Booya => si ton cerveau fonctionne encore après la lecture de tous ces posts, et si tu as des questions, n'hésites pas

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

Messages : 623 Ancienneté : Localisation : tu cible choc est là Re : [Résolu] Problème de transition CSS par choc » ven. 16 juin 2017 14:22

re, j'ai pas détourner le sujet.

Vous avez trouver les Bug.
j'ai tenté de lui donne une astuce.

cdt et tdc

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 298 Ancienneté : Localisation : Aix-en-provence Re : [Résolu] Problème de transition CSS par Sillmar » mer. 28 juin 2017 13:54

Booya ?
Aucuns retours suite à nos explications... Tu t'en es sorti ? t'as fait quoi finalement ?

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

Messages : 297 Ancienneté : Localisation : Liege Re : Re : [Résolu] Problème de transition CSS par Booya » sam. 14 oct. 2017 07:43

Sillmar a écrit : ↑mer. 28 juin 2017 13:54 Booya ?
Aucuns retours suite à nos explications... Tu t'en es sorti ? t'as fait quoi finalement ?

Je reviens vers vous un peu tard... en fait la prof n'a tjrs pas donné la correction de nos projet! on a un peu l'habitude avec elle!

J'ai fait comme sillmar m'avait expliqué, par contre, vu qu'il y avait une vue mobile, tablette et bureau, ca passait sur une des 3 vues, mais pas les autres... j'aurai surement du approfondir la chose aussi

au final je ne sais tjrs pas pourquoi ca faisait ca!

Dayum Dayum Dayuuuuum