du css dans du css

**idamarco** · 08/01/2009, 22h26

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...?

**grafik.muzik** · 10/01/2009, 00h48

Si par « bouton porte coulissante » vous entendez « barre de de défilement », il existe une propriété overflow: scroll, qui couplé à une hauteur fixe (height: 200px par exemple) qui pourra faire l'affaire.

Je ne comprend pas vraiment ce que vous entendez par « cadre », peut-être voulez vous parler de portion de code?

Je vous suggèrerai avant tout de bien réviser vos bases de XHTML et de CSS. L'idéal pour s'améliorer, c'est de lire des tutoriels.

**Bovino** · 10/01/2009, 09h47

Tu peux commencer ici.

**devyan** · 10/01/2009, 12h31

Envoyé par grafik.muzik

Si par « bouton porte coulissante » vous entendez « barre de de défilement », il existe une propriété overflow: scroll, qui couplé à une hauteur fixe (height: 200px par exemple) qui pourra faire l'affaire.

Je ne comprend pas vraiment ce que vous entendez par « cadre », peut-être voulez vous parler de portion de code?

Je vous suggèrerai avant tout de bien réviser vos bases de XHTML et de CSS. L'idéal pour s'améliorer, c'est de lire des tutoriels.

Tu peux trouver un article concernant la méthode dite des portes coulissantes ICI (appliqué au dessin d'onglets mais cela peut facilement ce généraliser)

**idamarco** · 10/01/2009, 12h55

Merci pour vos réponses.
En fait j'ai mal présenté mon problème.
J'ai un fichier index dans lequel j'ai du code CSS qui me permet de faire un "frame" droit et un frame gauche-menu. Ce que j'appelle des cadres ou des pseudo frame.
J'ai donc une tartine de CSS pour parametrer tout cela.
Dans la fenetre de gauche j'ai des boutons reactifs en CSS (sur le principe des portes coulissantes).
Mon probleme est que je me retrouve avec deux contenu CSS, un pour les frames l'autre pour les boutons et que cela génère des conflits évidemment.
Je voudrais savoir comment associer TOUS les codes de ma première page CSS à un contenu de mon fichier puis TOUS les codes de l'autre page CSS à une autre partie de mon fichier.
ID et Class que j'ai commencé à étudier ne semblent le faire que pour UNE commande CSS et non pas pour un groupe de commande.
Je suis plus clair?

**12monkeys** · 10/01/2009, 16h18

Bonjour

Si je suis bien ton explication il faut que tu étudie la cascade (un élément primordial dans les css : d'où leur nom : cascading style sheets).

La cascade c'est comment certains sélecteurs ont la priorité sur d'autres...

Dans ton cas tu crée simplement deux divs avec des id uniques pour chacune de tes zones, puis pour attribuer chaque style css à une des zones tu fait précéder la déclaration par l'id de ladite zone...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="zonea">
contenu 1
</div>
<div id="zoneb">
contenu 2
</div>

Le code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#zonea p { color:red; }

Dans cet exemple si tu as des balises p dans la zoneb, leur contenu ne sera pas rouge, parce que la déclaration color:red ne s'applique qu'aux paragraphes situés dans l'élément bénéficiant de l'id nommé zonea.

Ais je bien compris ton interrogation ?

**idamarco** · 11/01/2009, 15h01

Oui en grande partie!

En fait, il y a une chose que je n'arrive pas à piger:

Si j'ai deux commande du style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
A:visited {
 color : rgb(255,255,255);
font-family: serif text-decoration:none;
}
A img
{
border: none;
}

je mets le #zonea devant chaque?
genre ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
 #zonea A:visited {
 color : rgb(255,255,255);
font-family: serif text-decoration:none;
}
 #zonea A img
{
border: none;
}

?

du css dans du css

CSS

Vue hybride

Discussions similaires

Partager

Partager