Défilement indépendant d'un tableau

Sujet résolu

1 septembre 2019 à 19:05:03

Bonjour,

Sur la page du site http://www.bibliotheque-nancy-pepiniere.fr/tsleslivres.php , le défilement du tableau se fait sur la page principale. Dans cette présentation, puisqu'il s'agit de tous les livres, et qu'il y en a environ 3000, si l'on veut intégrer d'autres informations dans la page, il faut aller au bout, et on est pas arrivé..., Ou bien, il faut faire un lien vers une autre page contenant ces infos à l'aide d'un lien. Ce qui est déjà fait.

Je voudrais faire évoluer la page d'accueil, et présenter d'avantage le contenu du site, et en particulier le catalogue, mais de manière succeinte. Je pense qu'il est possible d'intégrer le catalogue (par ex tous les livres) dans une zone limitée en dimensions, comprenant un scroll indépendant du scroll de la page HTML.

Ce que j'ai pu faire jusqu'à présent n'a pas fonctionné, le tableau étant peut-être une difficulté supplémentaire.

Je viens de m'apercevoir que la dernière phrase "Ce que j'ai pu faire jusqu'à présent..." a provoqué l'apparition d'un scroll vertical. C'est exactement ce que je souhaite.

Si quelqu'un peut m'orienter vers un cours ou a la solution HTML + CSS je suis preneur.

A.S.

philiga

1 septembre 2019 à 20:27:52

Bonsoir,

Il y d'abord un bug -je pense- à corriger: un tableau vide avant ton tableau de 3000 livres...

<table></table> à supprimer à priori (à moins qu'il n'ait un usage futur prévu).

Cela dit, pour avoir ta barre de scroll vertical, c'est simple: tu donnes une hauteur déterminée, donc finie au conteneur <div id="table"> et l'instruction overflow.

Par exemple:

    height: 80vw;
    border: 5px ridge silver;
    overflow-y: scroll;

C'est effectivement mieux qu'une page interminable!

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

dédé46

3 septembre 2019 à 16:56:33

Bonjour,

Réponse rapide et efficace, merci, ça marche. Il ne me reste plus qu'à bosser. Pour les balises
<table></table>, il semble nécessaire de conserver </table> qui apparaît répondre à <table width='100%'; border='2';> dans Notepad.

Je suis allé voir à quoi correspondait VW. Je ne connaissais pas. Confirme moi que ce type d'unité est bien adapté aux variations de tailles d'écran, notamment lorsqu'on veut qu'un site soit bien visible sur les Smartphones. Merci pour ton aide. Je conserve bien précieusement tes coordonnées pour le cas où d'autres questions se présenteraient.

Bien cordialement

A. Schneider.

philiga

3 septembre 2019 à 23:12:47

Bonsoir,

Pour table, oui il faut toujours fermer un <table> par </table>, mais tu avais les deux en double.

Le 2ème (ou 1er) tableau vide semble avoir disparu...

Pour le vw, oui, c'est une unité adaptée à tous les écrans (la diminution de taille objective est compensée par le rapprochement de l'écran sur les petites machines ; l'effet subjectif reste donc similaire).

"Le vw équivaut à 1/100e de la largeur de la fenêtre et le vh équivaut à 1/100e de sa hauteur."

https://www.w3.org/Style/Examples/007/units.fr.html#future

Sinon, -si je puis me permettre- ton code est vraiment vieillot dans sa structure, comme dans son look; tu devrais tenter de le moderniser un peu.

Tout d'abord en remplaçant la 1ère ligne par le doctype html5:

<!DOCTYPE html>

Plus simple et plus puissant.

Et en évitant ensuite notamment de faire de la mise en page à coup d'espaces répétées (les   entre tes menus).

C'est au CSS de gérer les espacements et alignements.

Au besoin, prends le temps de parcourir un cours d'HTML-CSS sur ce site ou un autre.

Et visuellement, un peu de bordures et d"ombrages sur ces menus pourraient les rendre plus attractifs...

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

dédé46

4 septembre 2019 à 18:16:01

Bonjour,

