28220 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un petit problème d'affichage avec un menu fait en CSS. Le menu n'est pas un simple menu (une barre quoi), c'est un menu qui peut faire des sous menus (et ce, à ma plus grande joie, de façon quasi-infini). Bon rien de très rare, ça se trouve facilement avec google. Aussi, il est fixé au dessus de la page mais le problème, sous Opera 8.x, les sous menus ne s'affichent (correctement) que si la page est completement en haut. Sous Firefox, Konqueror et même Internet Explorer, pas de problème.

Voici le code css :



Le problème provient surement d'ici :


car si j'enleve le "position", cette fois ça marche partout (en haut, en bas...) mais les sous menus ne se placent plus correctement et les bordures partent en freestyle complet (pour rester poli Smiley lol ) !

Si quelqu'un a une idée pour résoudre ça svp ?

Merci par avance.
Modifié par cedricpc. (02 Oct 2005 - 13:47)
cedricpc. a écrit :
c'est un menu qui peut faire des sous menus (et ce, à ma plus grande joie, de façon quasi-infini).


De façon quasi-infinie... Et au plus grand désespoir des utilisateurs. Se poser d'abord la question de l'ergonomie et de l'accessibilité de ce genre de menu (pour l'accessibilité, tester avec une loupe d'écran, par exemple).

Et de leur pertinence pour servir de cache-sexe à une structure de navigation défectueuse dans un site. S'il il y tant d'items imbriqués qu'il faut les cacher dans des coulisses multiples, c'est que le menu se prend pour un plan de site, et non pour un outil de navigation fonctionnel et contextuel.

cedricpc. a écrit :
Bon rien de très rare, ça se trouve facilement avec google.


Oui. Indifféremmment le meilleur comme le pire. Ici, c'est le pire, hélas : une CSS au code totalement fantaisiste, pour réaliser un effet à l'utilité douteuse.

Fantaisiste, en effet :

cedricpc. a écrit :

Voici le code css :
ul#menu {
float: left; position: absolute; top: 0;
left: 0; border: 1px solid #999999; border-width: 0 0 1px 0;
}



Un élément ne peut pas être simultanément flottant et en position absolue. S'il s'agit d'obtenir un conteneur pour des éléments enfants positionné, c'est la position relative qui doit compléter le float.

cedricpc. a écrit :

html>body ul#menu { position: fixed; }


Utiliser les commentaires conditionnels pour IE Windows, qui permettent d'éviter les hacks css.

cedricpc. a écrit :

ul#menu li {
text-align: center; width: 100px;
float: left; border-right: 1px solid #999999;
background-color: #E0E2EB;
}
...
ul#menu li { position: relative; display: inline; }
html>body ul#menu li { display: block; }


