28220 sujets

CSS et mise en forme, CSS3

Bonsoir,

J'espère que je ne me suis pas trompé de cour et que je peux posé cette question dans la cour des grands. Pour éviter d'encombrer cette page, j'ai mis 2 exemples à l'adresse suivante :
www.guirsch.be/dossier_tests/test1.html

Le problème : j'ai 9 boutons-images principaux et les sous-menus sont du javascript pur. Je précise que les scripts sont fortement inspirés d'une version d'essai de WebStyle de Xara. Je pense qu'il est trop facile d'accuser ceux-ci comme on l'a fait sur un autre forum. C'est la raison pour laquelle j'ai cherché un site intéressant orienté CSS, car c'est là que je me plante sûrement.

Sous IE, je n'ai pas de problème, même sur des pages complexes. Mais dès que je teste sous Firefox, cela devient très instable. En effet, la plupart du temps, il décale les sous-menus déroulants vers le bas (voir test2.html). Très inconfortable pour choisir son option.

Sur le test2.html, vous pourrez constater que Firefox plante (ou que je fais planté) déjà dans une table avec 2 lignes. Parfois, il accepte 2 lignes et 1 cellule, à côté de la cellule comportant le javascript. Celui est rendu dans la page ainsi :
<div id="menugen">
<script src="xaramenu.js"></script><script Webstyle4 src="menugen.js"></script>
<noscript>à définir</noscript>
</div>

Tout cela est donc très instable. Problème de conteneur ? J'ai positionné une image, elle prend la bonne place. J'ai essayé de jouer sur la largeur du conteneur, sans plus de succès. Tapez pas, M'sieu, c'est peut-être une bêtise Smiley bawling . J'ai regardé les questions du forum et je n'ai rien trouvé qui ressemble à ce problème de décalage. J'ai envisagé de prendre le "Vertical déroulant 2" de la Galerie menus en CSS, mais avec une quarantaine de sous-menus, c'est peut-être lourd sur chaque page.
Alors, si quelqu'un a une idée ?
Ma question est-elle si incongrue que personne n'y réponde Smiley decu ? J'essaye de réécrire un site en tenant compte des standards. Et je ne veux pas en conclure que l'interprétation de ces standards par les navigateurs n'est pas au point.

Mais dans ce cas, il est flagrant que le comportement du menu déroulant javascript varie complètement en fonction de quelques pixels de plus ou de moins dans le positionnement des boutons principaux. Parfois il se positionne convenablement, parfois il décale vers le bas de quelques dizaines de pixels, parfois, de 207 px, hauteur du bloc principal. C'est à croire qu'il existe un conteneur "invisible flottant" qui se crée d'office avec l'utilisation d'une <table> ? d'un <td> ?
Voir http://www.guirsch.be/dossier_tests/test1.html?

Si ma question est déplacée dans ce forum, connaissez-vous un autre forum où je pourrais poser cette question matériellement basse Smiley cligne ?
Polhux a écrit :
Ma question est-elle si incongrue que personne n'y réponde Smiley decu ?


J'ai beaucoup de réserves face à l'utilisation des menus déroulants. Même après un nombre incalculable d'heures à naviguer, je ne m'en sert pas d'instinct. En plus, le javascript pour la navigation peut représenter un réel problème s'il est désactivé coté client.

Suggestion : Galerie de menus en CSS

Désolé pour les délais !

Je t'invite à passer au Bar du forum pour Le post des présentations.

@+ Smiley cligne
Modifié le 22 Nov 2004 - 06:33
Evidemment, je préférerais éviter un menu déroulant en javascript. Sur le site actuel (et sa nouvelle version), la première page fait office de plan du site et là, avec des liens HTML tout ce qui a de classique.
Le problème, pour les autes pages, est que j'ai 9 rubriques et une quarantaine de pages en sous-rubrique. Actuellement, en choisissant une sous-rubrique, on passait (avec frames) via un menu vertical, à la première page de la rubrique. Ensuite, avec des menus horizontaux, on choisissait la sous-rubrique. Or, on m'a demandé de pouvoir avoir accès directement à n'importe quelle sous-rubrique. Donc, faute de place, il faut bien que je passe par un menu déroulant en javascript. Toutefois, je compte bien utiliser la balise <noscript>.

A ce propos, il n'y a pas grand-chose actuellement sur le Web mais je cherche une astuce, qui présente bien, pour mettre dans ma balise <noscript>. A part une autre page html ou une image…

Et tant que j'y suis, je remarque toujours cette réticence, chez les "puristes", à utiliser le javascript. Mais je remarque également que pour pouvoir faire quelque chose d'un peu élaboré, on doit forcement y passer. Comme preuve : Les galeries de menus en CSS de Raphaël.

Quant à l'argument : Le javascript est désactivé. Si on ne veut pas d'accident en voiture, on va à pied. Mais on en supporte les inconvénients. Et pour ce qui est du javascript forcé par le responsable du réseau, de l'expérience que j'ai dans de grandes banques, ce n'est pas le javascript qui est désactivé mais les images.

Bon, et maintenant comme conseillé par Stephan, je m'en vais de ce pas au "Bar du forum" pour "Le post des présentations".
Merci pour le renseignement. Comme il me faut encore des menus horizontaux, si possible sans javavscript… et finalement quand même pour le menu vertical.
En effet, pour ce qui est de celui-ci qui me posait problème sous Firefox, j'ai trouvé. Il semble que le navigateur aille calculer la hauteur maximale totale que pourrait avoir le menu déroulant. Evidemment, cela commence à déborder sur d'autres éléments et j'aurai peut-être dû utiliser des z-index.

Pour bloquer l"ensemble des boutons, j'utilise seulement
vertical-align: top;
margin-top: 16px;
margin-left: 24px;
donc sans définir la hauteur et la largeur du bloc, et cela fonctionne.

Maintenant, il me reste quand même un problème à résoudre. Outre le problème que le déroulant était décalé, j'avais et j'ai encore le problème que les 9 boutons principaux ne "collent" pas toujours ensemble.

Or, à ma grande surprise, j'ai remarqué que cela venait de ma déclaration
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" <http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
C'est ce que me donne, par défaut, mon éditeur HTML (WebExpert) avec une page XHTML.

J'ai essayé plusieurs possibilités et j'en avais trouvé une qui convenait. Malheureusement, j'ai fait tellement d'essais que je ne retrouve plus la bonne. Donc, lorsque je dis que mon menu vertical marche sous Firefox… Actuellement oui, bêtement avec un début de page <html>.

Je vais faire des essais avec ce que me donne "Ultimate Drop Down Menu" mais je ne comprend toujours pas l'influence de la déclaration DTD avec des boutons qui s'écartent. J'ai dû manquer un épisode quelque part.
Administrateur
Tous les menus à base de javascript posent des problèmes d'accessibilité lorsque celui-ci n'est pas actif.
Or, pour une raison de bug sur IE, un menu entièrement en CSS n'est pas possible.

Tu as des menus ""accessibles"" ici :
- http://www.alsacreations.com/articles/deroulant/
- http://www.elmoustikoblog.net/tutoriels.php?tut=menu_deroulant
- http://www.ibilab.net/webdev/articles/CSS/creer-menus-cascade-simple-4.htm
- http://www.openweb.eu.org/articles/menu_universel/