28173 sujets

CSS et mise en forme, CSS3

Position: absolute - problème avec ie

Bonjour,
j'essaye de mettre en forme un menu type liste comportant deux niveaux.

<div id="menu">
<ul>
  <li>
    <a href="#rub1" title="rub1">Rub 1</a>
    <ul>
       <li><a href="#srub1" title="srub1">sRub 1</a></li>
       <li><a href="#srub2" title="srub2">sRub 2</a></li>
       <li><a href="#srub3" title="srub3">sRub 3</a></li>
    </ul>
  </li>
  <li>
    <a href="#rub2" title="rub2">Rub 2</a>
    <ul>
       <li><a href="#srub1" title="srub1">sRub 1</a></li>
       <li><a href="#srub2" title="srub2">sRub 2</a></li>
       <li><a href="#srub3" title="srub3">sRub 3</a></li>
    </ul>
  </li>
  <li>
    <a href="#rub3" title="rub3">Rub 3</a>
    <ul>
       <li><a href="#srub1" title="srub1">sRub 1</a></li>
       <li><a href="#srub2" title="srub2">sRub 2</a></li>
       <li><a href="#srub3" title="srub3">sRub 3</a></li>
    </ul>
  </li>
</ul>
</div>


La feuille de style positionne le premier niveau de menu en barre horizontale tandis que le second prend place sur une colonne de taille fixe (%relatif à la largeur de page) à droite.

#menu ul {
  position: absolute;
}
#menu ul li {
  display: block;
  float: left;
  padding: 0 15px;
}
					
/* menu 2 */
#menu ul ul {
  margin: 0; padding: 0;
  position: relative;
  top: 35px;
  right: 0;
  width: 20%;
}


Alors le problème aparait sous ie, quand je donne au menu de second niveau une taille de 100% et un left:0, je me rends compte que la liste ne se positionne pas à gauche toute mais au niveau de la rubrique du menu de premier niveau dans lequel cette seconde liste est déclarée. Idem pour la taille de 20% n'occupe pas toute la page (cf. image jointe, vue ie ou j'ai superposé pour l'exemple plusieurs menu)

Quelqu'un a une idée de comment résoudre ca. J'aimerai dans un premier temps éviter de toucher mon html...

Merci d'avance pour le coup de main!

upload/37-problemeul.jpg
Modifié par brunob (03 Sep 2006 - 16:55)
Un autre exemple afin de mieux comprendre la problématique.
Est-il possible dans le code ci-dessous de faire sortir "contenu" de "conteneur" alors que les deux divs sont imbriqués et en position absolute.
Comment positionner "contenu" pour qu'il se positionne par rapport à la fenêtre et non pas par rapport au div supérieur??


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Test positionnement</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
		
		#conteneur {
			position: absolute;
			background-color: yellow;
			top: 100px;
			left: 20%;
			display: block;
			width: 60%;
			height: 100px;
		}
		#contenu {
			position: absolute;
			top: 40px;
			left: 0;
			z-index: 20;
			background-color: red;
		}
		
		</style>
	</head>
	<body>

		<div id="conteneur">mon conteneur
			<div id="contenu">
				mon contenu
			</div>
		</div>

	</body>
</html>
Bonjour,

A part des valeurs négatives pour ta position du contenu, je ne vois pas et encore que pour ton cas tu as une position du conteneur en % et ça ne va pas le faire (plus les problèmes d'adaptation pour IE).

Sinon pour ton menu, je n'ai pas tout compris pour tes niveaux, si tu veux que le niveau 2 apparaisse au survol, ça c'est faisable mais comment pointer le curseur de 1 à l'autre ?
Si c'est au clic, ben a part le javascript ou le php avec rechargement de la page, je ne vois pas.
Merci de ta réponse

Je recharge la page avant de faire apparaitre le menu de second niveau. Le probléme est donc comment le positionner de manière fixe (right:0;) et à une taille fixe (20% de la page) comme illustré sur la vue de firefox.

Les marges négatives ca ne m'interesse pas: comment en effet calculer les espaces alors que le menu de premier niveau est positionné en float...
Bonjour,

Bon vite fait, voit ce code là si il peut t'inspirer !! Toutes les pages sont en php.

page principale : test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

	<head>

		<title>Test positionnement</title>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 <style>
body{
background:#ffffad;
}

#conteneur{
position: absolute;
left: 0;
top: 40px;
background:#d3fffd;
width: 80%;
overflow: visible;
margin: 0;
padding: 10px;
}
 
