Rectangle bicouleur hauteur variable [Résolu]

[missd12]

Bonjour,

Je suis en train de développer un template joomla et je rencontre quelques problèmes concernant le css.
Voila ce que j'essaie de réaliser. Pour mon menu, je souhaite avoir un rectangle bicouleur avec les boutons de les menu à cheval sur mon rectangle schématiquement, je souhaite que ça ressemble à l'image en pj.


Pour réaliser cela j'ai tout d'abord créer un grand rectangle ou j'ai superposés un deuxième rectangle à gauche et j'ai inséré sur le grand rectangle le menu, avec cette solution j'ai un rectangle uni couleur sous mon menu, ce hauteur du rectangle est bien variable en fonction du nombre de menu affiché, mais je n'arrive pas à afficher le deuxième rectangle.
Voici le code associé:


dans le css;

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#Part1
{  	
  position :absolute;
  width:20%; 
  top:22%;
  background-color:#FBC101;	    
}
/**Cadre gauche pour menu 'couleur de fond'**/
#Part2
{  	
  position :absolute;
  width:50%;
  left: 50%;
  background-color:#F8F8F8;		 
}
#menu 
{
  /**Position relative du menu dans la page
  ici, a cheval sur bandeaugauchePart1 et bandeauGauchePart2*/
  margin-top: 10%;
  width: 210px;	
}

dans l'index

Code :

1
2
3
4
5
6
7
8
<div id="Part1">	
				<div id="Part2">		 
				</div>
 
				<div id="menu">
					<jdoc:include type="modules" name="menu" name="menu" />
				</div>		
			</div>

[Candygirl]

Hello,

Tu dois ajouter une hauteur à ton deuxième rectangle (height:100%) et un position:relative sur ton menu si tu souhaites qu'il passe au-dessus.

Tu pourrais arriver au même résultat, sans balise supplémentaire, de la manière suivante (IE8+):

Code hmtl :

1
2
3
4
<ul id="menu">
	<li>menu1</li>
	<li>menu1</li>
</ul>

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
		#menu {
			background:#4F81BD;
			border:2px solid #385D8A;
			position:relative;
			width:20%;
			text-align:center;
		}
 
		#menu:before {
			content:"";		
			position:absolute;
			border:2px solid #385D8A;
			width:50%;
			height:100%;
			top:-2px;right:-3px;
			background:#C6D9F1;
		}
 
		#menu li {
			position:relative;		
		}

[missd12]

Merci ça focntionne