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

<div id="container">
	<ul id="menu">
		<li><a href="#1" title="Back to Home">Home</a></li>
		<li><a href="#2" title="Our Philosophy">Philosophy</a></li>
		<li><a href="#3" title="Our Products">Products</a></li>
		<li><a href="#4" title="Contact us">Contacts</a></li>
	</ul>
	<div id="content">
		<p>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.</p>
	</div>
</div>
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.txt · Last modified: 2013/06/16 22:51 (external edit)
 
 
Creative Commons License Powered by PHP Valid XHTML 1.0 April