Re : Présentations des images dans les news [Design et CSS]

S'inscrire

Re : Présentations des images dans les news

Pascal C. 431
17/11/2021 15:36

#11

Pascal C. 431
17/11/2021 15:36

Citation :

Alain T a écrit :
Par exemple, la page http://lumieresdefrance.com/phpv2/mod ... ws/article.php?news_id=13
ne devait pas utiliser une table pour afficher les "Luminaire équipées du module LEDFlex de type C"

Regarde ce qu'il se passe en mode smartphone.
- Tes icones sont tout petits, ils devraient se trouver sur 2 lignes par exemples, ça serait mieux.
- la tableau plus bas n'est pas responsive et on ne voit plus les valeurs à droites
- Ton image http://lumieresdefrance.com/phpv2/aco ... s/ledflex_type_c/shot.jpg devrait être sur toute la largeur en mode md ou moins large (md, sm, xs)
- ton image bandeau haut devrait prendre toute la largeur du cadre
- Tes 6 courbes ne devraient pas rester en 3 colonnes en mode smartphone
- ...

Salut Alain,

Je prends le temps de me pencher sur tes explications et je me rends bien compte de l'intérêt de tes propos. Je vais tenter d'appliquer tes remarques une à une.

J'attaque par le "tableau non responsive".
En bossant dessus ce tableau (qui pour le moment ne me pose pas de problème), je me suis dit que ce serait bien de pouvoir afficher des onglets qui permettent d'afficher un tableau différent par lanterne.

Donc le me suis attelé à faire un truc de test qui fonctionne bien, mais je bute sur un détail.
Je voudrais que l'onglet menu1 (ici Owni) soit développé par défaut (sans devoir cliquer) et je n'y arrive pas.

Voici mon code :


<nav class="nav nav-tabs">

  <a class="nav-item nav-link active" href="#menu1" data-toggle="tab">Owni</a>

  <a class="nav-item nav-link" href="#menu2" data-toggle="tab">Cirrus</a>

      <a class="nav-item nav-link" href="#menu3" data-toggle="tab">Evo</a>

</nav>

<div class="tab-content">

  <div id="menu1" class="tab-pane fade ">

    <h3>Titre Owni</h3>

    <p>tableau Owni.</p>

  </div>

  <div id="menu2" class="tab-pane fade">

    <h3>Titre Cirrus</h3>

    <p>tableau Cirrus.</p>

  </div>

  <div id="menu3" class="tab-pane fade">

    <h3>Titre Evo</h3>

    <p>tableau Evo.</p>

  </div>

</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.0/umd/popper.min.js"></script>

<script src="js/bootstrap.min.js"></script>

Et le lien sur lequel on s'aperçoit bien que le menu n'est pas actif par défaut

Re : Présentations des images dans les news

Alain T 608
17/11/2021 15:54

#12

Alain T 608
17/11/2021 15:54

Hello,
bon je vois que tu es sur mes traces ... car j'ai eu le même soucis avec cette page par exemple :
https://www.monxoops.fr/modules/xmdoc/document.php?doc_id=5
Onglet "Caractéristiques".
J'essaye de me rappeler comment j'avais réglé le problème...
Ce n'est que du code et des tags me semble-il, je vais trouver

Sinon, cette solution, elle est très jolie pour les visiteurs mais lourdes pour le webmaster, tu verras qu'à la longue, elle est difficile à maintenir car tu as beaucoup d'information sur une seule page vu que pour chaque onglet tu as des infos,
Donc a force, tu vas passer du temps à trouver où se situe l'info...

Re : Présentations des images dans les news

Alain T 608
17/11/2021 16:05

#13

Alain T 608
17/11/2021 16:05

Bon,
sans aller dans le détail, il te manque des éléments de class qui impact pour le javascript qui est utilisé pour ce type d'élément.

Une fois de plus ta bible DOIT ÊTRE Bootstrap4 et pour ce composant, c'est par là

J'ai repris le code du 2ieme exemple (< nav >) et ça marche parfaitement.
Regarde dans mon bac à sable; tout en bas.

Re : Présentations des images dans les news

