28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Sur mon site internet www.docphone.org, j'avais mis un bouton "Je passe commande" avant la fin de chacune de mes sections.

Le problème est que du coup cela faisait baisser le poids de mes mots clés de part la redondance du texte du bouton.

J'ai donc fait un seul bouton que j'ai positionné au milieu en bas de page en fixed mias du coup on y prête pas vraiment attention.

J'aimerai savoir si il est possible, en fonction de la position où l'on se trouve sur la page de faire apparaître et disparaître ce bouton à la fin de la section en cours de lecture sans pour autant qu'il ne soit dupliqué dans le code source.

J'espère avoir assez bien décrit mon besoin et que vous pourrez m'aider Smiley cligne , merci d'avance
Bonjour. Si peu de texte fait baisser la moyenne ? Je n'en reviens pas.

Sinon, là tout de suite, je vois deux méthodes :
- soit utiliser du css
- soit utiliser le javascript

Pour le css, vous pourriez mettre le texte du lien dans un pseudo élément :after, mais il n'est pas dit qu'il ne soit pas référencé, et puis cela ferait un lien vide sinon...

En javascript (via jQuery), vous pouvez utiliser la méthode .append(). Ce qui donnerait ceci :
$( 'section' ).append( '<a href="#order">Je passe Commande</a>' );

Mais pour optimiser le truc, afin de ne cibler uniquement que les sections voulues, à votre place j'ajouterais une nouvelle class pour toutes les sections concernées :
$( '.sectionAvecBouton' ).append( '<a href="#order">Je passe Commande</a>' );
Docphone a écrit :
J'aimerai savoir si il est possible, en fonction de la position où l'on se trouve sur la page de faire apparaître et disparaître ce bouton à la fin de la section en cours de lecture sans pour autant qu'il ne soit dupliqué dans le code source.

Si "la position où l'on se trouve" signifie la position de la souris, c'est effectivement possible.
Mais comment savoir ce que lit vraiment l'utilisateur s'il n'a pas de souris?
Sinon tu peux faire des sections qui s'ouvrent sur un clic en fermant toutes les autres. TU sauras alors où en est le lecteur et tu peux déplacer le bouton à un endroit convenable.
Tu peux aussi afficher ta page avec un seul bouton, lancer un timer et faire générer les autres boutons par JS, sachant que le référencement s'effectue sur la page telle qu'elle apparait au chargement sans exécution éventuelle de JS.
Bref, plein de pistes...
Modifié par PapyJP (27 Jan 2015 - 14:35)
Bonjour,

Merci pour vos pistes de réflexions.

Bien entendu il ne s'agit pas de la position de la souris sauf si on peut faire un truc du genre :
"si curseur dans section x alors bouton dans section x, si curseur dans section y alors bouton dans section y...

Merci si vous avez d'autres idées comme ça je prendrai celle qui me conviendra le mieux Smiley biggrin
Docphone a écrit :
Bonjour,

Merci pour vos pistes de réflexions.

Bien entendu il ne s'agit pas de la position de la souris sauf si on peut faire un truc du genre :
&quot;si curseur dans section x alors bouton dans section x, si curseur dans section y alors bouton dans section y...

Merci si vous avez d'autres idées comme ça je prendrai celle qui me conviendra le mieux Smiley biggrin

Bien sûr que c'est faisable, mais je ne suis tout à fait sûr que ce soit une ergonomie acceptable de voir le bouton sauter de place en place quand la souris dépasse une certaine limite.
Voir la page http://www.alma-musica.net: l'allure de la page dépend de la position de la souris, c'est codé en javascript (trop compliqué à faire en CSS only, du moins je n'y suis pas parvenu). Mais je me suis bien gardé de faire déplacer quelque chose.

Autre piste: mettre le texte du bouton en image (et une seule fois le texte en alt si tu y tiens).

Mais franchement es tu bien sûr que "Le problème est que du coup cela faisait baisser le poids de mes mots clés de par la redondance du texte du bouton."
Je suis comme Olivier, "j'ai des doutes" (comme disait le regretté Raymond Devos)
Modifié par PapyJP (27 Jan 2015 - 19:27)
bonsoir,

idem,
Je ne suit pas convaincu de cette histoire de mot clés !!??
c'est un problème d'ergonomie, texte du lien, scenario, intérêt/interactivité proposé au visiteur, ...

Les pseudo-element sur un lien peuvent le dupliquer http://codepen.io/gc-nomade/pen/xbLGVP , pour donner une réponse orientée CSS.
Voilà, on a mis en place le code ci-dessous :

jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > 4200) {
jQuery('#container-passecomm').fadeOut();
} else {
jQuery('#container-passecomm').fadeIn();
}
});

Le bouton disparaît au bout de 4200px et donc cela dépend de la résolution de l'écran. Est-il possible de lui dire d'être visible seulement entre la section x et la section y ?

Merci d'avance.
Modifié par Docphone (01 Feb 2015 - 23:44)