[Résolu] Superposition : #A > #B et #B * > #A

Bonjour,
Je suis actuellement dans une situation un peu inextricable : mon site comporte une barre de titre dans laquelle apparaît le logo sous forme de texte (@font-face). Celui-ci dépasse gracieusement sur le contenu, ce qui m'a forcé à appliquer à #contenu un z-index:-1;
L'affichage est parfait avec cette méthode (sauf pour opéra qui ne gère pas l'ombre là où le titre "dépasse"). Mon problème est ergonomique : le titre passant au dessus du contenu, il bloque les clics de la souris. J'ai déjà essayé de lui donner une hauteur fixe tout en laissant l'overflow visible mais ça ne change rien. J'ai également essayé de donner un z-index aux liens du contenu pour qu'ils passent au dessus alors que leur parent est en dessous, comme on peut s'en douter ça ne fonctionne pas.
Voici donc un problème qui n'est pas bien grave mais qui dépasse mes compétences, c'est l'occasion de faire appel à la communauté.

Le site en question
Modifié par Whisno (26 Apr 2011 - 14:25)

Bonjour, je ne sais pas sous quel navigateur tu n'arrives à cliquer sur ton logo. Pour ma part, tout semble ok sur firefox et chrome. Sur IE 8 et Opéra 11.01, @font ne fonctionne pas.

Pour ton logo, tu peux aussi utiliser le positionnement absolue.

Je me suis mal exprimé, c'est le #contenu qui n'est plus clicable. Essaye de copier "In ƒine s.p.r.l. a été fondée en 1992" par exemple, le logo prend l'ascendant. C'est gênant lorsqu'il y a un lien en dessous, comme dans les résultats d'une recherche par exemple.

J'avais oublié ce problème de @font, difficile de satisfaire tous ces navigateurs avec leurs maudits formats. Pourtant j'ai utilisé le générateur de Font Squirrel, connais-tu une meilleure méthode ?

bonjour,

plus simplement:

#contenu p , #contenu a , #contenu form {position:relative;z-index:2}
#logoInFine {z-index:1;}

LE z-index negatif n'est pas une bonne idée, ne passe pas partout et pourrait passer le contenu sous html par exemple.

(Trop de position absolute rend aussi rigide et fragile la mise en page).

Cordialement,

gc

Ça fonctionne presque : en fait il y a juste un petit bug qui pose un autre problème. Je m'explique.
Tant que #contenu est en position absolue, la partie du titre qui dépasse est transparente. Cette position absolue me sert actuellement à mettre une barre de défilement sur le contenu uniquement.
Il y a une alternative à cette position absolue, c'est de mettre le bandeau de titre et de navigation en position: fixed;. Le contenu scrolle alors par derrière, ce qui pose un nouveau problème. En terme de z-index :
#logoInFine > #header, #navigation et #contenu
#contenu * > #logoInFine
#header et #navigation > #contenu *

J'y verrai surement plus clair après un sandwich et un café. En attendant j'ai mis les deux versions que je parviens à imaginer : une à contenu absolute et l'autre au header fixed

Version au titre fixe
Version au contenu absolu

re

J'ai le sentiment que tu compliques beaucoup les choses.

La page peut-etre monté simplement en positionnement statique(flux naturel par défaut) en gérant au mieu les fusions de marges (reset margin/padding au besoin) avec éventuellement un min-width sur html ou body.

Seul le logo demanderait une position en absolu et un z-index (1).
Les contenus de #contenu ( ) , quand a eux demanderait un z-index(2) pour repasser dessus, en particulier lien et formulaire pour qu'ils restent accessibles à la souris dans la zone du logo, (+ positionnement relatif pour activer le z-index).

cordialement

Certes, ces bidouillages avec les positionnements rendent les choses plus compliquées que nécessaire. C'est plutôt un caprice du client, il trouve que le décalage qui a lieu en passant d'une page avec scrollbar à une sans (ou l'inverse) est inesthétique. J'ai bien essayé de lui expliquer que c'est un peu contre-nature mais il y tient tellement qu'il avait rajouté des <br/><br/><br/><br/>… à la fin de chaque page pour que la scrollbar soit toujours apparente (-> plus de décalage). C'est en voyant ça que je me suis senti obligé de trouver n'importe-quelle solution à la place.

Edit : C'est bon, reformuler le problème m'a donné une idée toute simple, overflow: scroll; sur body. Et comme ça je peux en revenir au positionnement statique qui est beaucoup plus gérable.

Merci pour vos suggestions, ça m'a éclairci les idées .
Modifié par Whisno (26 Apr 2011 - 10:09)