Disable an external CSS in a page

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Francoi gckx

Francoi gckx

02/05/2013 10:58:48
Quote Anchor link
Hallo aandachtige lezers

Probleem: Ik heb een main menu met css bestand: main_menu.css met 1 dropdown menu
Bij inloggen komt er een knop bij de "Control Panel" die heeft
ook een dropdown menu met 2 levels en heel ander style dan die van de main menu
gelinkt aan css bestand: cp_menu.css.

Bij firefox, chrome, ie10 (ie9 weet ik niet) weet de browser hoe te handelen.

Maar in ie8 pakt hij de style van de dropdownmenu uit main_menu.css op "Control Panel - dropdownmenu"

Twee vragen die het mogelijk kunnnen oplossen, zoniet geef ik daar code bij |

-Zijn er nog veel mensen die werken met ie8?
-Is het mogelijk om in een pagina een external css te blokkeren?
 
PHP hulp

PHP hulp

20/12/2024 19:31:26
 
Wouter J

Wouter J

02/05/2013 11:20:26
Quote Anchor link
Quote:
Zijn er nog veel mensen die werken met ie8?

Ja, iedereen die windows XP heeft is verplicht tot ie8 als nieuwste browser

Quote:
Is het mogelijk om in een pagina een external css te blokkeren?

Ik denk het niet, of ik begrijp je vraag verkeerd.
 
Francoi gckx

Francoi gckx

02/05/2013 11:26:02
Quote Anchor link
Wouter J op 02/05/2013 11:20:26:
Quote:
Zijn er nog veel mensen die werken met ie8?

Ja, iedereen die windows XP heeft is verplicht tot ie8 als nieuwste browser

Quote:
Is het mogelijk om in een pagina een external css te blokkeren?

Ik denk het niet, of ik begrijp je vraag verkeerd.


Ik geef wel code is denk ik beter:
Dus dit is de main menu:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8 />
    <link rel="stylesheet" type="text/css" href="./css/main_menu.css" media="all" />
</head>
                        <!-- NAV MENU -->
                            <a href="index.php"><div id="mnu_btn_home"><div class="mnu_btn_text">
                                Home</div></div></a>
                            <img src="images/img_alt3.gif" id="img_alt3" alt="" />
                            </div>
                            <div id="colwrapcstm">
                            <div id="colwrap3">
                            <ul id="drop-down-menu">
                                <li><div id="mnu_btn_aboutus"><div class="mnu_btn_text">
                                Over Ons</div></div></a>
                                    <ul>
                                        <li><a class="padding" href="index.php?page=info_opleidingen" >Opleiden</a></li>
                                        <li><a class="padding" href="index.php?page=info_bemiddeling" >Bemiddelen</a></li>
                                        <li><a class="padding" href="index.php?page=info_engineering">Engineering</a></li>
                                        <li><a class="padding" href="index.php?page=info_simulatie">Simulatie</a></li>
                                    </ul>    
                                </li>
                            </ul>    
                            <img src="images/index_r7_c8.gif" id="index_r7_c8" alt="" />
                            </div>
                            <div id="colwrap4">
                            <a href="index.php?page=vacatures"><div id="mnu_btn_vacatures"><div class="mnu_btn_text">
                                Vacatures</div></div></a>
                            <img src="images/index_r6_c10.gif" id="index_r6_c10" alt="" />
                            </div>
?>


