Balise button

Oué on peut t'aider, mais il nous faut plus d'informations, pour insérer un événement dans un bouton, il faut gérer cela en JavaScript avec onclick=""; qui appel ta fonction javascript.

<button class="view-more"  onclick="ta_fonction_javascript()">Voir plus</button>

sinon mettre un " lien dans la balise button " n'a pas de sens, soit on met une balise <a href=""> qui est un lien, soit on met une balise <button> on mélange pas les deux.
Modifié par JENCAL (26 Feb 2016 - 15:33)

JENCAL a écrit :
Oué on peut t'aider, mais il nous faut plus d'informations, pour insérer un événement dans un bouton, il faut gérer cela en JavaScript avec onclick=""; qui appel ta fonction javascript.

<button class="view-more"  onclick="ta_fonction_javascript()">Voir plus</button>

sinon mettre un " lien dans la balise button " n'a pas de sens, soit on met une balise &lt;a href=""&gt; qui est un lien, soit on met une balise &lt;button&gt; on mélange pas les deux.

Ah ok merci, en fait j'ai utiliser ce tuto : http://blogdummi.fr/developpement/tutoriel-pour-creer-un-portfolio-avec-tri/

je crois que là c'est un peu trop compliqué pour moi le javascript je maîtrise pas terrible !



Audrey

Après on est là pour aider.
Si tu expliquer clairement ce que tu souhaite on peut te mettre sur la bonne voie.

Bonjour Audrey,

audreyb31 a écrit :
créer les liens avec URL pour que quand on clique que view more on arrive à l'url en question

Ne serais-tu pas en train de décrire le comportement par défaut d'une balise <a> ?

Pour rappel, un lien peut cibler une page/fichier, oui bien sûr mais pas que.
Un lien peut aussi pointer vers une ancre de page ce qui a pour effet de faire défiler le contenu jusqu'à placer la cible sur la première ligne d'affichage.

Après un view more qui renvoi à Perpette La Galette, je trouve cela... Disons juste que j'utiliserais ce genre de dénomination pour des volets coulissants. Ne serait-ce pas une solution pour toi ?
Modifié par Greg_Lumiere (26 Feb 2016 - 16:05)

Greg_Lumiere a écrit :
Bonjour Audrey,

Ne serais-tu pas en train de décrire le comportement par défaut d'une balise &lt;a&gt; ?

Pour rappel, un lien peut cibler une page/fichier, oui bien sûr mais pas que.
Un lien peut aussi pointer vers une ancre de page ce qui a pour effet de faire défiler le contenu jusqu'à placer la cible sur la première ligne d'affichage.

Après un view more qui renvoi à Perpette La Galette, je trouve cela... Disons juste que j'utiliserais ce genre de dénomination pour des volets coulissants. Ne serait-ce pas une solution pour toi ?

Ben si moi aussi j'utiliserais mieux <a href =""> mais j'aurais aimé garder ce tuto portfolio mais quand j'essai d'inclure mon <a href=""> ça pete tout !

Donc selon toi, ce tuto n'est pas bon ?

Merci

Heu... je l'ai lu en diagonale. J'y jette un oeil...

D'ici là quelqu'un aura peut-être trouvé.

Pourrais-tu nous envoyer ton code stp afin d'avoir une vue précise du sujet et des attentes ?

D'autre part, ce fameux lien, tu l'insère à quel niveau ? Je parie que tu l'as mis dans le wrapper. Vrai ou faux ?
EDIT : Oups je viens de trouver le bouton. Autant pour moi.
Modifié par Greg_Lumiere (26 Feb 2016 - 16:17)

Je pense avoir compris une partie du problème.

Si tu as recopié telle quel le tuto, tu n'auras peut-être pas fait attention au fait que l'élément button, qui est un élément de formulaire, n'est ici rattaché à aucune cible.
En principe ce bouton est inclus dans un élément form et renvoi vers ce qui est précisé dans l'attribut Action.

Je sais qu'on peut définir un formaction au bouton qui est différent de celui de l'élément form. Par contre je ne sais pas si la présence de celle-ci est obligatoire.

