<-[[index]] ====== Menu latéral ====== Un menu latéral, ===== Mise en place des éléments ===== On recrée une page de base contenant un ul #menu Les ul et li servent à faire des listes, un menu, c'est une liste de liens, donc le tag ul est particulièrement bien adapté. Dans les ul on va utiliser ce tag. Pour faire bien, mettons un bloc #content dans-lequel on place du faux texte



	
		Home
		Philosophy
		Products
		Contacts
	
	
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
		sed do eiusmod tempor incididunt ut labore et dolore magna 
		aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
		ullamco laboris nisi ut aliquip ex ea commodo consequat. 
		Duis aute irure dolor in reprehenderit in voluptate velit 
		esse cillum dolore eu fugiat nulla pariatur. Excepteur 
		sint occaecat cupidatat non proident, sunt in culpa qui 
		officia deserunt mollit anim id est laborum.


body{
	background-color:#f2f2f2;
}
#container{
	background-color:#fff;
	width:960px;
}

==== Création du menu ==== Pour interférer avec les li dans le #menu, tapez


#menu li{
	background-color:purple;
}

Pour interférer avec les a dans les li dans le #menu, tapez


#menu li a{
	text-decoration:none;
}

Vous devez : * spécifier la largeur du #menu * placer les li en float left (n'oubliez pas de spécifier la largeur et de virer les margin et les paddings) * enlever les puces avec list-style-type:none; * centrer le texte dans son espace * Si le texte du #content a tendance à se placer à droite du menu, c'est que vous avez oublié d'y appliquer un clear:both * mettre en page le reste pour avoir un rendu ressemblant à l'image ci-dessous {{:ressources:html:menu_page.png?700|}}