Appliquer son style sur une certaine partie de la page

Invité · 08/04/2015, 10h28

Bonjour,

J'applique mon css sur un menu déroulant que j'écris en dur sous forme de <ul><li><ul><li></li></ul></li></ul>.
J'aimerais savoir, si jamais je met ce menu dans une div si mon style peut s'appliquer alors que dans cette div, et si c'est le cas, comment le faire sur le CSS.

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
/* menu2 principal*/
#menu2
{
    width: 450px;
    margin-top: 0px;
    margin-left: 0px;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #4E69AA;
 
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: 0 2px 1px #C2C2C2;
    -webkit-box-shadow: 0 2px 1px #C2C2C2;
    box-shadow: 0 2px 1px #C2C2C2;
}
 
#menu2 li
{
    float: left;
    padding: 0 0 10px 0;
    position: relative;
    line-height: 0;
}
 
#menu2 a 
{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: white;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}
 
#menu2 li:hover > a
{
    color: white;
}
 
*html #menu2 li a:hover /* IE6 */
{
    color: white;
}
 
#menu2 li:hover > ul
{
    display: block;
}
 
/* Sous-menu2s */
#menu2 ul
{
    width:220px;
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #4E69AA;
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);   
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
#menu2 ul ul
{
  top: 0;
  left: 220px;
}
 
#menu2 ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #ffffff, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #ffffff, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #ffffff, 0 2px 0 #777777;
}
 
#menu2 ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}
 
#menu2 ul a
{    
    padding: 10px;
    height: 10px;
    width: auto;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}
 
*html #menu2 ul a /* IE6 */
{    
    height: 10px;
}
 
*:first-child+html #menu2 ul a /* IE7 */
{    
    height: 10px;
}
 
