Feuilles de Style en Cascade (CSS).
Formatage des menus des pages HTML et XHTML
Code XHTML avec feuille de style en cascade (CSS).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd"> <html lang="fr"> <head><title>menu horizontal en XHTML/CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"><!-- #nav {list-style: none ; margin: 0 ; padding: 0 ;} #nav li {display: inline ; margin-right: 1px ; color: #fff ; background: #c00 ; } #nav li a { background: #c00 ; color: #fff ; border: 1px solid #600 ; font: 1em "Trebuchet MS",Arial,sans-serif ; line-height: 1em ; padding: 4px 20px ; text-align: center ; text-decoration: none ; } #nav li a:hover, #nav li a:focus, #nav li a:active { background: #900 ; text-decoration: underline ; } --></style> </head> <body> <h1>Menu horizontal</h1> <ul id="nav"> <li><a href="#" title="aller à la section 1">item1</a></li> <li><a href="#" title="aller à la section 2">item2</a></li> <li><a href="#" title="aller à la section 3">item3</a></li> <li><a href="#" title="aller à la section 4">item4</a></li> <li><a href="#" title="aller à la section 5">item5</a></li></ul> <p>Remarque: dans le code source de cette page, on constate que tous les éléments de liste sont sur une même ligne. </p> <p><b><a href="http://css.bmoreaux.info/index.html" target="_blank">retour à l\'exemple de CSS</a></b></p> </body> </html>
Modifier le texte puis cliquer sur le bouton.
Exemples de CSS
© amoreaux 2005
Ma page amoreaux
Mesure d'audience ROI frequentation par