Place Publique => Centre Médical => Discussion démarrée par: Booya le 14 juin 2017 à 19:56:03
-
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: https://youtu.be/FUri_01WDE8
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 ^^
-
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 :
<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é ;)+
-
Les gars vous parlez chinois xD 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 xD' xD'
-
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 !
-
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 :p
-
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 ! :p
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 :p
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 ! :p
-
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!*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. :-D
cdt et tdc
-
Choc, il faut vraiment que tu te calmes sur les produits psychotropes xD'
-
Il part loin le garçon...
De la famille de Jean Claude vandame ?
-
je suis pas d'accord, la réflexion c'est le pouvoir...
-
Moi je suis comme les autres ... J'ai rien compris ...
-
ahahah Ephis xD'
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 ;)+
-
re, j'ai pas détourner le sujet.
Vous avez trouver les Bug.
j'ai tenté de lui donne une astuce.
cdt et tdc
-
Booya ?
Aucuns retours suite à nos explications... Tu t'en es sorti ? t'as fait quoi finalement ?
-
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!