#menu2 ul a:hover
{
    background: #A3B600;
    background: -moz-linear-gradient(#A3B600,  #A3B600);    
    background: -webkit-gradient(linear, left top, left bottom, from(#A3B600), to(#A3B600));
    background: -webkit-linear-gradient(#A3B600,  #A3B600);
    background: -o-linear-gradient(#A3B600,  #A3B600);
    background: -ms-linear-gradient(#A3B600,  #A3B600);
    background: linear-gradient(#A3B600,  #A3B600);
}
 
#menu2 ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
 
#menu2 ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #fff;
}
 
#menu2 ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0; 
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #fff;
}
 
#menu2 ul li:first-child a:hover:after
{
    border-bottom-color: #fff; 
}
 
#menu2 ul ul li:first-child a:hover:after
{
    border-right-color: #fff; 
    border-bottom-color: transparent;   
}
 
 
#menu2 ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
 
/* Nettoyer les éléments flottant */
#menu2:after 
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
 
* html #menu2             { zoom: 1; } /* IE6 */
*:first-child+html #menu2 { zoom: 1; } /* IE7 */

Cordialement,

Invité · 08/04/2015, 12h33

Bonjour,
merci de montrer aussi le code HTML associé.

La question est bizarre... Il doit manquer des mots.

Que le menu soit dans une div ou pas, si tu as correctement placé l'identifiant "menu2", le style s'appliquera

Invité · 08/04/2015, 13h43

Mon style s'applique sur ma page entière.

Voilà mon menu, et en dessous de ce code HTML dans le body, y'a d'autre <ul><li></li></ul> qui ici ne sont pas écrit. Et je souhaiterais rajouter une div à mon menu pour que le style CSS s'applique uniquement sur le menu et pas sur les autres éléments <ul><li> de la page. Je pense que c'est possible, mais je ne sais pas les modifications à apporter côté CSS, car du point de vue HTML juste encadre mes menus dans une div avec un id je suppose.

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
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
<!DOCTYPE html>
<html>
    <head>
        <title>Test menu</title>
        <!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>-->
        <script type="text/javascript"csrc="fonction_menu.js "></script>
        <link rel="stylesheet" type="text/css" href="style1.css" /> 
        <!-- <link rel="stylesheet" type="text/css" href="style2.css" /> -->
    </head>
    <body>
        <ul id="menu2">
            <li><a href="#">Référentiels actifs</a>
                <ul>
                    <li><a href="#">Accès rapide</a>
                        <ul>
                            <li><a href="#">Patrimoine applicatif</a></li>
                            <li><a href="#">Applications</a></li>
                            <li><a href="#">Référentiel des adhérences</a></li>
                            <li><a href="#">Rôles unitaires</a></li>
                            <li><a href="#">Référentiel des redondances</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Patrimoine</a>
                        <ul>
                            <li><a href="#">Types d'actifs</a></li>
                            <li><a href="#">Statut des actifs</a></li>
                            <li><a href="#">Axes d'analyses</a></li>
                            <li><a href="#">Déploiements</a></li>
                            <li><a href="#">Périodicités</a></li>
                            <li><a href="#">Catégories</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Analyse</a>
                <ul>
                    <li><a href="#">Palmarès des usages</a></li>
                    <li><a href="#">Cycle de vie</a></li>
                    <li><a href="#">Chaine host national IARD</a></li>
                    <li><a href="#">Suivi désactivation / démantelement</a></li>
                    <li><a href="#">Analyse valeurs</a></li>
                </ul>
            </li>
        </ul>
        <ul id="menu1">
            <li><a href="#">Mes menus personnalisés</a>
                <ul>
                    <li><a href="#">RPSI</a>
                        <ul>
                            <li><a href="#">Fonctions</a></li>
                            <li><a href="#">Cartographie</a></li>
                            <li><a href="#">Processus d'entreprise</a></li>
                        </ul>
                    </li>
                    <li><a href="#">RCC</a>
                        <ul>
                            <li><a href="#">Propriétaires</a></li>
                            <li><a href="#">Clients</a></li>
                            <li><a href="#>Applications</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>

Invité · 08/04/2015, 17h52

Bonjour,

Code :

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

        <ul id="menu2">

Tous les styles contenant #menu2 xxx { ... }ne s'appliqueront qu'aux éléments contenus dans le <ul id="menu2">.

Idem, tous les styles contenant #menu1 xxx { ... } ne s'appliqueront qu'aux éléments contenus dans le <ul id="menu1">.

Je ne vois pas ce qui peut poser problème...

Invité · 09/04/2015, 09h08

Bah le problème c'est que sur Firefox ça marche visiblement bien, mais sous IE ça bloque les autres ul et li même s'ils ne sont pas dans le <ul id="menu1">.

Le problème c'est que IE interprète mal ce code

**Bovino** · 09/04/2015, 09h42

Le problème c'est que IE interprète mal ce code

Heu... lequel ?

Invité · 09/04/2015, 10h23

IE 8. Mais on m'a annoncé que nous allions passé sous IE 11, peut-être que ça réglera mes problèmes de compatibilités..

**Bovino** · 09/04/2015, 10h26

Non, je demandais surtout quel code posait problème. Parce que les sélecteurs CSS de base ne sont pas supposés poser de problème avec IE...

Invité · 09/04/2015, 10h51

Bah je ne sais pas vraiment. Juste comme j'ai de l'affichage de ul et de li après mon menu, dans le corps de ma page quoi. Et que un style différent s'applique sur ceux-la, bah un conflit est provoqué :/.

Pourtant les ul et li du corps de ma page sont reliés à une classe CSS particulière donc ça ne devrait pas ce gênait dans la logique..

**NoSmoking** · 09/04/2015, 18h58

Bonjour,

Bah le problème c'est que sur Firefox ça marche visiblement bien, mais sous IE

j'ai le même rendu sur les deux navigateurs

Au passage

Code html :

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

<script type="text/javascript"csrc="fonction_menu.js "></script>

il y a un c de trop

Code html :

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

<script type="text/javascript" src="fonction_menu.js "></script>

Invité · 10/04/2015, 09h18

Bah de mon côté, sous IE sur ma page ça bloque l'affichage des autres éléments ul et li en dessous :S

Invité · 10/04/2015, 20h07

C'est là que le bah blesse...

Invité · 13/04/2015, 10h00

J'avoue, je me suis enflammé. Tu sais IE peut te faire ressortir ton côté obscur

Je vais attendre l'arrivé de IE11 et voir comment ça ce passe.

Merci de l'aide apportée.
Jeune padawan qui demande pardon

Invité · 13/04/2015, 10h07

I.E. est DEJA à la version 11 !...

N.B. Si tu veux qu'on puisse aller plus loin, il faudrait montrer une page en ligne...

Invité · 13/04/2015, 10h57

Oui c'est fou, ils sont fort chez Microsoft pour développer IE. C'est tellement un navigateur de qualité qu'ils développent Spartan quoi \o/

Je ne sais pas si mes pages web sont accessibles hors intranet de la boite^^.

Petite question au passage, on peut gérer le nombre d’élément sur un display: inline affichés sur la ligne; ou ça dépend de leur width et de celle de la page ?

Appliquer son style sur une certaine partie de la page

CSS

Discussions similaires

Partager

Partager