[CSS]Déformation lors de la reduction de la fenetre du nav

Version imprimable

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:

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 :D

19/09/2005, 15h28
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.
19/09/2005, 15h37
etarip

clair, les margins en négatifs c du bricolage a l arrache (j'ai deja test je parle en connaissance de cause :P ) 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.
19/09/2005, 15h58
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 !
19/09/2005, 16h51
etarip

non
19/09/2005, 16h55
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 ? :roll:
19/09/2005, 17h06
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?

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:

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:

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:

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

19/09/2005, 17h19
etarip

Et si tu mets un margin-top 10px a ton ul ul? encore mieux, unikement quand tu détectes un saut de ligne?
19/09/2005, 17h27
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 !