Diaporama HTML/CSS : déplacement des div au clic button

Bonjour,

Dans l'optique d'un site web 100% accessible, je me suis lancé dans un diapo sans JS, que devrait ressembler un peu à ceci.

<div class="diapo">
            <div class="diapo-menu prev">
              <button type="button" class="btn-prev"></button> 
            </div>
            <!-- -->
            <div class="diapo-masque">
              <div class="diapo-sliding">
              <ul>
              <li id="" class="min">
                <a href="...jpg" class="gallery lienhover1" title=""><img src="...png" alt="" title=""/></a>
                </li>
               <li id="" class="min">
                  <a href="...jpg" class="gallery lienhover1"><img src=".png" alt="/></a>
               </li>
                <li id="" class="min">
                  <a href="//.jpg" class="gallery lienhover1"><img src="//.png" alt=""/></a>
                </li>          
               <li id="" class="min">
                  <a href="//.jpg" class="gallery lienhover1"><img src="//.png" alt=""/></a>
               </li>
               </ul>
               </div>
             </div>
             <!-- -->
             <div class="diapo-menu next">
              <button type="button" class="btn-next"></button>
             </div>
          </div>

/* Diapo des travaux , masque et boutons */

.diapo > div {display:inline-block;}
.diapo-menu{vertical-align:400%;}

.diapo-masque{width:900px; height:220px; overflow:hidden;}

button{background:none; border:none; cursor:pointer;}
.btn-prev{background-image:url(images/boutons-diapo.png); width:50px; height:50px;}
.btn-next{background-image:url(images/boutons-diapo.png); width:50px; height:50px; background-position:-50px;}
.btn-prev:hover{background-image:url(images/boutons-diapo.png); width:50px; height:50px; background-position:101px;}
.btn-next:hover{background-image:url(images/boutons-diapo.png); width:50px; height:50px; background-position:252px;}

#portfolio img{width:250px;} /* On définit la largeur de chaque miniature pour le sliding */
.prev button:active+.diapo-masque .diapo-sliding{left:-200px;}

L'idée est que la div .diapo-sliding, enfant de .diapo-masque, se déplace et que les côtés débordant de .diapo-masque disparaissent grâce à overflow:hidden, le tout au clic de l'élément button.

Mais pour le moment, le point sur lequel je bute vraiment est :

.prev button:active+.diapo-masque .diapo-sliding{left:-200px;}

Le ciblage adjacent ne semble pas fonctionner car tant que j'agis sur button:active j'arrive à lui appliquer des border, etc. mais dès que j'essaye d'atteindre .diapo-masque, je ne peux rien faire. Est ce possible de combiner sélecteur frere et enfant ? Est ce la syntaxe qui est mauvaise ?

bonsoir,

Est ce que diapo-sliding a un positionnement fixe , absolute ou relative qui permette de le deplacer comme tu essais?

Ensuite ton CSS ne colle pas avec ta structure HTML et ton button n'est pas adjacent aux parents des images.

J'ai bien 2 exemples qui se base sur du :focus plutôt que des éléments de formulaire mais sur le fond, la méthode de ciblage est la même , l'adjacent suivant dans le flux avec du positionnement.

http://dabblet.com/gist/4012733 (souris sous pression uniquement demonstration css uniquement pas forcement a faire)

et basic : http://yidille.free.fr/plux/valign/?60-slide-css3-minimaliste (au clic ou tabulation, il peut y avoir quelque chose d’intéressant a faire sur cette base) )

En bref, je pense que tu dois bien comprendre que pour piloter ton truc en CSS , il te faut bien comprendre le sélecteurs adjacent et que ta structure s'y prête.

Voici un autre exemple qui ressemblerait plus à ta structure et qui use de lien au lieu de button pour que ça marche http://yidille.free.fr/plux/valign/index.php?72-css3 (prévoir de mettre en place une astuce pour ne pas faire sauter la page si tu veut en faire usage).

Il te faut bien comprendre le fonctionnement de chaque approche avec leur limites et ne pas les mixé. Le mieux est de partir sur une structure HTML epuré et ensuite voir quel methode te semble la plus aisée a maitriser et réadapter legerement ton HTML (ajout de lien, de bouton, attribut tabindex ou rien )

++

J'ai compris où était le problème du ciblage et j'ai donc changé ceci :

.prev:active+div.diapo-masque div.diapo-sliding{margin-left:-250px;}

Donc le déplacement de .diapo-sliding se fait bien mais que lors du clic souris. Le positionnement d'origine se remet en place dès que je lache le clic ... Y'a t'il moyen de garder le déplacement et surtout, que ce déplacement s'additionne à chaque clic (pour faire défiler les images) ?

Edit: Je n'ai spécifié aucun position... Donc de mémoire c'est par défaut position static il me semble.

Edit 2: Pour te répondre franchement, je cherche d'abord à voir si ma méthode peut marcher car j'ai déjà vu quelques exemples sur internet comme ceux que tu me donnes et faire de multiples liens pour aller d'images en images, j'avoue ne pas y comprendre grand chose !
Modifié par osef_ (07 Nov 2012 - 02:42)

Bonsoir,

le comportement via le pseudo :active est normal, il te faut utiliser ou :focus(+tabindex="0" en attribut html) ou :target pour que les style perdurent jusqu'au prochain click ou nouvelle ancre ciblé.

++
Modifié par gc-nomade (08 Nov 2012 - 22:10)

Bonjour, Bonsoir,

Désolé de déterrer un peu ce topic mais j'ai encore un problème avec ce fameux diaporama HTML.

