'position: absolute' précise que l'élément ul est positionné de façon indépendante de tout texte qui vient avant ou après dans le document, et 'left' et 'top' indiquent quelle est cette position.
Dans ce cas, 4em depuis le haut et 1em depuis le côté gauche de cette fenêtre.
'4em' signifie 4 fois la taille de la fonte courante.
C'est à dire que si le menu est affiché avec une fonte de 12 points, '4em' font 48 points.
L'unité 'em' est très utile en CSS puisqu'elle peut s'adapter automatiquement à la fonte que le lecteur utilise.
La plupart des navigateurs ont un menu pour agrandir et réduire la taille de fonte: vous pouvez l'essayer et voir comment la taille du menu augmente dès que la fonte grossit, ce qui n'aurait pas été le cas si nous avions utilisé une taille en pixels à la place.
Dans cette exemple nous voyons apparaître la notion de classe avec ".navbar".
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Ma première page avec du style</title>
<style type="text/css">
body { font-family: Georgia, "Times New Roman", Times, serif;}
body { background-color: #6CF; color: #00F; padding-left:9.5em; }
h1 { font-family: Helvetica, Geneva, Arial, sans-serif; }
ul.navbar { position: absolute; top: 4em; left: 1em; width:9em }
</style>
</head>
<body>
<ul class="navbar">
<li><a href="ex0.html">Sans style</a></li>
<li><a href="ex1.html">Avec style (1)</a></li>
<li><a href="ex2.html">Avec style (2)</a></li>
[etc.]
<address>Fait le 5 juin 2011</address>
</body>
</html>
Le menu de navigation ressemble toujours à une liste au lieu d'un menu.
Ajoutons un peu de style. Nous allons supprimer les points de la liste et déplacer les éléments à gauche, à l'endroit où étaient les points. Nous allons aussi donner à chaque élément son propre fond blanc ainsi qu'un carré noir.
Nous allons ajouter la couleur des liens suivant qu'ils ont déjà été visité ou non.
Exemple suivant ... Avec style (3).