Je suis en plein remaniement du site. La 1ère page va être changée, et toutes les pages comportant des <ul> et des <li> vont être modifiées. De plus, le nombre d'onglets va être diminué. Le plus gros travail va consister à faire ce que j'ai fait pour les années 2015 à 2019. Si tu fais une recherche sur 2014... On trouve encore quelques bouquins de 1963 (à vérifier à la bibliothèque). Bref, j'en ai pour quelques mois.

J'ai fait évoluer le site en 2012 en permettant aux lectrices et lecteurs de voir la vignette et de consulter la 4ème de couverture des livres que nous achetons régulièrement. Je m'en suis servi comme ressource. Par ex "Juliette dans son bain" en 2015. Dans SQL le code est:

<a href="nouvfev15.php#2">Juliette dans son bain</a><br /><strong>Métin Arditi</strong><br />Roman 2015<br /><br />
Kandiotis ! Kandiotis ! Kandiotis ! La France résonne du nom de Kandiotis, le richissime Kandiotis, le mécène Kandiotis, qui est invité au journal télévisé de 20h pour annoncer le don à la France de deux tableaux, l'un de Picasso, l'autre de Braque, qui portent le même nom, Juliette dans son bain. <br /><br />

Ensuite, si la lectrice est intéressée et veut en savoir plus, en cliquant sur le lien, elle passe de la 4ème informative réduite à la totalité de la 4ème dans l'URL avec l'extension nouvfev15.php#2. (Je ne sais pas faire le retour vers la recherche 2015, ce n'est pas élégant, mais on peut toujours reculer d'une page de manière classique).

De 2011 à 1963 il faudra que je crée des pages comportant les pages des 4ème des livres de ces périodes. Ce que je trouve assez lourd. Je me demandais s'il était possible d'ouvrir un nouveau champ dans SQL qui comprendrait la totalité de la 4ème. On passerait du champ à 4ème réduite au champ à 4ème totale par un lien. Cela réduirait considérablement les manips. Est ce que c'est possible? As-tu des lumières là dessus?

Pour l'amélioration des codes, merci de tes conseils que je m'efforcerai de suivre après avoir modifié tous les champs de la BDD, c'est à dire dans quelques mois. J'avais suivi les cours de Mathieu Nébra en 2009 2010. Est-ce que des choses ont radicalement changé en 10 ans?

Merci encore.

A.S.

philiga

4 septembre 2019 à 21:00:16

Ce qui a changé depuis 10ans, c'est justement HTML5 avec son doctype simplifié et de nouvelles balises à la sémantique explicite comme <nav>, <aside>, <section>, etc...

Sinon, je n'y connais rien en SQL, mais une suggestion: quitte à restructurer le site, pourquoi ne pas repartir à neuf sur une base WordPress?

C'est simple à installer et cela offrirait tout un tas d'outils précieux.

Il y a une infinité d'extensions qui permettraient notamment d'améliorer l'affichage avec des tableaux filtrants comme

TablePress

https://kinsta.com/fr/blog/tableaux-dans-wordpress-tablepress/

Démo: https://tablepress.org/demo/

Posts Table Pro

(Démo ici: https://poststablepro.barn2.co.uk/)

Il semble -curieusement- qu'on trouve difficilement un plugin de gestion de bibliothèque, mais l'excellent Participants Database est un outil polyvalent et clair de gestion d'une base de donnée qui pourrait peut-être être utile aussi.

-
Edité par philiga 4 septembre 2019 à 21:10:38

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

dédé46

11 septembre 2019 à 17:12:57

Bonjour,

Merci pour tes suggestions. Ce devrait-être intéressant à découvrir. L'informatique est d'une telle richesse... Cependant, revoir le site sous un nouvel angle (sa gestion demande déjà pas mal de travail) exigerait beaucoup de temps pour un homme seul. D'autant plus que je ne suis pas dessus H24.

Je continue donc mes modifs comme prévu, et te préviendrai lorsque la nouvelle mouture sera en ligne.

Je ne sais pas s'il faut indiquer que le sujet est résolu.

Encore merci.

A.S.

philiga

11 septembre 2019 à 20:55:24

Oui, tu peux le marquer résolu.

Bonne continuation en pur html alors...!

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)