ul {
list-style-type: none;
margin: 0;
}

.menu li {
float: left;
}

.menu a {
margin: 0 2px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
background: #ccc;
border: 1px solid gray; 
}

.menu a:active {
background: gray;
border: 1px solid gray; 
color: #fff;
}
	
.sous_menu{
width:20%;
position: absolute;
top: 0;
left: 80%;
border: 1px solid #000;
background: #00babd;
overflow: visible;
z-index:200; 
}

.sous_menu ul {
list-style-type: none;
width: 100px;
margin: 0;
padding: 0;
margin-right: auto;
margin-left: auto;
} 

.sous_menu li {
margin-bottom: 5px;

}

.sous_menu a {
     margin: 0 2px;
     width: 100px; 
     height: 20px;
     display: block;
     text-align: center;
     border: 1px solid gray;
     text-decoration: none;
     color: #000;
     background: #fff;
	 }
	 
.sous_menu a:hover {
     background: #ccc;
     border: 1px solid gray; 
     }

.sous_menu a:active {
     background: gray;
     border: 1px solid gray; 
     color: #fff;
     }
		</style>

	</head>

	<body>
<div id="conteneur">
<div >
	<ul class="menu">
    <li><a href="test.php?menu=menu1">Menu 1</a></li>
	<li><a  href="test.php?menu=menu2" >Menu 2</a></li>
	<li><a href="test.php?menu=menu3">Menu 3</a></li>
	<li><a href="test.php?menu=menu4">Menu 4</a></li></ul>


</div></div>

<?php
if (isset($_GET['menu'])){
   include ($_GET['menu'].'.php');
}
?>	

	</body>

</html>


sous menu1: menu1.php

<div class="sous_menu">
   <ul>
       <li><a href="test1.php">Menu 1</a></li>
	   <li><a href="test2.php">Menu 2</a></li>
	   <li><a href="test3.php">Menu 3</a></li>
	   <li><a href="test4.php">Menu 4</a></li>
   </ul>
</div>


sous menu2: menu2.php

<div class="sous_menu">
   <ul>
       <li><a href="test5.php">Menu 5</a></li>
	   <li><a href="test6.php">Menu 6</a></li>
	   <li><a href="test7.php">Menu 7</a></li>

   </ul>
</div>


sous menu3: menu3.php

<div class="sous_menu">
   <ul>
       <li><a href="test8.php">Menu 8</a></li>
	   <li><a href="test9.php">Menu 9</a></li>


   </ul>
</div>


sous menu4: menu4.php

<div class="sous_menu">
   <ul>
       <li><a href="test10.php">Menu 10</a></li>
	   <li><a href="test11.php">Menu 11</a></li>
	   <li><a href="test12.php">Menu 12</a></li>

   </ul>
</div>


Bon je ne sais si ça correspond à ta recherche mais bon!
On peut améliorer encore en laissant en hover le menu selectionné à l'affichage du sous menu correspondant ...

Bon courage
Oué ca je connais, mais j'ai bien spécifié que dans la mesure du possible je ne voulais pas toucher mon html.
Là tu fais deux liste l'une après l'autre alors que je veux inclure le second niveau juste après le lien du premier niveau. Regardes l'image pour comprendre la structure html...

upload/37-menu.gif

Ensuite par defaut sur le second niveau je mets display:none;
et je controle l'affichage en le passant à block sur le menu sélectionné.
Au niveau de l'accesibilité, quand on désactive les styles on peut voir que le menu est concu comme un plan du site.

Mon problème je le répète est que sous ie le menu2 se positionne mal car en position absolute, il prend comme référence le point ou se trouve la rub1 positionnée en float et non pas le bord de la fenetre du navigateur.
Modifié par brunob (04 Sep 2006 - 11:36)
Salut,

Ben a part les marges négatives avec un conteneur width non en % ...
Si tu veux conserver tes listes imbriquées, je ne vois pas à mon petit niveau de solution.
Sujet clos
Aller à