Tutoriel pour créer un portfolio avec tri

On te recommande aussi ...

  • Roch Nicolas

    Bonjour,j’aimerai bien comprendre comment liée le fichier HTML au deux autre fichier car je n’arrive pas a comprendre comment on fait pour obtenir le résultat. Merci

    • maximaLzdnb

      Salut Nicolas!

      Je me permet de te corriger : On lie le fichier CSS et le fichier JS au HTML et non l’inverse!

      Pour le fichier CSS il faut rajouter cette ligne dans la balise head de ton fichier HTML :

      dans le href il faut mettre le chemin vers ta feuille de style, ici c’est par exemple quand elle est au même endroit que le html.

      Pour le fichier JS il faut rajouter avant le tag de ton HTML la ligne suivante :

      Pareil, dans src il faut mettre le chemin vers ton fichier. Ici le mien s’appelle script.js et se trouve au même endroit que le fichier HTML !

      J’espère que ça t’auras aidé, et si tu n’y arrives pas n’hésites pas à redemander de l’aide!

      • Roch Nicolas

        Merci super la réactivité !! mais j’obtient sa au final

        • maximaLzdnb

          Mince, désolé c’est ma faute. J’ai oublié une fermeture de div dans le code de l’article.. C’est désormais corrigé !

          La div portant les classe « wrapper » et « portfolio » doit s’étendre jusqu’à après le dernier item du portfolio, et non pas se fermer juste après le tri!

          • Roch Nicolas

            Ok merci beaucoup !! ça marche, mais j’ai toujours les petits points entre les menus de la barre en haut c’est bizarre !

          • maximaLzdnb

            Je ne l’ai pas précisé, mais j’utilise également un composant tout fait appelé un « reset CSS », qui se charge de réinitialiser certaines propriétés des div, nav, list item, etc … Donc en gros j’ai le CSS de cette page tout en haut dans mon CSS :

            http://meyerweb.com/eric/tools/css/reset/

          • Guest

            Merci beacoup ! Et pourquoi après avoir fait tout cela je n’arrive toujours pas a cliquez sur une de mes icônes en haut sa reste sur all !

          • Roch Nicolas

            il faut que tu integre jquery dans le dossier avec ton site ! En tout cas merci a toi maximaLzdnb et comme les portes de APB sont ouvertes j’ai pu metre MMI en premier j’espère vraiment être pris !! Juste par curiosité, tu avais un super dossier pour y rentrer ?

          • maximaLzdnb

            Hello, 7 mois ça fait un peu long pour te répondre x) En espérant que tu as été pris Pour répondre à ta question, non, j’avais un dossier exécrable, et j’ai faillit ne pas être pris pour tout te dire. Je suis passé avant dernier au recrutement. Au bac je me suis défoncé et j’ai eu le double mes moyennes annuelles c’est grâce à ça que j’ai été pris. Pour autant, j’ai fini second de promotion (sur une 50 aine) pendant 2 ans. Le dossier ne fait pas tout, et ça ça concerne aussi les profs réticents quand ils voient qu’un étudiant n’a pas 15 de moyenne en maths. Ce qui compte, c’est les motivations et la passion, pas des chiffres stupides qui sont donnés à un moment X auquel tu ne peux rien changer. Petit coup de gueule, désolé, mais merci à toi d’avoir posé la question

          • Roch Nicolas

            Merci c’est super !! et dites moi comment je peux faire pour que mon image soit centrée dans chaque block ?

          • maximaLzdnb

            Il suffit de mettre un background-position: 50% 50% sur la div qui a un background-image !

  • Dude

    Merci !

  • stef

    bonjour, merci beaucoup pour le tuto, j’ai une question si je veux mettre mes photos sur 4 colonnes au lieu de 2, comment faire?
    Merci

    • maximaLzdnb

      Salut ! Merci à toi de l’avoir suivi

      Pour mettre sur 4 colonnes au lieu de 2, il te suffit de changer 2 choses :
      * La largeur de chaque colonne (width: 48%) et de le passer à 24% par exemple (soit (100%/4 colonnes) – (nbColonnes – 1) * (100 – 3*24) pour le calcul précis, laissant ainsi 1,33% de marge sur chaque colonne))
      * La gestion des float : Au lieu d’alterner float left et float right, il faut mettre un float left général sur .item et une marge générale également (le 1,33% calculé plus haut par exemple) et ensuite se servir de la suite mathématique (qui était 2n et 2n+1) : On va plutôt faire un margin-right: 0; tous les 4n, afin de ne pas avoir de marge sur le dernier élément de chaque ligne.

      Si les calculs t’embêtent, et si ton code est du simple html (donc non généré par une boucle en php ou autre), tu peux aussi mettre une classe sur les derniers .item de chaque ligne (donc tous les 4 .item tu mets une classe du genre « last ») et dans ton css lui mettre un margin-right: 0;

      Voilà, j’espère que ça répond à ta question

      • Ce mec est une machine 0_O

        • maximaLzdnb

          <3

  • Pingback: 6 thèmes WordPress gratuits qui envoient du pâté - Blog du MMI()

  • RasmusDesign

    Maintenant, on fait ça en css3 o/

    • maximaLzdnb

      C’est du CSS3 Bien sûr depuis je me suis mis à Flex et à toutes ces belles choses.

      Si tu y tiens tant que ça..

      Container :
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      Items :

      width: 48%;

      Mieux ?

      • Ophélie Latouille

        Juste une dernière question, quand j’utilise flex-wrap: wrap; mes items s’alignent en colonne alors que je voudrait 3 items sur la même ligne, sachant que chacune de mes images est à width : 33%, comment faire q’il-te-plaît…?

      • RasmusDesign

        Je parlais pas de la structure mais du système de trie en lui-même
        C’est fout tout ce que l’on peut faire avec des checkbox et la pseudo-classes :cheched

  • Roxane

    Bonjour,

    J’ai réaliser le tutoriel et je souhaite l’intégrer dans un thème WordPress. Le thème que j’ai pour mon site pro, le portfolio fonctionne très mal. Du coup, je voulais vous demander comment je peux intégrer le fichier HTML et CSS dans le thème ? Est-ce que je devrais coder pour chaque nouveau article portfolio dans l’HTML ? Ou est-ce qu’il se fera automatiquement à partir du Worpress ?
    Est-ce que c’est réalisable ?

    Merci pour votre blog, qui m’aide beaucoup (vu que je suis étudiante en 2ème année MMI ^^)

    Merci par avance de votre réponse

    • maximaLzdnb

      Hello Roxane, et désolé pour la réponse tardive, j’ai pas vu le mail !

      Pour l’intégrer dans un thème WordPress, c’est effectivement un peu plus complexe. Mon avis de développeur, c’est que si tu ne développe pas le thème toi même, entièrement, ce n’est pas le bon plan d’intégrer ce bout de code dans le thème du développeur qui l’a fait. Tu vas avoir des ennuis sans fin, et si tu le fais mal (c’est à dire pas dans un thème enfant), à la première mise à jour du thème tu vas tout perdre et ça va être un vrai calvaire pour tout refaire dans l’urgence etc..

      Si tu utilise des thèmes tout fait, le mieux est encore d’en trouver un avec exactement ce que tu veux. En 2ème année MMI je ne pense pas que l’on enseigne le développement de thèmes WordPress malheureusement (vraiment malheureusement parce que c’est un standard de l’industrie pourtant). Je ferais très prochainement un article d’introduction à WordPress qui expliquera ce que c’est, comment ça marche, et où trouver des réponses à (presque) toutes ses questions ! Stay tuned et bon courage pour ton portfolio

  • Ophélie Latouille

    Bonjour,
    J’ai suivi la moitié de ton tuto car j’avais déjà un portfolio composé d’une liste d’images, j’ai donc ajouté le menu que tu as proposé avec des liens autour de chaque image pour y intégrer les class item. Au niveau du CSS j’ai arrangé à ma sauce et tout marche, le javascript par contre ne semble pas bien fonctionner car il ne trie pas mes images… Mais le menu avec « active » marche bien pourtant, je ne sais pas d’où cela vient, peut-être une ligne que j’ai supprimée ou une balise que je n’ai pas bien nommée…? Je ne comprend pas pourquoi on parle de .sorteDown sachant qu’il n’apparaît pas dans le HTML…? Car je voudrais que tous mes travaux print s’effacent quand on clique sur web etc… Merci par avance pour ton aide, je joins des screens de mes fichiers

    • maximaLzdnb

      Hello Ophélie

      Pour t’expliquer simplement : Dans le javascript, on va affecter des classes aux éléments (.sortDown par exemple), afin qu’ils réagissent au css. Ça veut dire que oui, tu ne les verras pas dans ta fiche HTML, par contre il est nécessaire que tu les déclare dans ta feuille de style CSS, comme ça dès l’instant ou le javascript leur ajoutera la classe « sortDown », ils prendront son style en compte, dans notre cas c’était un scale. Je t’invite à relire la partie 3 « Prévoir pour le jQuery », si ce n’est toujours pas plus clair pour toi n’hésite pas à recommenter !

      Ensuite en ce qui concerne ton problème, c’est tout simple, c’est une simple faute d’inattention (ça arrive à tout le monde, si si je te jure !), si tu regarde dans ton js tu as portItem = $(« .port .item »); alors que dans ton HTML tes item de portfolio sont dans un ul de classe « portfolio ». Donc soit tu renomme la classe « portfolio » en « port » soit tu renomme « port » en « portfolio » dans ton js ! À toi de voir !

      Pour aller plus loin et t’aider à débugguer de manière extrêmement simpliste, je t’invite à inspecter un élément lorsque tu as un problème avec du JS, et à ouvrir la console du navigateur (il y a un onglet pour ça dans le truc qui s’ouvre pour inspecter l’élément !), tu verras que ce genre de problème t’apparaîtra beaucoup plus rapidement puisque la console te le dira, cet élément n’existe pas !

      Voilou ! Bon courage

      • Ophélie Latouille

        Merci beaucoup pour ces précisions en un temps recors aha !

        J’ai donc laissé la classe .sortedDown dans mon CSS, et ai changé le .port .item en .portfolio .item mais ça ne fonctionne toujours pas…

        • maximaLzdnb

          Content que ça marche pour toi !

          C’est du détail et c’est une notion relativement compliqué, mais c’est préférable d’utiliser quelque chose du genre « visibility: hidden; opacity: 0; » plutôt que de toucher à top/bottom/left/right. Ces quatres propriétés déclenchent une réaction du navigateur qui doit s’adapter (surtout des chiffres aussi grands que -9999 !), alors sur ordi ça va ça se voit pas trop, mais sur des ordis moins puissants ou des smartphones / tablettes, c’est ce genre de détails qui font ramer les animations ! L’optimisation des performances c’est une compétence à part entière, pour autant je n’essaye pas de t’y convertir, c’est du détail et ça n’impactera pas ton site, à moins que tu intègres mon portfolio à un site qui fait + de 1 000 000 visites par jour

          Bonne continuation et n’hésite pas à nous contacter si tu as des questions !

          • Ophélie Latouille

            En effet j’ai un peu joué la carte de la facilité… Mais j’ai opté pour un display:none; finalement ! Mais du coup les transitions ne fonctionnent pas…

  • Marion Pasquet

    Bonjour! J’ai essayé ce portfolio, super design, et vraiment propre et complet bravo! Je l’ai adapté à mon site et mes goûts, mais merci pour le code :)! Juste une petite question, j’essaye de rendre ce portfolio responsive mais en vain.. quelques conseils à me donner ?
    Bon week end!

    • Mégane Schultz

      bonjour, As tu trouvé réponse à ta question (rendre ton portfolio responsive) ?
      Mon portfolio : MENU -(Accueil – a propos – PORTFOLIO — déroulant MATERNITE – MARIAGE…etc.)
      Chaque item « MATERNITE, MARIAGE »…etc amène à un Slider de quelques images (diaporama)

      Sur ordinateur aucun problème pour visualiser ces Sliders . Mais dès qu’on passe sur mobile ou tablette. Les Sliders disparaissent. Donc pas responsive.

      Peux tu m’aider?

      • Marion Pasquet

        J’avais réussi à le rendre responsive, mais c’était pas propre.. j’avais modifié la width = 33% dans mon css pour la mettre à 100% en dessous de 960px de taille d’écrans, mais c’était pas propre.. Du coup j’ai juste changé de porfolio et j’en ai pris un bootstrap

  • Audrey Baron

    Bonjour

    Merci pour ce très beau portfolio!

    J’ai juste un soucis avec les photos, tu dis les intégrer via le CSS, hors dans ton tuto tu mets le background ds le html, es ce normal ?

    d’autre part, je mets ma photos en remplacement de la tienne, et quand je regardes sous chrome, la photo ne s’affiche pas, es ce qu’il y a une taille particulière ?

    Merci encore

    Audrey

  • Salah

    Bonjour, merci pour le super tuto !

    Je voudrais savoir, si par exemple je veux pas rétrécir les images mais les faire disparaître est ce que je peux faire

    .sortedDown {

    transform: hidden;
    }

    ?

    • salah

      ça marche avec ça pour ceux qui veulent

      margin: 0px;

      float: left;

      height: 148px;

      width: 0px;

      transform: scale(0,0);

  • Pingback: Html/css | Pearltrees()