Me voila maintenant avec un menu avec 4 buttons qui lors d'un :focus trie les images et fait apparaître/disparaître une autre div. Mais voilà, le problème vient de :focus même. Lorsque je clique ailleurs, je reviens à l'état initial soit toutes mes images sans la div qui apparaît/disparaît et la navigation est impossible.
Tabindex=0 ne m'aide pas. J'ai cru lire ailleurs qu'il n'empêchait le focus que de la tabulation. Est ce possible d'empêcher un focus à la souris sur une div parent sans que ses enfants soient affectés ?


Je ne connais pas vraiment :target mais si j'ai bien compris lors de mes recherches, il permet de styler uniquement la cible d'un lien. Hors j'ai besoin pour ma navigation d'appliquer un display:block à une div et dans le même temps un display:none au reste, afin qu'une seule partie soit affichée.

Me reste il des solutions ?

bon l'astuce avec :focus c'est

:focus {/*style ou pas comme display:none; ? */}
:focus + div {/* style pour mettre en avant plan comme  display:block; */}

avec les elements a afficher qui se cotoient.

avec :target se serait

#id {/*style ou pas comme display:none; ? */}
#id:target {/* style pour mettre en avant plan comme  display:block; ?*/}

avec #id qui contient le lien vers la prochaine cible.(+ 1 astuce pour que la page ne saute pas dans tout les sens)

Ce qu'il faut c'est comprendre les effet CSS et de les insérer dans ton scenario .
Tes acteurs sont tes éléments HTML.
Alors ou tu recrute en fonction du scenario, ou tu fais le scenario en fonction des acteurs.

++

Merci vraiment cg-nomade pour ton aide !

a écrit :

bon l'astuce avec :focus c'est

:focus {/*style ou pas comme display:none; ? */}
:focus + div {/* style pour mettre en avant plan comme display:block; */}


avec les elements a afficher qui se cotoient.

Pourrais tu developper ?

Voilà l'état actuel de ma structure :

			<button type="button" class="btn-content logo"><h3>Logotypes</h3></button>
			
			<button type="button" class="btn-content imp"><h3>Imprimés</h3></button>

			<button type="button" class="btn-content web"><h3>Webdesign</h3></button>
			
			<button type="button" class="btn-content projets"><h3>Projets</h3></button>

			<div id="viewer">
				<div class="view-img">
					<a href="" class="gallery cboxElement"><img src="" alt="" class="logo"/></a>
				</div>
				<div class="view-img">
					<a href="" class="gallery cboxElement"><img src="" alt="" class="imp"/></a>
				</div>
				<div class="view-img">
					<a href="" class="gallery cboxElement"><img src="" alt="Logo " class="logo"/></a>
				</div>
				<div class="view-img">
					<a href=g" class="gallery cboxElement"><img src="" alt="" class="logo"/></a>
				</div>
				<div id="view-projets">
					<h4>Ceci est la page des projets</h4>
				</div>
			</div>

Et voici comment j'ai procédé pour les :focus

button.btn-content.logo:focus ~ #viewer img.imp{display:none;} 
button.btn-content.logo:focus ~ #viewer img.web{display:none;}
button.btn-content.imp:focus ~ #viewer img.logo{display:none;} 
button.btn-content.imp:focus ~ #viewer img.web{display:none;}
button.btn-content.web:focus ~ #viewer img.logo{display:none;} 
button.btn-content.web:focus ~ #viewer img.imp{display:none;}

#view-projets{display:none;}
button.btn-content.projets:focus ~ #viewer #view-projets{display:block;} 
button.btn-content.projets:focus ~ #viewer img.imp{display:none;}  
button.btn-content.projets:focus ~ #viewer img.logo{display:none;}  
button.btn-content.projets:focus ~ #viewer img.web{display:none;}

Comment faire pour que je ne perde pas le focus, lorsque je clique ailleurs que sur les buttons du menu ?
Modifié par osef_ (15 Nov 2012 - 18:09)

osef_ a écrit :

Comment faire pour que je ne perde pas le focus, lorsque je clique ailleurs que sur les buttons du menu ?

Tu ne peux pas avoir le focus sur deux éléments à la fois, l'astuce consiste justement a deplacer le focus au click ou via tab.

si tu veux que ton diapo se cale sur un élément et cliquer ou bon te semble, alors la piste c'est les checkboxe ou bouton radio.
sinon javascript.

C'est vrai que les buttons radio (avec :checked je suppose ?) se prêtent plutôt bien à ce que je veux faire.
Mais cela me met face à 2 problèmes : Je dois mettre des <label> pour que le :checked se fasse sur le texte du menu

			<label><input type="radio" name="catégories" value="logo" class="catégories logo">Logotypes</input></label>
			<label><input type="radio" name="catégories" value="imp" class="catégories imp">Imprimés</input></label>
			<label><input type="radio" name="catégories" value="web" class="catégories web">Webdesign</input></label>
			<label><input type="radio" name="catégories" value="projets" class="catégories projets">Projets</input></label>
<div id="viewer">...</div>

et si input devient enfant, je ne peux plus (du moins avec mes connaissances en selecteurs CSS) cibler #viewer s'il n'est plus frère de input :

input.logo:checked ~ #viewer img.imp{display:none;} input.logo:checked ~ #viewer img.web{display:none;}
input.imp:checked ~ #viewer img.logo{display:none;} input.imp:checked ~ #viewer img.web{display:none;}
input.web:checked ~ #viewer img.logo{display:none;} input.web:checked ~ #viewer img.imp{display:none;}

Et 2e problème, c'est compatible IE9 uniquement ^^v .

Donc je crois qu'il me reste plus comme dernière possibilité les ancres et un peu de :target ... Je vais faire quelques tests, mais je ne suis pas sûr que je pourrais faire ce que je veux avec ça ...
Modifié par osef_ (16 Nov 2012 - 18:23)