CSS wil niet meeladen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Enrico van der List

Enrico van der List

03/11/2014 17:02:15
Quote Anchor link
Momenteel heb ik een inlog en wanneer je dan bent ingelogd dan moet ik een nieuwe pagina hebben met een nieuwe CSS maar op een of andere manier laad dan mijn CSS niet mee. Hoe kan dat dan? Want ik zit er al een tijdje mee te rommelen :S

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
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
<?php
    session_start();
    include('../mysql_connect.php');

    if(isset($_SESSION['ingelogd'])){
        //header('location: member.php');
        
    } else{
        header('location: login.php');
?>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

<!-- CSS -->
<link href="../css/structure.css" rel="stylesheet">
<link href="../css/main.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body id="home">
    <article id="wrap">
    <!-- header -->
        <header class="header">
            <article id="erb-image-wrapper">
                <img class="teamlogo" src="../img/Roparun.png"/>
                <img class="roparunlogo" src="../img/RoparunLogo2015.png"/>
                <img class="hoofdsponsor" src="../img/Swietelsky.png"/>
            </article>
                <article class="wrap">                
                    <article class="tour">
                        <img class="route" src="../img/header-roparun12.png"/>
                    </article>
                </article>
        </header>
                    
        <section id="main">    
               <article class="test">
        </article>
            <article class="wrap">
                <nav class="nav">
                    <ul class="nav-list">
                        <li class="nav-item"><a href="../Index.php">Home</a></li>
                        <li class="nav-item"><a href="#">Nieuwsbieven</a></li>
                        <li class="nav-item"><a href="#">Team leden</a></li>
                        <li class="nav-item"><a href="#">Sponsors</a></li>
                        <li class="nav-item"><a href="#">Event</a></li>
                        <li class="nav-item"><a href="#">Foto's</a></li>
                        <li class="nav-item"><a href="#">Video's</a></li>
                        <li class="nav-item"><a href="#">.....</a></li>
                        <li class="nav-item"><a href="logout.php">Uitloggen</a></li>
                    </ul>
                </nav>        
            </article>
        </section>
        
        <section class="content">
            <article class="wrap">
                <!-- inlog gebruiker -->      
                <article class="kolom-left">
                    <?php
                        
                        echo "Naam: ".$_SESSION['naam']." ". $_SESSION['achternaam']."<br><br>";
                        echo "E-mail: " . $_SESSION['email']."<br><br>";
                        echo "Gebruikersnaam: " . $_SESSION['gebruikersnaam']."<br><br>";
                        echo "Wachtwoord: " . $_SESSION['wachtwoord']."<br><br>";
                        }

                    ?>

                </article>
                <!-- nieuwsbrieven overzicht -->
                <article class="kolom-right">
                <a href='logout.php'>Uitloggen!</a>

                nieuwsbrieven
                </article>
                
                <!-- overzicht agenda -->
                <article class="kolom-right">
                    <?php
                        $id
= $_GET['id'];
                        
                        $resultaat =  mysql_query("SELECT * FROM Agenda ORDER BY datum ASC LIMIT 5", $db);                        
                        while ($row = mysql_fetch_array($resultaat))
                        {
    
                            $id = $_GET['id'];
                            echo "<table class='agendatable'>
                            <tr>
                                <td class='datum'>"
. $row['datum']."</td>
                                <td class='event'>"
. $row['event']."</td>
                                <td class='info'><a href='http://www."
. $row['info']."'target='_blank'>info</a></td>
                            </tr></table>"
;
                        }

                        
                        if (mysql_error())
                        {

                            echo mysql_error();
                        }

                    ?>

                </article>
                
                <!-- overzicht sponsors -->
                <article class="kolom-right">
                sponsors
                </article>
                
                
                <!-- overzicht leden -->
                <article class="kolom-left">
                    <?php
                        $gebruikersbestand
