Bonjour à tous.

Je vous expose mon problème:

J'ai des cadres en CSS dont voici le code:
Code : 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>Exemple de design fluide avec menu fixe par javascript</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <STYLE type=text/css>
      html { overflow:hidden; }
      body { overflow:hidden;
	  background:  url('./images/indeximages/chrome.png'); background-color: rgb(173,173,173);/* Fond de page bleu clair, avec une image de fond (bleu clair aussi) */
 
            font-family: trebuchet ms,arial,tahoma,verdana,sans-serif;}
      code {font-size:1em;}
      #bloc-fixe { 
         position:fixed;
         border:solid 1px;
         background-color:#3c3f42;
         width:118px;
         top:10px;
         left:10px;
         overflow:auto;
         bottom:10px;
         font-size:90%;
		 text-align : center;
      }
      #bloc-variable { 
         position:fixed;
         border:solid 1px;
         background-color:#686b6e;
         top:10px;
         left:138px;
         bottom:10px;
         right:10px;
         padding:10px;
         overflow:auto;
		 outline: none;
      }
	  A {
 color : rgb(60,63,66);
font:   Arial, Helvetica, sans-serif  ;
text-decoration:none;
outline: none;
}
A:hover {
 color : rgb(60,63,66);
font:   Arial, Helvetica, sans-serif    ;
text-decoration:none;
}
}
A:visited {
 color : rgb(60,63,66);
font:    Arial, Helvetica, sans-serif    ;
text-decoration:none;
}
   </STYLE>
   <!--[if lt IE 7]>
      <STYLE type=text/css>
         #bloc-fixe, #bloc-variable {
            position:absolute;
            height: expression((document.documentElement.clientHeight
                  ? document.documentElement.clientHeight
                  : document.body.clientHeight) - (10+10) + "px");
         }
         #bloc-variable { 
            width: expression(( document.documentElement.clientWidth
                  ? document.documentElement.clientWidth
                  : document.body.clientWidth) - (138+1) + "px");
         }
      </STYLE>
      <noscript>
         <STYLE type=text/css>
            #bloc-fixe, #bloc-variable {height:100%;top:0px}
            #bloc-variable { width:650px}
            html { overflow:auto; }
            body { overflow:auto; }
         </STYLE>
      </noscript>
   <![endif]-->
</head>
<body>
   <div id="bloc-fixe">
 
 
   </div>
 
 
   <div id="bloc-variable">
   </div>
   <script type="text/javascript">
       document.getElementById("bloc-variable").focus()
   </script>
</body>
</html>
Au niveau du div bloc fixe, j'aimerais mettre des boutons portes coulissantes en css également.

Le problème est que je n'arrive pas à piger comment utiliser les class ou id pour distinguer les deux css dans la meme page.
Quelqu'un pourrait il me mettre sur la bonne voie?

EDIT:
En fait, je crois comprendre qu'il est possible d'associer un ID à un code {} mais comme l'associé à toute une feuille de style?
Et puis, une chose m'échappe.
J'ai des cadres CSS basés sur une feuille de style, comment alors pouvoir intégrer une autre feuille de style à l'interieur sans que cela change les cadres...?