Pascal C. 431
17/11/2021 16:09

#14

Pascal C. 431
17/11/2021 16:09

Merci Alain.

Je me suis fais la remarque aussi sur la lourdeur de la page. Mais je vais bien tout commenter et si j'ai besoin d'une modif sur un tableau, je pourrais du coup facilement l'extraire pour le modifier et le recoller à sa place ensuite.
Ca ne doit pas prendre bien longtemps si je procède correctement.

Plus je regarde ces modifs, et plus je trouve cela intéressant car les possibilité sont grandes

Par contre, ça va vraiment changer mes habitudes... au début je vais y passer du temps.

Re : Présentations des images dans les news

Alain T 608
17/11/2021 16:22

#15

Alain T 608
17/11/2021 16:22

Un inconvénient aussi c'est que si tu donnes un lien vers un onglet autre que le premier, le visiteur arrivera sur le premier onglet,
tu ne pourras pas le faire atteindre le 3ieme onglet directement, donc pour l'accès et la recherche, ce n'est pas si bien que cela.

Re : Présentations des images dans les news

Pascal C. 431
17/11/2021 16:40

#16

Pascal C. 431
17/11/2021 16:40

Merci Alain, j'ai réadapté et ça marche

J'oublie toujours un truc par ci par là, mais ça va venir...

Re : Présentations des images dans les news

Pascal C. 431
17/11/2021 16:49

#17

Pascal C. 431
17/11/2021 16:49

Citation :

Alain T a écrit :
Un inconvénient aussi c'est que si tu donnes un lien vers un onglet autre que le premier, le visiteur arrivera sur le premier onglet,
tu ne pourras pas le faire atteindre le 3ieme onglet directement, donc pour l'accès et la recherche, ce n'est pas si bien que cela.

Au besoin je peux toujours inverser les onglets sur chaque page pour que celui par défaut soit afficher systématiquement en premier mais ça devient plus contraignant du coup.

Dans mon cas précis, je ne pense pas que ce soit bien gênant pour la recherche car les mots clé doivent mener directement a la page produit et donc a l'article. Le tableau reste un élément secondaire... ou bien j'ai mal saisi ta remarque?

Re : Présentations des images dans les news

Alain T 608
17/11/2021 16:57

#18

Alain T 608
17/11/2021 16:57

Pour moi, cette page doit contenir les informations d'un unique produit
avec l'essentiel (infos commerciales sans doute, agicheuses) sur l'onglet 1

puis par exemple :
onglet 2 : informations techniques
onglet 3 : Photo en situation

Et il faut surtout garder cet ordre pour chaque page, ainsi le visiteur s'habitue rapidement lorsqu'il veut comparer 2 articles.

Donc oui, je pense que tu as saisie ma remarque.

Re : Présentations des images dans les news

Pascal C. 431
17/11/2021 17:11

#19

Pascal C. 431
17/11/2021 17:11

Ok, mais c'est pas l'idée de ce que je voulais faire en fait.

C'est en fait une page complémentaire d'un produit . Chaque onglet correspondrait à une option produit.

Je vais tenter d'aller au bout de mon idée, et je pense que ça va être bien compréhensible.
Je ferais tester à diverses personnes le monde de ma boite et je verrais bien leurs retours. Certains sont techniques, d'autres ne maitrisent pas nos produits, et d'autres encore savent à peine utiliser un ordi.

Si tout le monde s'y retrouve, ce sera parfait...
Sinon je changerais mon fusil d'épaule. Ce n'est pas grave, j'en suis encore à la structure de mes pages types, c'est donc le moment de faire des essais

Re : Présentations des images dans les news

Alain T 608
17/11/2021 17:22

#20

Alain T 608
17/11/2021 17:22

lol, je n'imposais rien, c'était juste une idée compatible avec ce type d'élément.
Sans connaître le projet il m'est difficile de te proposer une piste exactement comme tu l'envisages.
Ton idée me semble prometteuse, bien sur, poursuis donc !

Vas jusqu'au Bout(strap) !

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Re : Présentations des images dans les news

Discussions récentes

Commentaires récents