= mysql_query("SELECT * FROM Leden");
                        echo "<table>";
                        echo "<tr><td><h4>Voornaam<h4</td><td><h4>Achternaam<h4></td><td><h4>Gerbuikersnaam</h4</td><td><h4>E-mail</h4></td>";
                        
                        while ($row = mysql_fetch_array($gebruikersbestand))
                        {
    
                            echo "<tr>";            
                            echo "<td>".$row['naam']."</td> <td> ". $row['achternaam']. "</td> <td>". $row['gebruikersnaam']. "</td> <td> ". $row['email'] ."</td>";     
                            echo "</tr>";
                        }

                        echo "</table>";
                ?>

                </article>              
            </article>
        </section>
        
    </article>        
      
      <!-- footer -->
      
    <footer class="footer">
        <article class="wrap">
               <p><em>trachten leven toe te voegen aan de dagen, waar geen dagen meer kunnen worden toegevoegd aan het leven</em></p>
                <article class="socialmedia">
                    <a href="#" target="_blank"><img src="../img/facebook-512.png" width="50px"></a>
                    <a href="#" target="_blank"><img src="../img/twitter-512.png" width="50px"></a>
                </article>
        </article>
    </footer>  
      
      <!-- credits -->

</article>
    
    <script>
        (function () {
        
            // Create mobile element
            var mobile = document.createElement('div');
            mobile.className = 'nav-mobile';
            document.querySelector('.nav').appendChild(mobile);
        
            // hasClass
            function hasClass(elem, className) {
                return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
            }
        
            // toggleClass
            function toggleClass(elem, className) {
                var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
                if (hasClass(elem, className)) {
                    while (newClass.indexOf(' ' + className + ' ') >= 0) {
                        newClass = newClass.replace(' ' + className + ' ', ' ');
                    }
                    elem.className = newClass.replace(/^\s+|\s+$/g, '');
                } else {
                    elem.className += ' ' + className;
                }
            }
        
            // Mobile nav function
            var mobileNav = document.querySelector('.nav-mobile');
            var toggle = document.querySelector('.nav-list');
            mobileNav.onclick = function () {
                toggleClass(this, 'nav-mobile-open');
                toggleClass(toggle, 'nav-active');
            };
        })();
        </script>
</body>
</html>
Gewijzigd op 03/11/2014 17:03:49 door Enrico van der List
 
PHP hulp

PHP hulp

28/11/2024 10:15:56
 
- Ariën  -
Beheerder

- Ariën -

03/11/2014 17:11:03
Quote Anchor link
Absolute links gebruiken, zoals /css/structure.css
 
Eddy E

Eddy E

03/11/2014 17:11:21
Quote Anchor link
Is ../css/main.css wel correct?

Wat is de absolute URL van je pagina?
Wat is de absolute URL van je CSS?
Klopt dat?

Wellicht maak je beter gebruik van absoulte paden (althans: bij je CSS-links):

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<link href="http://www.website.nl/css/structure.css" rel="stylesheet">
<link href="http://www.website.nl/css/main.css" rel="stylesheet">


Dan weet je zeker dat het adres klopt. Want dat zal waarschijnlijk (99% kans, schat ik) zijn.
 
Enrico van der List

Enrico van der List

03/11/2014 17:19:04
Quote Anchor link
@Eddy dat werkt niet want ik mis nog een hele stukken van de pagina zoals mijn NAV tot regel 75 laad het ook nog niet eens :s
 
Eddy E

Eddy E

03/11/2014 17:34:36
Quote Anchor link
Dan gaat er dus iets anders mis ;).

Wat gaat er mis dat er een hele stukken (euh?) mist?
Je navigatie mist nog... en dat komt wellicht door incorrect HTML-gebruik.

Kan je de geparste (kant-en-klare) HTML eens ergens posten?

