Discussion :

[Pierre Maurette]

Bonjour,
Soit une mise en page basée sur une colonne par exemple centrée. Je désire un menu fixé au haut de la fenêtre du navigateur en vertical et attaché à la colonne en largeur. Une solution en javascript fonctionne, mais c'est saccadé. Et surtout j'aimerais être certain que ce que j'avais tenté est réellement infaisable.
En tout CSS, ça donne ça. Un peu plus bas dans la page il y a un .png clicable. Le problème avec tous les navigateurs sauf IE c'est que le lien est masqué par l'un ou l'autre ou les deux des DIV outermenuside et innermenuside. J'ai essayé un peu avec z-index, background: transparent, et en réorganisant le HTML, rien à faire.
Je suis en attente de toute suggestion.

[ornitho13]

Salut,

ton probleme vient de la largeur de ta div qui prend toute la page, il faudrait la diminuer sur le bloc du menu afin de permettre l'interaction de la souris sur le contenu de la page

[Pierre Maurette]

Salut,

ton probleme vient de la largeur de ta div qui prend toute la page, il faudrait la diminuer sur le bloc du menu afin de permettre l'interaction de la souris sur le contenu de la page

Je vous remercie.
J'avais bien vu que c'était le problème, mais je n'étais pas parvenu à diminuer les deux DIV en conservant le comportement. Je me demande même si c'est vraiment possible.
En revanche, il est très simple de passer les DIV en height 0. Ça semble fonctionner en première approche. C'est ici.

[Candygirl]

Dans ton premier exemple, il te suffit de faire passer tout ton contenu en position:relative afin de le faire passer par-dessus tes div en fixed. Par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#global > * {position relative;}

Mais vu que tu connais la taille de ton contenu tu pourrais positionner directement ton menu:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#menu {
position:fixed;
left:50%;
margin-left:-513px;
}

Tu dois néanmoins passer par un conteneur intermédiaire si tu veux éviter qu'il ne disparaisse complètement lors d'un rétrécissement de fenêtre et avoir le même comportement que ton exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#contentmenu {
	position:fixed;
	min-width:925px;
	width:100%;
	top:150px;
}
 
#menu {
	position:relative;
	left:50%;
	margin-left:-513px;
}

[Pierre Maurette]

Dans ton premier exemple, il te suffit de faire passer tout ton contenu en position:relative afin de le faire passer par-dessus tes div en fixed. Par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#global > * {position relative;}

...

Merci, c'est exactement le genre de réponse que j'espérais. L'autre solution colle moins à mon problème. Mon idée était de fixer en vertical par #outermenuside, puis de coller #innermenuside sur #global en appliquent le même CSS. Dans l'espoir de pouvoir facilement ajuster la géométrie voire d'utiliser le #innermenuside dans d'autres circonstances (accroché à droite dans un layout fluide, peut-être). J'ai mis votre suggestion en pratique et je marque le sujet Résolu.

Maintenant il me faut décider de ce que je fais. La conception web n'est pas du tout mon métier, surtout la partie présentation. Il y a un certain temps déjà j'avais passé pas mal de temps sur HTML / CSS, et j'ai presque tout oublié, d'autant plus que je n'avais pas appris rigoureusement mais en picorant. Soit je m'y remets un bon coup (nécessaire pour remettre à plat le vrai projet), soit je tape dans l'existant.

[Pierre Maurette]

Pour info j'ajoute une réponse, évidente quand on prend la peine de travailler un peu les standards: mettre (dans l'exemple initial) en visibility: hidden; #outermenuside et #innermenuside (facultatif, il hérite), et #menuside en visibility: visible;. C'est peut-être plus satisfaisant que le height: 0px;.