Ce qui ne dit pas pourquoi lorsque tu remplace <buton> par <a> cela casse ton design.
Modifié par Greg_Lumiere (26 Feb 2016 - 16:25)

Greg_Lumiere a écrit :
Je pense avoir compris une partie du problème.

Si tu as recopié telle quel le tuto, tu n'auras peut-être pas fait attention au fait que l'élément button, qui est un élément de formulaire, n'est ici rattaché à aucune cible.
En principe ce bouton est inclus dans un élément form et renvoi vers ce qui est précisé dans l'attribut Action.

Je sais qu'on peut définir un formaction au bouton qui est différent de celui de l'élément form. Par contre je ne sais pas si la présence de celle-ci est obligatoire.

Ce qui ne dit pas pourquoi lorsque tu remplace &lt;buton&gt; par &lt;a&gt; cela casse ton design.

Merci bcp d'avoir pris le temps de regarder cela, je vais essayer de creuser un peu, mais je pense que je vais laisser tomber sinon car là c'est un peu chaud pour moi, je vais m'inspirer de ce tuto pour faire mon propre portfolio

mercii encore

Ce qui est intéressant dans les tutoriaux de ce genre est de décortiquer la mécanique utilisée afin de la comprendre, l'assimiler puis se l'approprier.

Si ton but est l'apprentissage des langages, tenter de faire ton propre portfolio t'apprendra énormément.

Sinon tourne toi plutôt vers des modèle en pré-fabriqué. Tu insères tes photos, tu mets tes légendes, un peu de couleurs par ici et deux trois trucs par là et tu auras quelque-chose qui fonctionne en un minimum d'effort.
D'autant que certains possèdent des petites fonctionnalités bien sympathiques.

Bonjour,

Greg_Lumiere a écrit :
Par contre je ne sais pas si la présence de celle-ci est obligatoire.

En théorie, il faut une balise <form> si l'on veut que le bouton puisse être un "successsful-control", c'est à dire un bouton pouvant envoyer des données au serveur.

Voir https://www.w3.org/TR/html401/interact/forms.html#successful-controls

Amicalement,

Merci à vous deux, je vais regarder tout ça

Amicalement

Audrey

Merci Parsimonhi.

Du coup ça vient de me faire tilt. On ne peut pas remplacer le bouton par un lien ; tout simplement car celui-ci est déjà contenu dans un lien. Un lien ne peut contenir un lien.

Une seule solution, entourer le bouton d'une balise de formulaire et renseigner l'attribut Action.

Par contre je pense que cela invalide le code.

****************

En fait je crois que le bouton est décoratif et que c'est le lien .item qui est censé renvoyer vers une page (ou autre). Dans la démo fournie, l'attribut Href n'est pas précisé. Sur le tutoriel lui-même, les url ne portent pas d'extension.

Audrey, qu'en est-il sur ton code, l'url renseignée est-elle absolument correcte ?

Greg_Lumiere a écrit :
Par contre je pense que cela invalide le code.

Non pas... J'utilise souvent cette méthode sur mes page wordpress en mode connecté pour éditer un article, plutôt qu'un lien, pas d'erreur de validation W3C :

<form action="<?php echo $editPost; ?>" method="post" target="_blank">
    <button title="Edit article" class="button"><span class="icon-pen"></span></button>
</form>

Olivier C a écrit :
Non pas d'erreur de validation W3C

Bonne nouvelle !

Super sujet, qui ouvre encore un peu plus le champs des possibles.

Un peu tardif, je ne vois ce sujet que maintenant.

Voici un vieux codepen basé sur un formulaire restyle et qui tri des images et leur descriptions, d'un coté , le tri permet d'envoyer le formulaire avec le tri choisi et de l'autre, vua CSS on peut avoir des effets visuels et un tri effectif visuellement avant même l'envoi du formulaire.

Coté serveur, on en fait ce que l'on veut, un PDF, un renvoi sur une autre page, un ZIP, etc ...

Le CSS bien kitch, c'est vraiment pour démontrer que l'on peut en faire n'importe quoi coté CSS , hein !

http://codepen.io/gcyrillus/pen/JFdEk ce n'est pas un tuto, mais la base :c'est :checked ~ elements_que_je_veux_cibler.