Un menu sur une ligne

Faites un copier coller du code ci-dessous et lancez le dans votre navigateur (tested on IE & Mozilla).
Si vous souhaitez voir le résultat en démo (selon nous une bonne méthode d'apprentissage) cliquez ici (nouvelle fenêtre).

<?xml version="1.0" encoding="UTF-8"?> <!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="en" lang="en"> <head> <title>Inline Menu</title> <meta http-equiv="content-language" content="en" /> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{text-align:center;} .menu{margin:auto;width:600px;height:100px;background-color:#dcdcdc;} .menu ul{list-style-type:none;width:auto;text-align:right;height:20px} .menu ul li{float:right;width:150px;line-height:20px;text-align:center;margin:0px 1px 0px 5px;border:1px solid #c3c3c3;} .menu ul li a{display:block;color:#cfcfcf;width:150px;line-height:20px;height:20px;text-decoration:none;} .menu ul li a:hover{background-color:#cfcfcf;color:#931025;} .current{font-weight:bold} </style> </head> <body> <h1>Inline Menu example - Strict Doctype</h1> <p> We put the menu on the right side of a centered box: </p> <div class="menu"> <ul> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 2</a></li> <li class="current">Menu 1</li> </ul> </div> </body> </html>

Note:
- The margin:auto part tells Mozilla/Firefox/Netscape to follow the aligned content of the body (text-align:center) for the main area where stands the menu.

Commentaires

Postez le premier commentaire maintenant
ou venez en discuter à cette adresse:
Forum - CSS

Coin du Webmaster

Vous disposez d'un site à forte audience?

Obtenez votre Kit Graphique pour vos sites!

Engagez des Freelance Pro.

Un menu sur une ligne

Un menu sur une ligne

Commentaires

Coin du Webmaster

Categories