28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Après avoir bien étudié les tutoriels concernant les menus, fais des recherches dans le forum et épluché la FAQ, je n'ai pas trouvé de réponse à mon problème.

J'ai un conteneur de 798px centré sur la page, avec une image entête de 161px de haut, qui prend toute la largeur, et j'aimerai que mon menu soit comme ceci, et que le texte change de couleur au passage de la souris (il y a donc 2 images pour le texte) :
upload/12251-screen01.jpg

Comment puis-je le mettre en forme via ma feuille de style ?
Si quelqu'un pouvais m'orienter...

Merci d'avance!

Sandrine
Modifié par sandrine710 (09 May 2007 - 12:05)
Benjamin D.C. a écrit :
Une piste: Sprites CSS : Meurs, découpe d’images, meurs ! Smiley cligne

Mouais, bof. Jolie technique, bien inaccessible comme il faut.
Je me méfie des tutoriels qui suggèrent le recours aux techniques de remplacement de texte, toutes problématiques à des niveaux divers pour l'accessibilité.

Plus simplement, on pourra faire ceci :
- une image de fond avec toute la déco, et la déco uniquement, donc sans le texte (sauf peut-être le www.sandrinegdesign.com, qu'on pourra sans doute laisser tel quel dans l'image de fond) ;
- une image HTML pour le titre :
<p><img alt="sandrineG design" src="..." /></p>

- trois images pour le menu :
<ul id="rubriques">
<li><a href="..."><img alt="Book Pro" src="..." /></a></li>
<li><a href="..."><img alt="Book Perso" src="..." /></a></li>
<li><a href="..."><img alt="Contact" src="..." /></a></li>
</ul>

Ensuite, on positionne les li en absolu (par rapport aux limites du conteneur de l'en-tête, conteneur qu'on positionnera en relatif pour qu'il puisse servir de référent à ses enfants et descendants positionnés en absolu), pour les placer pile là où on veut. Ne pas oublier d'indiquer un color: white pour les liens de ce menu, histoire que le texte reste visible même si les trois images ne s'affichent pas.
Enfin, on réalise l'effet de survol grâce à Javascript.


PS : bon ok, c'est peut-être un peu compliqué à gérer pour les débutants (en réalité ça n'est pas très compliqué, mais ça demande un peu de méthode). Si on préfère suivre le tutoriel sur les sprites CSS indiqué par Benjamin, on veillera au minimum à utiliser une technique de remplacement de texte correcte, et non pas des liens vides avec juste une image de fond insérée via CSS.
Modifié par Florent V. (09 May 2007 - 12:29)
Effectivement pour une débutante c'est pas si évident Smiley smile

La méthode que tu décris, c'est plus ou moins ce que j'essayais de faire jusqu'à présent sans y parvenir.
Je ne voulais pas de texte apparent a cause de la barre de navigation qui est penchée.

"on veillera au minimum à utiliser une technique de remplacement de texte correcte" > peux tu préciser stp ?
Florent V. a écrit :
Mouais, bof. Jolie technique, bien inaccessible comme il faut.
Mais non, c'est faux. Parfois, il faut arrêter ce petit jeu du "c'est pas accessible". Vous savez quoi? Ici, on s'en contrefous. Tu proposes une solution complexe — pour un débutant en tout cas — qui, surtout, n'apporte strictement rien ici! On a affaire à un portfolio de graphisme, pas à un site institutionnel ou autre.

La solution n'est pas du tout inaccessible comme tu le prétends. Elle est peut-être un tout petit peu moins robuste, mais reste néenmoins parfaitement accessible dans la grande majorité des cas. En fait, seuls les quelques personnes ayant désactivées les images et non les styles définis par l'auteur seront pénalisées. Mais dis-moi, visiter un portfolio de graphisme sans images, c'est pas "un peu" stupide?

L'accessibilité d'un contenu, c'est très bien. Mais arrêtons l'intégrisme, il faut réfléchir aux réels besoins d'un site plutôt que de réagir systématiquement sur une accessibilité éventuellement défaillante dans certains cas extrêmes pour le moindre petit site personnel.

De plus, et bien que ce ne soit effectivement pas la solution proposée dans l'article de Pompage, il existe des solutions (en tout cas au moins une à ma connaissance) qui permettent justement d'effectuer des remplacements de texte tout en gardant un contenu affiché même si les images sont désactivées.

