RAPPORT DE PROJET INFORMATIQUE

SUJET : MENU DEROULANT EN CSS, CONCEPTION ET MISE EN ŒUVRE

Par : Romain Jourdier et Catherine Gaschet
Site : http://l2info.free.fr/

Introduction

Dans l’ère d’Internet, la programmation liée au Web est devenue de plus en plus complexe, de nouveaux langages sont apparus pour combler les limites du HTML. Le CSS en fait parti, il permet de créer des feuilles de styles, et ainsi d’améliorer et de faciliter le concept graphique d’un site Internet. Une page étant principalement composée d’un en-tête, d’un contenu et d’un menu, nous nous sommes intéressés à ce dernier. Le menu doit présenter les différentes rubriques d’un site de façon concise et attirante. Pour inciter le visiteur à parcourir un site, on peut faire appel aux menus déroulant dans certains cas.

Conception

Après plusieurs recherches sur Internet et surtout inspirée par le livre de Meyer, la conception en elle-même d’un menu déroulant en css présente peu de difficultés, la méthode est explicitée avec détail sur notre site.

Principales difficultés

La compatibilité a été le plus important souci technique pour la réalisation des menus déroulants. Plusieurs de nos exemples le montrent :

Internet Explorer est limité parfois, mais en général il supporte bien les styles css, en revanche dans le cas des menus déroulants, nous avons dû utiliser une extension réalisée en java script (fichier .htc). Le menu n'est pas fixe (par rapport à l’écran) sous IE, qui ne supporte pas certaines propriétés.

Mozilla est l'un des meilleurs navigateurs, il interprète sans problème les menus déroulants, accepte le menu fixe. Il a demandé peu d'adaptation ; par contre il n'est pas compatible avec les propriétés scollbars, dommage mais étant donné le nombre de thèmes proposés par le browser... C’est par ailleurs sur Mozilla qu’ont été vérifiées les premières ébauches de menus déroulants, un portage sur IE étant réalisé si le résultat nous convenait sur Mozilla.

Il a également fallu régler les problèmes de flux pour le bon positionnement des sous-menus : en effet si on n’accole pas les sous-menus au menu principal, ils deviennent inaccessibles. C’est d’ailleurs un gros problème dans la version du menu acceptant les puces : le padding que l’on a dû ajouter pour décaler les liens décalait aussi les sous-menus sous IE, ce dernier gérant les marges intérieures différemment des autres navigateurs, ce qui posait un problème lorsque la propriété left : xxx entrait en jeu.

Conclusion

Au final, le css en lui-même, ainsi que le menu déroulant, ne posent que peu de problèmes : une fois la logique acquise, il est aisé de les manipuler. En revanche, la principale difficulté vient des différences entre les différents navigateurs, ces derniers ne gérant pas toutes les propriétés de la même façon, il a fallu, à plusieurs reprises, définir des propriétés propres à chacun de ces navigateurs, en usant d’astuces, et au final, augmentant considérablement le temps nécessaire à la création d’une page.