Regrouper les propriétés par sélecteurs
Un élément flottant (ul#menu li) devient un élément bloc par défaut : le display:block ne sert à rien.
Le display:inline est inutile : il n'y a pas de bug IE de double marge des flottants à corriger ici.

etc.

CSS à jeter entièrement. Inutile de tenter de boucher les trous.
Modifié par Laurent Denis (02 Oct 2005 - 13:11)
jp949 a écrit :
Salut.
Tu n'as pas un probleme d'url ? je n'arrive pas sur ta page

Nan, c'était apache qui avait planté... Smiley sweatdrop
C'est bon là. Smiley cligne

@Laurent Denis > Je ne suis pas venu sur ce forum pour entendre dire que c'est pas bien comme menu et encore moins que le code est "pourrit". Après, si tel est l'esprit de ce forum, je préfère me retiré mais j'en doute fortement que se soit le cas.
Le code est fonctionnel (à part sous Opera là où est le problème) et valide aux standards du w3c...
Après pour l'accessibilité, je ne sais pas mais tout depend ce qu'on entend par là.
Moi, je trouve plus sympathique de faire des sous menus, chacuns SES choix.

A bon entendeur...

Edit : Effectivement, il y a un bon de code en trop par contre, le float: left;
Modifié par cedricpc. (02 Oct 2005 - 13:30)
cedricpc. a écrit :

@Laurent Denis > Je ne suis pas venu sur ce forum pour entendre dire que c'est pas bien comme menu et encore moins que le code est "pourrit".


je n'emploie pas ce genre de termes subjectifs. Mais je fais des constats objectifs : il repose sur une utilisation mal comprise de diverses propriétés CSS . Il n'est pas accessible. Il est médiocrement interopérable. Son ergonomie est très limitée. Il encourage une structure de navigation inutilement complexe. Bref, il est très mal fait à tous points de vue.

cedricpc. a écrit :

Le code est fonctionnel (à part sous Opera là où est le problème) et valide aux standards du w3c...


Justement non, le code n'est pas fonctionnel. On ne peut qualifier de fonctionnel un code qui utilise des propriétés contradictoires. On peut le qualifier de chanceux, peut-être.

La validité syntaxique n'est qu'une condition requise, mais pas suffisante pour assurer la qualité d'une page Web.


cedricpc. a écrit :

Après pour l'accessibilité, je ne sais pas mais tout depend ce qu'on entend par là.


Des choses très précises et normalisées, qui ne dépendent pas de ce qu'on entend par là. Et que tu pourrais justement apprendre ici, en adoptant une autre démarche et une autre attitude.

cedricpc. a écrit :

Moi, je trouve plus sympathique de faire des sous menus, chacuns SES choix.


Le choix de ce forum n'est pas d'encourager n'importe quoi sous prétexte que c'est valide CSS et que ça fait plaisir à son concepteur.

cedricpc. a écrit :

A bon entendeur...


Mot de trop. Que signifie-t-il ? Que je dois fermer ce fil ? si tu n'es pas prêt à entendre une critique argumentée sur un menu ramassé sur Google, ouvrir un sujet ici n'a aucun intérêt.
Modifié par Laurent Denis (02 Oct 2005 - 13:47)
Administrateur
Un peu de calme, je te prie.

a écrit :
Après, si tel est l'esprit de ce forum, je préfère me retiré mais j'en doute fortement que se soit le cas.

L'esprit du forum est clairement exprimé dans les Règles que tu as lues en t'inscrivant :
Règles a écrit :
16- Ceci est une communauté d'entraide, pas de travail à votre place

Ce forum a pour vocation d'échanger des connaissances. Les membres ne sont pas là pour faire le travail à votre place. Il est donc inutile de demander des scripts tout faits, des codes à faire pour vous. On vous donnera les moyens d'y parvenir vous-même, sans vous apporter le code sur un plateau d'argent.

Ici c'est exactement ce que fait Laurent : échanger des connaissances.
Il t'explique (sans animosité d'ailleurs) que ton menu est mal conçu, non sémantique, et non accessible.
A toi de t'approprier ces conseils judicieux qui ne feront qu'améliorer ton travail, à condition d'accepter de se remettre en question (je suis sûr que c'est le cas)

a écrit :
Le code est fonctionnel (à part sous Opera là où est le problème) et valide aux standards du w3c...

Fonctionnel ? Pas vraiment, à moins que "fonctionnel" ne désigne que l'ensemble des navigateurs que tu as testé.
Valide aux standards ? Si tu parles d'une bête validation automatique, peut-être. Mais là encore, c'est loin d'être suffisant puisque le Validateur n'est pas une baguette magique et n'a aucun moyen de vérifier si la sémantique du document est bien employée.

a écrit :
Moi, je trouve plus sympathique de faire des sous menus, chacuns SES choix.

Je me suis peut-être emporté, je n'avais pas compris que ton menu ne s'adressait qu'à toi comme seul public. J'ai cru un instant qu'il était fait pour le plus large public.

a écrit :
A bon entendeur...
Il n'y a pas de "bon entendeur".
Il y'a simplement une communauté, des conseils donnés par des membres expérimentés et une façon d'accepter ou non les conseils et critiques.
A toi de voir.

Nous avons tous compris que tu avais fourni un travail conséquent en essayant d'adapter ce menu, mais dans ce cas, autant aller jusqu'au bout et ne pas dire "ce menu est valide" alors que ce n'est pas le cas.
Modifié par Raphael (02 Oct 2005 - 13:48)