1 menu, 2 problèmes

Bonjour à tous,

Sur un menu construit avec une liste non ordonnée j'ai 2 problèmes différents. Le tout est visible ici.

Voici la maquette qui montre ce que je voudrais réaliser, afin de vous permettre de mieux comprendre.

Le menu est déclaré comme suit :

<div id="menu2">			
	<ul>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Les galleries</a></li>
		<li><a href="#">Les tarifs</a></li>
		<li><a href="#">Les vins</a></li>
		<li><a href="#">Le domaine</a></li>
		<li class="empty">&nbsp;</li>
	</ul>
</div>

Problème n°1: faire que ces maudits liens soient positionnés en bas de l'élement de la liste non ordonnée. J'avais pensé faire ça, mais ça ne fonctionne pas :

#menu2 {
	position: absolute;
	top: 0;	
	width: 520px;	
	left: 50px;
  z-index: 30;
	font-size: 1.1em;
  /*font-variant: small-caps;*/
  color: #ffffff;
  height: 90px;
}

#menu2 ul {
  list-style-type: none;
	margin: 0;
	padding: 0;
}

#menu2 ul li {
	position: relative;
	float: right;
	height: 90px;
	text-align: center;
	background-image: url('../images/menu_bg.png');
	background-repeat: repeat-x;
}

#menu2 ul li.empty {
	background-image: none;
	background-color: blue;
}

#menu2 ul li a {
        position: absolute;
        bottom: 10px;
	padding: 0px 10px 0 10px;
	color: #ffffff;
}

En placant les liens en position absolue, ça devient n'importe quoi. Pourtant leur ancètre (élément de la liste) est en position relative...



Problème n°2 : comment faire pour que l'élement de la liste le plus à gauche (en bleu, classe empty) prenne toute la largeur restante ?
Modifié par Lord_Jago (28 Nov 2009 - 02:22)

bonjour,

voila ce que j'ai changer :

[code=css]
/* j'ai supprimer sa position relative */
#content {
   background-image:url(../images/main_bg.png);
   background-repeat:repeat-y;
   padding:0 50px 30px;
   z-index:5;
}


#menu2 {
   color:#FFFFFF;
   font-size:1.1em;
   height:90px;
   position:absolute;
   top:0;
   width:520px;
   z-index:30;
}

/* j'ai rajouter un padding-top pour que votre menu se retrouve en bas */
#menu2 ul li {
   background-image:url(../images/menu_bg.png);
   background-repeat:repeat-x;
   float:right;
   height:90px;
   padding-top:63px;
   position:relative;
   text-align:center;
}

/* je lui ai mis une largeur pour qui prenne le reste de la place */
#menu2 ul li.empty {
   background-color:blue;
   background-image:none;
   width:93px;
}

#title {
   position:absolute;
   top:90px;
   z-index:30;
}

Il reste des problèmes par exemple le <div id="content-bg"> que je n'ai pas modifier mais faut juste lui donner un margin-left.

J'espère que cela pourra vous aider

Pour positionner les liens verticalement utilise l'élément line-height

#menu2 ul li a {
line-height:110px;/*Ajuste la hauteur de ligne en fonction du résultat que tu veux obtenir*/
}
Modifié par Binary (29 Nov 2009 - 18:34)

bonsoir ,

même reponse que Binary en substance , + usage du contexte de formatage pour .empty sans flottement .

A tester :

#menu2 ul li , #menu2 ul li a {
	position: relative;
	float: right;
	height: 90px;
	text-align: center;
	background-image: url('../images/menu_bg.png');
	background-repeat: repeat-x;
overflow:hidden;/* contexte de formatage pour l'element non flottant + maintient de la hauteur dans IE6 par exemple*/
line-height:90px; /* simili centrage vertical , ne marche que pour une seule ligne de contenu */
}

#menu2 ul li.empty {
	background-image: none;
	background-color: blue;
float:none;/* annulation des flottement , pour tomber dans le comportement attendu (Contexte de formatage modifié ) */
}

#menu2 ul li a {
	padding: 0px 10px 0 10px;
	color: #ffffff;
}

#menu2 ul li a:hover {
	background-color: blue; /* test */
}

GC