Met de bijhorende css:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?php
#drop-down-menu a {
    height: 15px;
    }
    ul{
        margin:0;
        padding:0;
        list-style:none;
}
    ul li{
        }
    li ul{display:none
    }
    ul li a{
        display:block;
        text-decoration:none;
        white-space:nowrap;
        color: black;
        font-weight:normal;
        }
    ul li a:hover{}
    li:hover ul{
    margin-left: -35px;
    margin-top:40px;
    text-align: center;
    font-size: 18px;
    z-index: 1;
        display:block;
        position:absolute;
        background: #c8a438; /* Old browsers */
        background: -moz-linear-gradient(top,  #c8a438 0%, #c8a438 17%, #efe3be 63%, #ffffff 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8a438), color-stop(17%,#c8a438), color-stop(63%,#efe3be), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #c8a438 0%,#c8a438 17%,#efe3be 63%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #c8a438 0%,#c8a438 17%,#efe3be 63%,#ffffff 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #c8a438 0%,#c8a438 17%,#efe3be 63%,#ffffff 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #c8a438 0%,#c8a438 17%,#efe3be 63%,#ffffff 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8a438', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

        }
    li:hover li{
        font-size:70%;
        font-weight: normal;
        width: 150px;
        }
    li:hover a{}
    li:hover li a:hover{
        background: #e9dba9; /* Old browsers */
        background: -moz-linear-gradient(-45deg,  #e9dba9 0%, #e9dba9 25%, #d7bd6c 50%, #e9dba9 75%, #e9dba9 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e9dba9), color-stop(25%,#e9dba9), color-stop(50%,#d7bd6c), color-stop(75%,#e9dba9), color-stop(100%,#e9dba9)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(-45deg,  #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(-45deg,  #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(-45deg,  #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* IE10+ */
        background: linear-gradient(135deg,  #e9dba9 0%,#e9dba9 25%,#d7bd6c 50%,#e9dba9 75%,#e9dba9 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9dba9', endColorstr='#e9dba9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border: 1px solid #bcbbbb ;
    width: 150px;
    letter-spacing: 0.3em;
            text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
        color:white;
    
    }
?>


DEEL 2: de extra knop bij inloggen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8 />
    <link rel="stylesheet" media="all" href="./css/menustyle.css" />
</head>
<div id="nav">
    <ul>
        <li>
            <div id="mnu_btn_controlpanel">
                <div class="mnu_btn_text" style="color:white;font-size:16px;
                                            text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);">
                    Control Panel</div></div>
                        <ul>
                            <li><a href="#">Hoofdmenu</a>
                                <ul>
                                <li><a href="register.php">Maak iemand admin</a></li>
                                <li><a href="index.php?page=changepassword">Verander wachtwoord</a></li>
                                <li><a href="logout.php">Uitloggen</a></li>
                                </ul>
                            </li>
                            <li><a href="#">CV's gedeelte</a>
                                <ul>
                                <li><a href="index.php?page=cv">CV'S bekijken</a></li>
                                <li><a href="index.php?page=cv&action=add">CV Toevoegen</a></li>
                                <li><a href="cvmatch.php">CV Matchen</a></li>
                                </ul>
                            </li>
?>


Bijhorende CSS
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?php
#mnu_btn_controlpanel {
    margin-left: 0px;
    margin-top: 0px;
    display: inline;
    float: left;
    height: 40px;
    margin-bottom: 0;
    width: 248px;
    background: Url('../images/mnu_btn_controlpanel.gif') no-repeat;
    
}


#nav {

       font: bold 12px Arial, Helvetica, Sans-serif;
   overflow: hidden;
        
}

#nav ul {
    margin:0;
    padding:0;
    list-style:none;
    
}

#nav ul li {
    float:left;
    
}

#nav ul li a {
       float: left;
    color:#d4d4d4;
        padding: 10px 20px;
    text-decoration:none;
        background:#3C4042;
     background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
    background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
    background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);

    
}

#nav ul li a:hover,
#nav ul li:hover > a {
        color: #252525;
        background:#3C4042;
    background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
    background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );

            
}

#nav li ul a:hover,
#nav ul li li:hover > a  {
    color: #2c2c2c;
      background: #5C9ACD;
    background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
    background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
    background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
        text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}



#nav li ul {
        background:#3C4042;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        position: absolute;
        width: 160px;
        left:169px;
        margin-top:40px;
        
}

#nav li:hover ul {
        left: auto;
        position: absolute;
        width: 160px;
        left:169px;
        
}

#nav li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 120px;
        letter-spacing:0;
        
}

#nav li li ul {
        left:0px;
        margin-left:160px;
        margin-top:0px;
        visibility:hidden;
        
}

#nav li li:hover ul {
        visibility:visible;
        left:0px;
        margin-left:160px;
        margin-top:0px;
        
}

#nav ul ul li:last-child > a {
    
}

#nav ul ul ul li:first-child > a {
    
}
?>


In ie8 pakt die dus toch nog de style van de mainmenu dropdown menu
 
Wouter J

Wouter J

02/05/2013 11:28:23
Quote Anchor link
1. Kun je aub [code] tags gebruiken voor code die geen PHP is?
2. Kun je aub alleen relevante code posten en de rest op pastebin.com oid zetten?
3. Kun je aub een voorbeeldje maken met jsfiddle.net oid, zodat we wat kunnen testen?
 
Francoi gckx

Francoi gckx

02/05/2013 11:45:46
Quote Anchor link
1. Ok sorry ik wist alleen hoe je hier php code kan zetten
2. Dit is de relevante code eerst heb ik de standaard menu gepost
daarna de css van die menu
daarna de extra dropdownmenu
en de css daarvan
3. http://jsfiddle.net/h3766/ <-- standaard menu dropdown
http://jsfiddle.net/jD9Sj/ <-- extra control panel dropdown menu (hoe het hoort maar niet in ie8)
Dus bij de control panel dropdown menu krijg ik nog steeds de style van de standaard menu dropdown en de 2de level doet het dan gelijk ook niet
Gewijzigd op 02/05/2013 11:50:01 door Francoi gckx
 
Eddy E

Eddy E

02/05/2013 14:10:11
Quote Anchor link
Wouter J op 02/05/2013 11:20:26:
Quote:
Zijn er nog veel mensen die werken met ie8?

Ja, iedereen die windows XP heeft is verplicht tot ie8 als nieuwste browser

Quote:
Is het mogelijk om in een pagina een external css te blokkeren?

Ik denk het niet, of ik begrijp je vraag verkeerd.


Opera/Chrome en Firefox gaan toch ook prima op XP?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.