Discussion :

[guy2004]

Bonjour,
J'ai une mise en page avec :
1 Header qui a un background en image
1 Menu deroulant juste au dessous du header
Lorsque je clique qur les favoris et que ma fenetre de naviguateur se reduit mon background et mon menu son amputés et dépositionnés.
Quelqu'un pourrait t-il m'eclairer sur ca svp ?
Voici mes codes :

Code :

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

1
2
3
4
div#header {height: 355px; width: auto; background: url(square_map5.gif)  50% 100% no-repeat white; margin-top: -400px; margin-right: 7em; margin-left: 7em; border-left: 1px solid; border-right: 1px solid; border-top: 1px solid; border-bottom: 1px solid;} 
 
div#nav {margin-top: 355px; margin-left: 7em; margin-right: 7em; padding-left: 3em; padding-right: 3em; width: auto;
  background: #9999cc; border: 1px solid #3333cc; height: 2em;}

Merci

[SIBELIUS]

Salut,

Déjà, le fait que ton header ait un margin-top: -400px; est assez incohérent et illogique.

Ensuite, la partie de code que tu proposes ne permet pas de deviner comment se comportent les éléments internes du menu.

[etarip]

clair, les margins en négatifs c du bricolage a l arrache (j'ai deja test je parle en connaissance de cause ) c'est le pourcentages je crois pour répondre a la question. ca a tendance a déformer l'élement quand tu modifie la taille de la fenêtre.

[guy2004]

Merci,
Vous avez raison ce sont les % qui deconnent. C'est bete car ma mise en page ne pourra pas s'adapter a la resolution ainsi
J'en profite, j'ai un menu en porte coulissantes ( ou roll-over) tout est impecable lorsque le lien du menu fait 1 ligne mais lorsqu'il en fait 2 mon sous menu se place juste sous la 1er ligne me cachant ainsi la 2ème !
Et si je baisse mon sous menu alors je ne peux plus cliquer sur mes sous menus car il n'y a plus de contact entre le menu est le sous menu...
Je sais pas si c'est bien clair tout ca !

[etarip]

non

[guy2004]

Sur mon menu quand j'ai un lien de ce type :
- Liens
==> Alors le sous menu se place par rapport au dessous du mot "liens"
Par contre si j'ai un lien de ce type :
- Autres
Liens
==> Alors mon sous menu se place juste au dessous du mot "autres" cachant ainsi le mot "liens".
C'est plus clair là non ?

[etarip]

j'avoue je lutte.

Si ton sous menus c'est un div, bin décalle la margin top, sinon ca dépend peut etre du padding de ton élément tu pourrais montrer un bout du code HTML pour ton onglet et le code CSS de ton calque stp?

[guy2004]

Le probleme c'est que si je mets un padding ou un margin ensuite je ne peux plus cliquer sur mes sous-menus car des que je ne suis plus sur le liens de depart le menu se re-enroule !
Voici une partie du HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="nav">
		<ul class="level1">
 			<li><a href="/">Home</a></li>
 				<li class="submenu"><a href="/institut/">Présentation des instituts</a>
  					<ul class="level2">
   						<li><a href="/instiut/index/">Qui sommes nous</a></li>
   						<li><a href="/instiut/index/">Que faisons nous</a></li>
  						<li><a href="/instiut/index/">Où sommes nous</a></li>
   						<li><a href="/instiut/index/">Plan d'accès</a></li>
    					<li><a href="/instiut/index/">Hébergement</a></li>
	 					<li><a href="/instiut/index/">Contacts</a></li>
  					</ul>
 				</li>

...et ainsi de suite pour les autres liens.
Et voici une partie de ma CSS :

Code :

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

1
2
div#nav { position: relative; margin-left: auto; margin-right: auto; width: 977px; margin-top: 0; margin-bottom: 0;
  background: #6987C4; border: 1px solid #3333cc; height: 2em;} /* barre des menus */

Code :

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

1
2
3
 
div#nav ul ul {position: absolute; width: 7em;
  display: none;} /* largeu

[etarip]

Et si tu mets un margin-top 10px a ton ul ul? encore mieux, unikement quand tu détectes un saut de ligne?

[guy2004]

Là je vois bien les menus y compris ceux qui font 2 lignes, mais comme mes listes apparemment n'ont pas les même tailles en hauteur, ce sont avec mes liens de 1 ligne que je ne peux plux cliquer sur les sous menus car ces derniers ne collent pas le bas du menus !