5546 sujets

Sémantique web et HTML

Bonjour

je fais un portfolio et je n'arrive pas a intégrer mon lien dans la balise <button> :

<button class="view-more">Voir plus</button>

quelqu'un peut m'aider ?

Merci d'avance Smiley ravi

Audrey
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.

&lt;button class="view-more"  onclick="ta_fonction_javascript()"&gt;Voir plus&lt;/button&gt;


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 !

Smiley ohwell

Audrey
Après on est là pour aider.
Si tu expliquer clairement ce que tu souhaite on peut te mettre sur la bonne voie.
Modérateur
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
Greg_Lumiere a écrit :
Heu... je l'ai lu en diagonale. J'y jette un oeil...

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


Merci greg Smiley biggrin
Modérateur
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)
Modérateur
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 Smiley cligne

mercii encore
Smiley ravi
Modérateur
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.
Modérateur
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>
Modérateur
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.
Modérateur
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 Smiley cligne !

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