Daarnaast: <article> is voor artikelen, niet voor je menu, als wrapper of opsommingslijst voor afbeeldingen.
Dus het stuk hieronder is echt fout:

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
<article id="wrap">
    <!-- header -->
        <header class="header">
            <article id="erb-image-wrapper">
                <img class="teamlogo" src="../img/Roparun.png"/>
                <img class="roparunlogo" src="../img/RoparunLogo2015.png"/>
                <img class="hoofdsponsor" src="../img/Swietelsky.png"/>
            </article>
                <article class="wrap">                
                    <article class="tour">
                        <img class="route" src="../img/header-roparun12.png"/>
                    </article>
                </article>
        </header>
      


Doe dat gewoon zo:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
    <!-- header -->
        <header>
                <img class="teamlogo" src="../img/Roparun.png"/>
                <img class="roparunlogo" src="../img/RoparunLogo2015.png">
                <img class="hoofdsponsor" src="../img/Swietelsky.png">
                <img class="route" src="../img/header-roparun12.png">
        </header>
      


Klopt: geen enkel article bij je header.
En geen <div> er om heen: je kan <body> gebruiken.
Geen <header> met class="header"... ga je in je CSS header.header gebruiken?
 
Enrico van der List

Enrico van der List

03/11/2014 18:00:23
Quote Anchor link
Eddy E op 03/11/2014 17:34:36:
Dan gaat er dus iets anders mis ;).

Wat gaat er mis dat er een hele stukken (euh?) mist?
Je navigatie mist nog... en dat komt wellicht door incorrect HTML-gebruik.

Kan je de geparste (kant-en-klare) HTML eens ergens posten?

Daarnaast: <article> is voor artikelen, niet voor je menu, als wrapper of opsommingslijst voor afbeeldingen.
Dus het stuk hieronder is echt fout:

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
<article id="wrap">
    <!-- header -->
        <header class="header">
            <article id="erb-image-wrapper">
                <img class="teamlogo" src="../img/Roparun.png"/>
                <img class="roparunlogo" src="../img/RoparunLogo2015.png"/>
                <img class="hoofdsponsor" src="../img/Swietelsky.png"/>
            </article>
                <article class="wrap">                
                    <article class="tour">
                        <img class="route" src="../img/header-roparun12.png"/>
                    </article>
                </article>
        </header>
      


Doe dat gewoon zo:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
    <!-- header -->
        <header>
                <img class="teamlogo" src="../img/Roparun.png"/>
                <img class="roparunlogo" src="../img/RoparunLogo2015.png">
                <img class="hoofdsponsor" src="../img/Swietelsky.png">
                <img class="route" src="../img/header-roparun12.png">
        </header>
      


Klopt: geen enkel article bij je header.
En geen <div> er om heen: je kan <body> gebruiken.
Geen <header> met class="header"... ga je in je CSS header.header gebruiken?


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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<?php
    session_start();
    include('../mysql_connect.php');

    if(isset($_SESSION['ingelogd'])){
        //header('location: member.php');
        
    } else{
        header('location: login.php');
    }

?>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>admin</title>

<!-- CSS -->
<link href="../css/main.css" rel="stylesheet"/>
<link href="../css/main.css" rel="stylesheet"/>

