28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Mon objectif : Créer un slider (pour faire des liens avec les images).

J'ai bien compris et j'y suis arrivé avec le tuto suivant :
http://www.alsacreations.com/tuto/lire/1058-ID-slideshow-css3-target-animation.html

Voilà mon résultat
upload/60444-Capture666.JPG

J'ai juste remplacé le next et le prev par des zolies flèches.

Ensuite j'ai voulu essayer ce tuto-ci :
http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap1

Et là c'est le drame.... Impossible de le faire fonctionné, ni même d'obtenir quelque chose de correct.
Attention je ne souhaite surtout pas que quelqu'un me fasse le CSS qui va bien! Je souhaiterai juste savoir pourquoi au début du HTML l'auteur déclare ceci :


    <a id="wrap1" class="ancre"></a>
    <a id="wrap2" class="ancre"></a>
    <a id="wrap3" class="ancre"></a>
    <a id="wrap4" class="ancre"></a>

Pourquoi mettre l'id sur une balise <a> qui en plus n'est même pas une vraie balise <a> car il n'a pas préciser href ?
Si j'ai bien compris l'id devrait se mettre sur la photo. (Car ce qu'on vise avec la pseudo class target c'est la photo)
Mais évidemment lorsque nous faisons cela ça ne marche pas..... Smiley biggol

Désolé j'imagine que ma question doit paraître bien nulle pour certain mais là je sèche et je pense que s'est parce que je ne comprends pas pourquoi l'auteur de ce tuto à fait ça.
Modifié par Soxy95 (21 Nov 2015 - 20:39)
salut,
je n'ai pas vu l'article mais je connais la technique. Il s'agit de cibler un élément masqué précédent le véritable élément cible de tel sorte à annuler le scroll. On utilise donc les sélecteurs d'adjacence (+ et ~).

#fake-element:target+#element-a-afficher {/* ton code pour afficher l'élément */}

Par contre il est faux d'écrire

<a id="wrap1" class="ancre"></a>

Comme tu l'as dit, il n'y a pas d'attribut href et cela n'est donc pas un code valide.
On peut simplement remplacer les <a> par des <span> qui à mon sens est meilleur vu que d'une part, l'élément sera masqué et que d'autre part, les éléments span n'ont aucun sens sémantique.