Par ailleurs, l'accessibilité optimale et robuste d'un site, c'est bien. Très bien. Mais ce n'est en aucun cas une obligation et encore moins une pratique à pousser dans les plus sombres détails pour tous les sites que nous croisons. Condamner de manière automatique toute utilisation telle que celle décrite dans l'article des sprites relève d'un entêtement stupide qui perd justement totalement le but recherché par l'accessibilité numérique. C'est exactement comme cette obstination à hurler chaque fois que l'on croise un site entièrement réalisé en flash.

Par ce genre de comportement, vous ne faîtes pas évoluer le web dans le sens où l'accessibilité des contenus web est justement intéressante, vous appliquez simplement de manière pûrement dogmatique des notions "hype", et c'est bien dommage. Smiley cligne
Benjamin D.C. a écrit :
Mais non, c'est faux. Parfois, il faut arrêter ce petit jeu du "c'est pas accessible".

Effectivement, une formulation plus juste aurait été « cela est potentiellement problématique pour l'accessibilité ».

Benjamin D.C. a écrit :
Tu proposes une solution complexe — pour un débutant en tout cas — qui, surtout, n'apporte strictement rien ici! On a affaire à un portfolio de graphisme, pas à un site institutionnel ou autre.

C'est sans doute pourquoi j'avais aussitôt édité mon message pour rajouter un post-scriptum relativisant la nécessité d'appliquer la solution que je décrivais ?

Benjamin D.C. a écrit :
L'accessibilité d'un contenu, c'est très bien. Mais arrêtons l'intégrisme, il faut réfléchir aux réels besoins d'un site plutôt que de réagir systématiquement sur une accessibilité éventuellement défaillante dans certains cas extrêmes pour le moindre petit site personnel.

Tu prêches un convaincu, Benjamin. Je crois que tu m'a suffisamment lu pour savoir que je ne suis pas un ayatollah de l'accessibilité à tout prix, de la validité aveugle et du tableless qui gonfle les chevilles.

Par contre, j'ai tendance à présenter les choses comme je le ferais pour des professionnels du Web en (auto-)formation. Ça peut effectivement être disproportionné pour l'amateur pas spécialement éclairé qui cherche à réaliser son site personnel, voire celui d'un ou deux amis.

Pour ma part, je préfère mettre la barre un peu haut et recadrer par la suite si nécessaire. Je ne pense pas que le fait de présenter des choses un peu exigeantes pour des débutants soit rédhibitoire, à partir du moment où on est capable de s'adapter par la suite.

Merci donc pour le recadrage (mon post-scriptum étant un peu laconique)... même s'il aurait pu être un poil plus zen. Smiley cligne

Benjamin D.C. a écrit :
De plus, et bien que ce ne soit effectivement pas la solution proposée dans l'article de Pompage, il existe des solutions (en tout cas au moins une à ma connaissance) qui permettent justement d'effectuer des remplacements de texte tout en gardant un contenu affiché même si les images sont désactivées.

Celles que je connais posent problème dans le cas inverse : CSS désactivées. Voir par exemple ici :
http://www.benlebegue.com/
(Et je ne balance personne, vu que c'est moi qui l'ait fait celui-là. Smiley murf )

Benjamin D.C. a écrit :
Condamner de manière automatique toute utilisation telle que celle décrite dans l'article des sprites relève d'un entêtement stupide qui perd justement totalement le but recherché par l'accessibilité numérique.

Ce n'est pas une condamnation. Par contre, indiquer la technique des sprites comme «la technique qui va bien» sans se fendre d'un petit bémol, c'est dommage. Ça ne sera sans doute pas dommageable à sandrine710, mais j'ai la regrettable habitude de ne pas m'adresser qu'à l'initiateur d'un sujet quand je réponds sur ce forum. Beaucoup de membres suivent les échanges ou font des recherches pour se former, se documenter, etc.

Benjamin D.C. a écrit :
C'est exactement comme cette obstination à hurler chaque fois que l'on croise un site entièrement réalisé en flash.

Là pour le coup un site 100% Flash, c'est dommage, quel que soit le sujet ou le secteur. Beaucoup de site full-flash auraient intérêt à avoir un minimum de contenus alternatifs, reproductibles par copier-coller (ex: une adresse postale, un numéro de téléphone), etc. Bref, du almost-full-flash plutôt que du full-flash. Mais c'est un autre débat. Smiley cligne

Benjamin D.C. a écrit :
vous appliquez simplement de manière pûrement dogmatique des notions "hype"

Heu... je crois que là tu y vas un peu fort. Et surtout, c'est tout simplement faux.
Modifié par Florent V. (09 May 2007 - 14:40)
Merci pour ces précisions pleines de bon sens Florent, et pas d'inquiétude à avoir quant à mon dernier paragraphe, un peu de mauvaise fois ne fait jamais de mal. Smiley ravi