Menu CSS et contenu

[mymyma]

Bonjour,

Je développe un site web avec un menu exclusivement en CSS (utilisant des balises div et des balises a). Le menu est horizontal.

En dessous de mon menu, il y a un formulaire (mais il peut y avoir n'importe quoi, le résultat est le même). Quand je déroule mon formulaire, je n'ai pas acces aux menus qui s'affichent au dessus de mon formulaire et le menu est partiel au dessus des boites de texts.

Je voudrais savoir comment faire pour que mon menu s'affiche corectement au dessus de ce qu'il y a en dessous du menu sans avoir à laisser un espace trop important entre les deux.

Merci d'avance
Mymyma

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)

[Asumbaa]

Bonjour,

Constater de visu de quoi tu parles, pouvoir voir un bout de code, ça nous serait utile pour te répondre
Peux-tu nous donner l'adresse ? Ou s'il n'est pas encore en ligne, un extrait de code (HTML + CSS) ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

[mymyma]

Voilà le code de mon menu :

Code : Tout sélectionner

<div id="positioner">

<div class="menu">
<a class="outer" href="../menu/index.html">DEMOS
<table class="first"><tr><td>
<a class="inner hide" href="" >M1.1</a>
<a class="inner" href="" >M1.2</a>
<a class="inner" href="" >M1.3</a>
<a class="inner" href="" >M1.4</a>
<a class="inner second" href="" >M1.5 >
<table><tr><td>
<a class="inner" href="" ">M1.1.1</a>
<a class="inner" href="" >M1.1.2</a>
<a class="inner" href="" >M1.1.3</a>
</td></tr></table>
</a>
<a class="inner" href="" >M1.6</a>
<a class="inner" href="" >M1.7</a>
<a class="inner" href="" >M1.8</a>
<a class="inner" href="" >M1.9</a>
<a class="inner" href="" >M1.10</a>
</td></tr></table>
</a>

<a class="outer" href="index.html">MENUS
<table class="first"><tr><td>
<a class="inner" href="" >M2.1</a>
<a class="inner" href="" >M2.2</a>
<a class="inner" href="" >M2.3</a>
<a class="inner" href="">M2.4</a>
<a class="inner" href="" >M2.5</a>
<a class="inner" href="" >M2.6</a>
<a class="inner" href="" >M2.7</a>
</td></tr></table>
</a>

</div></div>
<div class="corps">
blablablablablablablablablablablabla
blablablablablablablablablablablabla
blablablablablablablablablablablabla
</div>

et le code CSS :

Code : Tout sélectionner

#positioner {
	clear:both;
	position:relative; 
	top:50px; 
	left:1px; 
	z-index:100;
}
.menu {
	display:block;
	position:absolute; 
	text-align: center;
}
.menu a.outer, .menu a.outer:visited {
   color:#fff; 
   width:104px; 
   height:18px; 
   background:#e09222; 
   border:1px solid #000; 
   margin-right:1px; 
   text-align:center; 
   float:left; 
   text-decoration:none; 
   font-family: verdana, arial, sans-serif; 
   font-size:10px; 
   line-height:18px; 
   overflow:hidden;
   }
   
.menu a.outer:hover {
  background:#697210; 
  overflow:visible;
  }
.menu a.outer:hover table.first {
  background:#eee; 
  border-collapse:collapse;
  }
.menu a.inner, .menu a.inner:visited {
  width:102px; 
  height:18px; 
  border-bottom:1px solid #000; 
  text-decoration:none; 
  color:#000;
  font-family: verdana, arial, sans-serif; 
  font-size:10px; 
  text-align:center;
  }
.menu a.inner:hover {
  background:#add;
  }

.menu a.outer table.first a.second {
  height:18px; 
  line-height:18px; 
  overflow:hidden; 
  font-weight:bold;
  }
  
.menu a.outer table.first a.second:hover {
  position:relative; 
  overflow:visible;
  }
.menu a.outer table.first a.second:hover table {
  position:absolute; 
  top:-2px; 
  left:102px; 
  border-collapse:collapse; 
  background:#eee; 
  border:1px solid #000; 
  font-weight:normal
}

.titres {
	top: 50px;
	position: absolute;
	width: 45%;
	text-align: right;
	heigth: 100px;
	left: 5px;
	}
	
.contenu {
	top: 50px;
	position: absolute;
	width: 45%;
	text-align: left;
	heigth: 100px;
	right: 5px;
	}
	
.validate {
	margin:5px 5px 5px 5px;
	top: 150px;
	position: absolute;
	width: 100%;
	text-align: center;
	heigth: 100px;
	left: 5px;
	}

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)

[Asumbaa]

Salut,

Bon, il y a quelques problèmes de validité et d'accessibilité
- tu n'as pas le droit de mettre une table ou n'importe quel autre élément de type bloc dans une balise a
- attention dans la css, "heigth" c'est "height"

- un menu généralement se code comme une liste, puisque c'est une liste de liens. Tu devrais donc avoir des balises ul, li imbriquées pour tes sous-menus.

Plus d'explications, et un chouette code à adapter chez Alsacreations.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

[mymyma]

Le menu que tu m'as montré est très bien mais il utilise javascript que je veux à tout pris éviter.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)

[Asumbaa]

Mmmh...

Sans aucun Javascript, tu te retrouves obligé d'utiliser la balise a pour chaque élément qui doit avoir une réaction au survol (à cause d'Internet Explorer qui ne comprend le :hover que sur a)

Mais comme dans un a tu ne peux pas mettre un bloc, et que IE ne comprend pas plus le sélecteur a + div, tu te retrouves bloqué par ce navigateur antédiluvien

Si même chez Alsacreations, ils ont pas trouvé le moyen de se passer de js pour les menus déroulants, y'a peu d'espoir...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

[mymyma]

Coucou

Je me suis résignée à utiliser du javascript cependant, j'ai pris le modèle qui m'a été fourni mais je veux créer un menu à 3 niveaux et je n'y arrive pas.

Avez-vous des sources ou des liens à me proposer ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)

[Asumbaa]

Hello,

Où bloques-tu ? A deux niveaux, ça fonctionne ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

[mymyma]

En fait, je veux faire un 3ème niveau à droite du second mais la place est systématiquement réservée en dessous. Mon niveau 3 est donc inclus dans mon niveau 2.

Par exemple si j'ai le sous menu suivant pour un menu
menu 1.1
menu 1.2
menu 1.3

et que le menu 1.2 a un sous menu, j'obtient l'affichage suivant qd je passe au dessus du menu 1.2 :
menu 1.1
menu 1.2
menu 1.2.1
menu 1.2.2
menu 1.3

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)

[Asumbaa]

Salut,

Il faut positionner ton menu de niveau 3 à droite de son menu père.
Peux-tu donner un extrait de code HTML ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3