8768 sujets

Développement web côté serveur, CMS

Afficher/masquer une image et un texte

Bonjour,
Le sommaire de mon site se présente comme une suite de numéros. J’aimerai qu’au clic sur chaque numéro apparaisse la photo du projet correspondant ainsi que le texte descriptif.
Est-ce que mes images et mon texte doivent-être dans une même div? Je ne sais pas comment organiser les éléments. Je suis en css/html. Je ne maitrise pas trop javascript.
Merci d’avance
Modifié par juliettedh (03 Oct 2018 - 17:41)
Merci beaucoup pour la réponse. J'ai essayé avec les checkboxs, le soucis est que je ne souhaite pas de cascade dans l'affichage des mes images, j'ai pourtant spécifié position fixe. J'aimerai aussi qu'il y ait toujours une image d'affichée, c'est-à-dire qu'elle puisse pas se refermer.
Modérateur
bazooka07 a écrit :
Javascript est inutile pour faire cela.
checkbox et css peuvent faire le job :
https://codepen.io/bazooka07/pen/OBMYQP
le HTML est généré à partir de Jad

@niuxe,
Comment tu les trouves Smiley lol


Tu t'es cassé la tête pour pas grand chose.... en HTML pur !

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <details open>
       <summary>ron ron ron </summary>
       <div>
           <figure>
               <img src="http://placekitten.com/160/100" alt="">
               <figcaption>Minettte</figcaption>
           </figure>
       </div>
    </details>
    <details>
       <summary>grrrr grrrrr grrrrr</summary>
       <div>
           <figure>
               <img src="http://placekitten.com/160/100" alt="">
               <figcaption>Minou</figcaption>
           </figure>
       </div>
    </details>
    <details>
       <summary>miaou miaou</summary>
       <div>
           <figure>
               <img src="http://placekitten.com/160/100" alt="">
               <figcaption>Titus</figcaption>
           </figure>
       </div>
    </details>
</html>


Tu remarqueras que j'ai fait un suivi de source Smiley smile Smiley lol

Cela dit, ta solution est très inréressante. Je la connaissais et elle permet de créer un vrai accordéon (input radio au lieu de checkbox). Cependant, sémantiquement parlant, je trouve pas très juste. On est pas dans un <form>
Modifié par niuxe (04 Oct 2018 - 18:03)
Non, je n'ai rien cassé ni ma tête, ni mon clavier Smiley biggrin

J'avais vu cela il y a quelque temps à propos des nouveautés de HTML5, mais faute de ne pas l'avoir utilisé, c'est un peu tombé dans les oubliettes. Merci de me rafraichir la mémoire.

Et je suis impardonnable car il y a un tuto sur Alsacreations :
https://www.alsacreations.com/article/lire/1335-html5-details-summary.html
Je vais donc avoir la joie d'être le 64743ème lecteur

C'est vrai qu'employer un checkbox en l'absence de <form> n'est pas très correct au point de vue sémantique. C'est pour cela que je ne lui donne pas d'attribut name.
J'utilise ce hack pour masquer/afficher un menu avec une icone burger ou triple bar en responsive design. Il me semble avoir vu une fois quelqu'un l'avoir fait en pure CSS mais je ne retrouve pas le lien.

Merci pour l'info et le suivi des sources Smiley lol
Modifié par bazooka07 (04 Oct 2018 - 22:49)
Modérateur
@juliettedh :
Tu veux parler de ce genre de choses ?
(Il n'y a pas de JSn mais c'est de la bidouille dégueu)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #galerie .content{
            position: relative;
            width: 300px;
        }
        #galerie .nav{
            margin: 15px 0;
        }
        #galerie label{
            cursor: pointer;
            display: inline-block;
            padding: 5px 8px;
            border-radius: 3px;
            border: 1px solid #666;
            background: #efefef;
        }
        #galerie input{
            position: absolute;
            left: -5000px;
        }
        #galerie input + *{
            display: none;
        }
        #galerie input:checked + *{
            display: block;
        }
    </style>
</head>
<body>
    <div id="galerie">
                <div class="nav">
                            <label for="_1">image 1</label>
                            <label for="_2">image 2</label>
                            <label for="_3">image 3</label>
                            <label for="_4">image 4</label>
                            <label for="_5">image 5</label>
                            <label for="_6">image 6</label>
                    </div>
        <div class="content">
                    <div class="item">
                <input type="radio" name="port_galerie" id="_1" checked>
                <div>
                    <img src="http://placekitten.com/200/300" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
                    <div class="item">
                <input type="radio" name="port_galerie" id="_2" >
                <div>
                    <img src="http://placekitten.com/200/200" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
                    <div class="item">
                <input type="radio" name="port_galerie" id="_3" >
                <div>
                    <img src="http://placekitten.com/300/200" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
                    <div class="item">
                <input type="radio" name="port_galerie" id="_4" >
                <div>
                    <img src="http://placekitten.com/300/100" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
                    <div class="item">
                <input type="radio" name="port_galerie" id="_5" >
                <div>
                    <img src="http://placekitten.com/300/300" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
                    <div class="item">
                <input type="radio" name="port_galerie" id="_6" >
                <div>
                    <img src="http://placekitten.com/100/300" alt="">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
                </div>
    </div>
