je butte sur un problème peut-être con pour présenter une page html.
Cette page se présente de la façon suivante :
+--------------------------------------------------------------+
| MENU | ECRAN |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
+--------------------------------------------------------------+
Le div contenant le menu est de taille fixe, et ce n'est pas lui qui me pose problème.
La zone écran a un contenu variable et dynamique généré depuis du code php pour la plupart. J'obtiens systématiquement toute une série d'informations qui peuvent ou non apparaître, selon les écrans (titre, sous-titre, formulaire, tableau, etc).
Je souhaiterai que ma zone écran s'adapte à la hauteur d'affichage disponible dans le navigateur du client.
Je ne peux donc en fixer la taille dans un css, avec height:xxxxxpx, par exemple.
Or, je ne vois pas comment procéder pour faire ça, à part utiliser du javascript.
Si je n'ai vraiment pas le choix, je vais utiliser ça, mais là encore, je ne vois pas comment procéder. Car pour calculer la taille d'affichage, je ne vois pas vraiment sur quoi me baser, et la liste des objets et de leurs propriétés est vraiment trop "fournie" pour que je m'y retrouve.
Autre question : je voudrais éventuellement que le tableau inclus dans l'écran (si il y a lieu) soit lui-même scrollable, tout en conservant les en-têtes de tableau.
Je ne vois pas trop comment procéder. J'ai bien sûr cherché avec google, et trouvé pleins de pages traitant de ce sujet, mais rien de bien commenté ni de bien évident.
Merci pour vos pistes et votre aide.
P.S. : Non, ce n'est pas un TP, mes études sont finies depuis fort longtemps.
# C'est pas très clair
Posté par Cali_Mero . Évalué à 2.
Ceci dit, tu parles de la propriété height en css. Tu seras peut-être content d'apprendre que cette propriété marche aussi avec un pourcentage : height:100%; te donnera peut-être le résultat que tu souhaites...
[^] # Re: C'est pas très clair
Posté par Gyro Gearllose . Évalué à 2.
En résumé, et ce sera peut-être plus clair, c'est que seule la zone écran soit scrollable, en fonction de son contenu (bien souvent plus haut que la zone d'affichage).
Je ne veux pas que toute la page scrolle.
Le menu ne peut-être en position:fixed du fait de la conception de celui-ci.
Et je veux qu'il soit toujours accessible, donc que seul le reste scrolle.
Voilà, j'espère avoir été plus clair.
J'ai fait différents essais, et d'après ce que j'en ai compris :
- Le height:100% ne fonctionne pas avec le display:block;
- Si on précise un en-tête de tableau avec display:block; celui-ci est désolidarisé du reste du tableau, et du coup les colonnes ne correspondent plus.
Bref, voilà où j'en suis, mais je continue de chercher. Si je trouve quelque chose de probant, je posterai la solution ici, ça peut toujours servir...
En tout cas, merci de t'intéresser à mon problème.
[^] # Re: C'est pas très clair
Posté par Obsidian . Évalué à 3.
C'est loin d'être un problème con. L'ajustement précis de la hauteur d'un élément est en problème qui émaille régulièrement les forums consacrés aux CSS. D'ailleurs, une petite recherche permet déjà d'obtenir de bons éléments de réponse.
Le problème de la manchette latérale est le suivant : ton <div> est un élément à priori relatif à son container parent, ici le <body>. Or, la taille de celui-ci n'est pas connue à l'avance car il dépend de son contenu. La plupart des gens assimile le corps du document au médium qui en fait le rendu, en l'occurence le moniteur. Dans le cas d'une imprimante à flot continu (type listing), par exemple, la hauteur maximum n'est pas fixée ...
Le problème du height: 100px est qu'il va effectivement utiliser la hauteur de l'écran. Mais si le contenu du corps est plus haut que l'écran, la manchette n'ira pas plus bas pour autant. Même chose pour le contenu de la manchette qui débordera hors des frontières si il est un minimum fourni.
Moi, j'ai fini par abandonner et j'ai " résolu " le problème en trichant : J'ai affecté une image de fond répétée à <body> qui dessine une manchette trompe-l'oeil et j'ai déclaré une division transparente dont la hauteur n'est pas définie. Cette manière de faire est également la plus légère pour le navigateur.
Pour le tableau à taille fixe mais avec des barre de défilement : overflow: auto.
Bon courage.
[^] # Re: C'est pas très clair
Posté par Gyro Gearllose . Évalué à 2.
Je t'ai plussé également, mais il subsiste quelques points obscurs dans ton commentaire.
Notament pour le coup du tableau. D'une, ça ne fait rien du tout (ou alors, je n'ai rien compris), ensuite, ça ne permet pas d'avoir des en-têtes fixes, un peu comme quand on fige les volets dans un tableur....
Le coup de l'image de fond, j'ai compris le principe, mais honnêtement, je trouve ça porc.... Ceci dit, si le html était un langage propre, ça se saurait !
Je continue mes investigations, et je verrais bien ce que je pourrais en faire....
[^] # Re: C'est pas très clair
Posté par Obsidian . Évalué à 2.
C'est-à-dire que overflow n'est pas propre à un tableau en général. Ensuite, pour que cela ait du sens, il faut également que l'élément concerné ait une taille définie. Sinon, il croît avec son contenu et la directive overflow reste sans objet.
Pour les entêtes de tableaux, il existe les balises <thead>, <tbody> et <tfoot> (au moins en XHTML), à définir à l'intérieur de <table></table>. Attention, <thead> et <tfoot> doivent être définis avant <tbody>. Ceci permet d'indiquer au navigateur quelles sont les données qui forment les entêtes et pieds de table, mais le rendu reste à sa charge. Leur réplication fonctionne bien à l'impression si la CSS a été définie pour le médium printer en particulier. Je n'ai pas essayé à l'écran. Tu dois probablement pouvoir figer une entête mais pas un panneau latéral. Le HTML n'a pas non plus vocation à devenir un tableur (qui eux-mêmes ne proposent pas tous cette fonctionnalité, de toutes façons).
Tu peux également essayer de mettre un <span> avec un overflow bien défini autour des cellules que tu veux scroller. Cela reste correct d'un point de vue syntaxique, mais sémantiquement, je ne pense pas que la DTD du XHTML te laisse le faire, et cela ne passera donc sûrement pas le validateur. Très gruik, donc. A essayer pour la bidouille, mais à ne pas livrer en production.
Moi aussi, mais à y réflechir, cela a plus de sens qu'on ne le croit. Non seulement, c'est beaucoup plus léger, mais cela passe également avec tous les navigateurs, mêmes anciens, et cela revient en somme à remplir une sorte de "formulaire préimprimé", un peu comme une copie fournissant dès le départ le lignage et la marge.
En outre, une <div class="menu"> a encore du sens, mais si l'on se retrouve à utiliser des balises particulières et à classifier des informations de manière à contourner les limitations d'affichage du navigateur, alors on se remet à lier contenu et mise en page et on brise le concept même des CSS. A ce moment, il vaut mieux quand même revenir au fond d'écran, même si c'est décevant.
[^] # Re: C'est pas très clair
Posté par Gyro Gearllose . Évalué à 2.
J'ai un peu poussé mes expérimentations, et pour l'instant, il y a un truc que je ne pige pas.
Voici un bout de code :
<table>
<thead>
<tr><th>Colonne 1</th><th>Colonne 2</th><th>Colonne 3</th>
</thead>
<tbody>
...
</tbody>
</table>
Si j'applique ce style au tbody :
tbody { display:block; overflow: auto; height:250px;}
celui-ci devient bien scrollable, mais alors la taille des cases de l'en-tête n'est plus alignée avec celle des cases du tbody, et donc mon tableau est.... dégueulasse. Il n'y a pas d'autre mot.
Pourquoi cet "effet de bord" ?
Je ne comprends vraiment pas pourquoi le simple fait de déclarer une zone du tableau comme défilable (allez, traduisons une fois pour toutes scrollable) fout en l'air toute la présentation.
Je suis preneur de toute idée permettant de corriger ça !
[^] # Re: C'est pas très clair
Posté par CrEv (site web personnel) . Évalué à 2.
(le display:block doit faire sortir le tbody du flux normal des élements et doit à mon avis être géré alors différement)
La solution fonctionne par ailleurs (seul le tbody est scrollable) sous firefox mais pas sous ie (à voir aussi selon tes contraintes)
[^] # Re: C'est pas très clair
Posté par Gyro Gearllose . Évalué à 2.
En tout cas, sous konqueror, quand j'enlève le display:block; le tbody et le thead sont bien alignés, mais alors c'est toute la page qui est défilable de haut en bas, et non le contenu du tableau....
Que ça ne fonctionne pas sous IE, à priori, je m'en cogne comme de ma première tasse de café, mais c'est bon à savoir, merci !
Ça me gène plus que ça ne fonctionne pas sous konqueror. Je vais tester ça sous firefox, et voir ce que ça donne.
[^] # Re: C'est pas très clair
Posté par Obsidian . Évalué à 2.
En forçant "display: block" dans "tbody", j'arrive également à mes fins avec Konqueror, et le résultat est à peu près le même du coté de Mozilla. Evidement, le rendu ne ressemble à rien puisque l'on brise le modèle de table.
IE6 ne veut rien savoir. Pas de IE7 sous la main pour tester.
[^] # Re: C'est pas très clair
Posté par Gyro Gearllose . Évalué à 3.
Suite à ton conseil dans le message ci-dessous, j'ai consulté les spécifications. Ce sont des documents de développeurs pour des développeurs... J'ai un peu de mal à m'y retrouver.
Si je comprends bien, il n'y a pas de solution miracle.
Soit je connais la largeur de mes colonnes, et là, pas de problèmes, ça peut se régler à coup de div et de css bien senti, soit il faut passer par des hacks javascript et/ou autres bidouilles plus ou moins propres avec des css....
Je vais continuer mes expérimentations et essayer de trouver quelque chose qui s'approche le plus de mes besoins, et demandant un minimum d'efforts.... (au cas où certains se poseraient la question, l'algèbre de bool indique clairement informaticien=>feignant... De plus, je suis informaticien+fonctionnaire, ça n'aide pas !).
Ce qui me bloque, c'est que c'est pour intégrer à un moteur qui a déjà demandé 6 mois d'efforts, et je ne veux pas tout foutre en l'air d'un coup d'un seul.
En tout cas, c'est loin d'être simple, c'est tout ce que j'en retiendrai pour ce soir (en plus de vos précieux conseils et de vos précieuses informations à tous).
[^] # Re: C'est pas très clair
Posté par Obsidian . Évalué à 3.
http://www.w3.org/TR/html401
http://www.w3.org/TR/xhtml1/ (étend la précédente)
http://www.w3.org/TR/CSS2/
Mais je te conseille les versions imprimables :
http://www.w3.org/TR/html401/html40.ps.gz (Postscript)
http://www.w3.org/TR/html401/html40.pdf.gz (PDF)
http://www.w3.org/TR/CSS2/css2.ps.gz (Postscript)
http://www.w3.org/TR/CSS2/css2.pdf (PDF)
Elles sont plus faciles à lire et à consulter.
Bon courage pour la suite.
[^] # Re: C'est pas très clair
Posté par Gyro Gearllose . Évalué à 3.
Déjà pour le temps passé sur mon problème, et enfin pour tes réponses très pertinentes. J'ai enregistré tout ça, et je vais me lire ça tranquille afin d'y voir un peu plus clair !
[^] # Re: C'est pas très clair
Posté par Obsidian . Évalué à 2.
S'il n'y a pas trop de contraintes sur la table et ses autres composantes (comme des hauteurs contradictoires), ça passe sans problème (chez moi, sur Firefox et Firebird).
Par contre, c'est catastrophique sous IE.
Si tu as une imprimante laser au bureau et de quoi relier des documents, je te conseille fortement d'imprimer les spécifications du HTML 4.01 (Le document sur XHtml ne fait qu'étendre celui-ci) et celles de CSS2. Elles pèsent 340 pages chacune, mais chaque volume contient non seulement la liste des balises, mais aussi celle des attributs classés par ordre alphabétique avec, pour chacun d'un, les balises auxquelles ils s'appliquent. En outre, le contenu est généralement très détaillé et chaque référence à une notion quelquonque exposée dans un paragraphe est accompagné du numéro de page précis où elle est définie.
# Une solution css
Posté par CrEv (site web personnel) . Évalué à 4.
<html> <head> <style> body { overflow: hidden; } #menu { width: 200px; float: left; background: whitesmoke; } #contenu { height: 100%; overflow: auto; background: lightblue; } </style> </head> <body> <div id="menu"> <ul> <li>item1</li> <li>item2</li> </ul> </div> <div id="contenu"> <p>du contenu</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>du contenu</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>du contenu</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>du contenu</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>du contenu</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>du contenu</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>du contenu</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>du contenu</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>du contenu</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>du contenu</p> <br><br><br><br><br><br><br><br><br><br><br><br><br> <p>du contenu</p> </div> </body> </html>Le principe est de mettre un sur le body pour masquer complétement la barre de défilement. Mettre la taille du bloc page à (ce qui fait que la taille est celle de la page) ainsi que pour permettre de scroller dans ce bloc. Voilà, j'espère que ça pourra aider. note : testé sous firefox 2, ie du 5 au 7 (j'aurais bien testé sous safari mais le temps que j'allume le mac...)[^] # Re: Une solution css
Posté par Gyro Gearllose . Évalué à 2.
1) parce que j'ai compris ce que tu expliques
2) parce que c'est exactement ce que je cherchais.
Enfin, pour apporter de l'eau à ton moulin (à tests), ça fonctionne du feu de dieu sous konqueror.
[^] # Re: Une solution css
Posté par CrEv (site web personnel) . Évalué à 2.
a+
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.