</head>
<body id="home">
    <article id="wrap">
    <!-- header -->
        <header>
                <img class="teamlogo" src="../img/Roparun.png"/>
                <img class="roparunlogo" src="../img/RoparunLogo2015.png">
                <img class="hoofdsponsor" src="../img/Swietelsky.png">
                <img class="route" src="../img/header-roparun12.png">
        </header>
                    
        <section id="main">
           <div id="test">
        </div>
            <article class="wrap">
                <nav class="nav">
                    <ul class="nav-list">
                        <li class="nav-item"><a href="../Index.php">Home</a></li>
                        <li class="nav-item"><a href="#">Nieuwsbieven</a></li>
                        <li class="nav-item"><a href="#">Team leden</a></li>
                        <li class="nav-item"><a href="#">Sponsors</a></li>
                        <li class="nav-item"><a href="#">Event</a></li>
                        <li class="nav-item"><a href="#">Foto's</a></li>
                        <li class="nav-item"><a href="#">Video's</a></li>
                        <li class="nav-item"><a href="#">.....</a></li>
                        <li class="nav-item"><a href="logout.php">Uitloggen</a></li>
                    </ul>
                </nav>        
            </article>
        </section>
        
        <section class="content">
            <article class="wrap">
                <!-- inlog gebruiker -->      
                <article class="kolom-left">
                 <? //hier komt php ?>
                </article>
                <!-- nieuwsbrieven overzicht -->
                <article class="kolom-right">
                <a href='logout.php'>Uitloggen!</a>
 <? //hier komt php ?>
                nieuwsbrieven
                </article>
                
                <!-- overzicht agenda -->
                <article class="kolom-right">
 <? //hier komt php ?>
                </article>
                
                <!-- overzicht sponsors -->
                <article class="kolom-right">
                sponsors
 <? //hier komt php ?>
                </article>
                
                
                <!-- overzicht leden -->
                <article class="kolom-left">
 <? //hier komt php ?>
                </article>              
            </article>
        </section>
        
    </article>        
      
      <!-- footer -->
      
    <footer class="footer">
        <article class="wrap">
               <p><em>trachten leven toe te voegen aan de dagen, waar geen dagen meer kunnen worden toegevoegd aan het leven</em></p>
                <article class="socialmedia">
                    <a href="#" target="_blank"><img src="../img/facebook-512.png" width="50px"></a>
                    <a href="#" target="_blank"><img src="../img/twitter-512.png" width="50px"></a>
                </article>
        </article>
    </footer>  
      
      <!-- credits -->
</article>
    
    <script>
        (function () {
        
            // Create mobile element
            var mobile = document.createElement('div');
            mobile.className = 'nav-mobile';
            document.querySelector('.nav').appendChild(mobile);
        
            // hasClass
            function hasClass(elem, className) {
                return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
            }
        
            // toggleClass
            function toggleClass(elem, className) {
                var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
                if (hasClass(elem, className)) {
                    while (newClass.indexOf(' ' + className + ' ') >= 0) {
                        newClass = newClass.replace(' ' + className + ' ', ' ');
                    }
                    elem.className = newClass.replace(/^\s+|\s+$/g, '');
                } else {
                    elem.className += ' ' + className;
                }
            }
        
            // Mobile nav function
            var mobileNav = document.querySelector('.nav-mobile');
            var toggle = document.querySelector('.nav-list');
            mobileNav.onclick = function () {
                toggleClass(this, 'nav-mobile-open');
                toggleClass(toggle, 'nav-active');
            };
        })();
        </script>
</body>
</html>


dit is dan de code die wel werkt maar dan heb ik alle php eruit gehaald tijdelijk. dan neemt hij wel zijn css mee
 
Eddy E

Eddy E

03/11/2014 18:12:37
Quote Anchor link
Dan gaat er dus iets fout in je PHP.
Zet bovenaan (in je PHP) eens:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
error_reporting(E_ALL);
?>


Dus bij session_start; of zo.
Waarschijnlijk krijg je een foutmelding waardoor je HTML halverwege wordt afgebroken.
En dan klopt je HTML-lijst (je DOM) niet meer. En dan weet CSS ook niet hoe of wat.

Dus daar ligt waarschijnlijk de oorzaak.
Desalniettemin raad ik je aan absolute paden te gebruiken richting je stijlbladen (en Javascripts).
 
Enrico van der List

Enrico van der List

03/11/2014 18:45:56
Quote Anchor link
heb het al gevonden hat lag blijkbaar aan het eerste stukje php waar al je inlog gegevens worden getoond, mede dank @Eddy E.

/**** Case Closed ***/ ;)
Gewijzigd op 03/11/2014 18:47:14 door Enrico van der List
 



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.