</body>
</html>

Modifié par niuxe (04 Oct 2018 - 23:50)
Meilleure solution
Modérateur
bazooka07 a écrit :
Cela ressemble à des onglets

Remplacer les checkboxes par des radios et mettre les labels en position: absolute :
https://codepen.io/bazooka07/pen/ZqOOLr


En fait, c'est plus simple de regrouper les label en un seul endroit. Oui, je sais pour la sémantique, on repassera. Mais pour ce type d'exercice, on s'en moque de la sémantique vu qu'il y a des input (hack (bidouille) intersidérale...).

Je ne suis pas accro du absolute (le texte faisant plus de 33%, ça va déborder...)

bazooka07 a écrit :
remplacer les &lt;div&gt; par des &lt;fig&gt;


+1

bazooka07 a écrit :
@niuxe,
Tu m'as coupé l'herbe sous les pieds Smiley biggrin


Smiley murf
Modifié par niuxe (05 Oct 2018 - 01:20)
coller le label juste après le checkbox est la plus simple façon de mettre en évidence l'onglet actif sans utiliser JS.

Pour éviter que le texte déborde du label, inline-block, nowrap, overflow-x font l'affaire

Pour éviter les absolute, il y a peut-être une solution avec display-grid et ses templates

j'ai mis à jour mon codepen. Enjoy it !
https://codepen.io/bazooka07/pen/ZqOOLr 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Coucou mes chatons</title>
    <style>
		* { box-sizing: border-box; }			
		body { background: #666; box-sizing: border-box}
		.container {
			position: relative;
			width: 310px;
			margin: 1rem auto 0; padding: 2rem 5px 2px;
			min-height: 75px;
			transition: height 1s ease;
			background-color: wheat;
		}
		.container input[type="radio"] { display: none; }
		.container label {
			position: absolute;
			top: 0;
			display: inline-block;
			width: 33%;
			overflow-x: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding: 0.3rem;
			text-align: center;
		}
		.container label[for="id1"] { left: 0; }
		.container label[for="id2"] { left: 33%; }
		.container label[for="id3"] { left: 66%; }
		.container figure { display: none; margin:0; text-align: center; }
		.container input[type="radio"]:checked + label + figure { display: initial; }
		.container input[type="radio"]:checked + label { background-color: #444; color: #fff; }
		.container figure img { max-width: 100%;}
    </style>
</head>
<body>
	<div class="container">
		<input type="radio" name="tabs" id="id1" checked />
		<label for="id1" title="Mimi">Mimi</label>
		<figure>
			<img src="http://placekitten.com/300/199" alt="Photo de Mistigri" />
			<figcaption>Mistigri</figcaption>
		</figure>

		<input type="radio" name="tabs" id="id2"/>
		<label for="id2" title="Minou le plus bavard">Minou le plus bavard</label>
		<figure>
			<img src="http://placekitten.com/300/200" alt="Photo de Minettes" />
			<figcaption>Minettes</figcaption>
		</figure>

		<input type="radio" name="tabs" id="id3"/>
		<label for="id3" title="Minou 3">Minou 3</label>
		<figure>
			<img src="http://placekitten.com/375/250" alt="photo de Gros Matou"/>
			<figcaption>Gros Matou</figcaption>
		</figure>
	</div>
</html>

Modifié par bazooka07 (06 Oct 2018 - 11:54)
Modérateur
Sinon cette solution est très mauvaise, pas que pour la sémantique théorique.
C'est une horreur en terme d'interactivité.
Cela repose sur un comportement non normé et libre d'implémentation (le click sur le label qui active l'input), donc susceptible de casser sur l'une ou l'autre plateforme (futures ou passées).

Le javascript est beaucoup plus adapté pour ce genre de choses, même si c'est rigolo à faire pour le fun.
Modérateur
kustolovic a écrit :

Cela repose sur un comportement non normé et libre d'implémentation (le click sur le label qui active l'input), donc susceptible de casser sur l'une ou l'autre plateforme (futures ou passées).


D'une manière générale, que ce soit toi ou Bazooka ou moi sommes d'accord que c'est du hack. Cette manière de faire est à proscrire.

Cependant ton affirmation, je la réfute. Le comportement de l'attribut "for" est bien normé et je suis quasi certain que ce comportement sera encore là pour quelques années.
Modifié par niuxe (05 Oct 2018 - 17:23)
@kustolovic,

J'ai mis la démo sur le net à cette adresse :
https://kazimentou.fr/divers/demo-onglets.html

Le seul juge que je reconnaisse est le validateur du W3C :
https://validator.w3.org/nu/?doc=https%3A%2F%2Fkazimentou.fr%2Fdivers%2Fdemo-onglets.html

J'avais fait quelques erreurs mais elles sont corrigées. Donc, "pas vu, pas pris"
J'ai corrigé sur mon billet précèdent et sur Codepen.

@juliettedh
il y a une règle CSS supplémentaire pour éviter qu'une image trop grande déborde du container.
Sujet clos
Aller à