Bonjour à tous,

J'ai le code XHTML suivant:
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Rollover horizontal list navbar</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Default" href="test.css" />
   </head>
 
   <body>
 
        <div id="navcontainer">
            <ul id="navlist">
                <li class="speedbar_content_left">Accueil</li>
                <li class="speedbar_content_left">Présentation</li>
                <li class="speedbar_content_left">Expositions</li>
                <li class="speedbar_content_left">Modèles</li>
                <li class="speedbar_content_right">Contact</li>
            </ul>
        </div>
 
   </body>
</html>

J'utilise le code CSS suivant:
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#navlist
{
    padding: 0px;
    margin: 0px;
    background-color: #036;
    width: 100%;
    float: left;
    color: White;
}
 
#navlist li
{
    display: inline;
    padding: 0.2em 1em;
}
 
.speedbar_content_left
{
    float: left;
    border-right: 1px solid White;
}
 
.speedbar_content_right
{
    float: right;
    border-left: 1px solid White;
}

Ma question se situe au niveau du CSS. Je me demande quelle est la différence entre .speedbar_content_left et #navlist li .speedbar_content_left ? Je pensais que c'était la même chose puisque speedbar_content_left n'est contenu que dans une li de mon élément navlist ... Apparemment non puisque quand je passe de l'un à l'autre, l'effet obtenu n'est pas le même.

Quelqu'un pourrait-il m'expliquer la différence ?

Merci d'avance,

Marco85