CSS non pris en compte

**demenvil** · 15/10/2015, 13h55

Salut à tous !

Je test de développement d'un application avec nodejs. La base est généré automatiquement avec express-generator (pour plus de simplicité).

Mon code fonctionne parfaitement le seul truc c'est que l'orsque que je fait appel à une page, le css n'est pas chargé ou pas entièrement (bizarre..)

Je me sert du framework boostsrap 3.x, le link dans la source et valide et quand je clique dessus le code CSS s'affiche bien dans la page.

Je laisse le serveur ouvert pour que vous puissiez voir par vous même : http://vps204433.ovh.net:3000/users/signup

Regardez la source Ligne 6 :

Code html :

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

<link href="/stylesheets/style.css" rel='stylesheet' type='text/css'>

Et le lien ou nous pouvons voir que le code est correctement chargé en plus des infos de la console.

http://vps204433.ovh.net:3000/users/signup

Une idée du problème ?

Merci

**Diablo_22** · 15/10/2015, 14h52

Bonjour,

as tu essayé de mettre l'appel à ton css dans le head de ta page index.html:

Code html :

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

1
2
3
4
5
6
7
8
9
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
    <link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" />
    <title></title>
</head>

**demenvil** · 15/10/2015, 15h09

Nope ça ne change rien ,j'ai mis à jours en faisan également l'appel d'une ressource externe..
C'est bizarre quand même..

**Diablo_22** · 15/10/2015, 15h12

La console te sort elle une erreur de load de css...?

**Diablo_22** · 15/10/2015, 15h17

Sur ta page j'ai remplacé ton appel bootstrapp

Code html :

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">

par celui-ci:

Code html :

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

et sa fonctionne car tu appel un javascript bootstrap.min.js au lieu d'appeler un css bootstrap.min.css

**demenvil** · 15/10/2015, 15h17

Et non aucune erreur..

**Diablo_22** · 15/10/2015, 15h18

Envoyé par demenvil

Et non aucune erreur..

lit mon post du dessus

**Diablo_22** · 15/10/2015, 15h22

**demenvil** · 15/10/2015, 17h49

Bah de base dans le code j'ai cela (en affichant la source égaement donc)

Code html :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>Signup For Free - Wario</title>
<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
    <link rel="stylesheet" src="/stylesheets/style.css" /> => Bien un CSS appelé ici
 
</head>

Mais aucun rendu comme sur ton screen,
si tu affiche la source de style.css
=> http://vps204433.ovh.net:3000/stylesheets/style.css

c'est bien le bootstrap.
Nom : Screenshot from 2015-10-15 17:48:56.png
Affichages : 680
Taille : 131,9 Ko

Nom : Screenshot from 2015-10-15 17:48:56.png
Affichages : 680
Taille : 131,9 Ko

**demenvil** · 15/10/2015, 17h52

Par contre pas de trace du chargement de la ressource dans la console..

Nom : Screenshot from 2015-10-15 17:51:09.png
Affichages : 656
Taille : 186,1 Ko

C'est bizrre que ça fonctionne chez toi et pas chez moi...

**Diablo_22** · 16/10/2015, 11h40

As tu bien modifier ton index.html, tu utilises un js au lieu d'un css

ton code

Code :

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">

que tu dois remplacer par celui-ci:

Code :

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

**demenvil** · 16/10/2015, 12h46

Non mais j'ai pas d'appel de js dans le head à la place d'un fichier css.
SI j'en ai eu un c'est juste que j'ai c/c ton code de ta première réponse ^^ ou c'est un appel de js à la place d'un css:

Bonjour,

as tu essayé de mettre l'appel à ton css dans le head de ta page index.html:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
    <link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" />
    <title></title>
</head>

Après comme dit plus aut remarqué de ne pas avoir de trace du chargement du css dans la console..

**Diablo_22** · 16/10/2015, 14h41

affiche nous le code de ta page index.html.

Merci.

**demenvil** · 16/10/2015, 14h50

Voilà le code complet généré.

J'utilise swig comme moteur de template.

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
 
<!DOCTYPE html>
<html>
<head>
    <title>Signup For Free - Wario</title>
<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
    <link rel="stylesheet" src="/stylesheets/style.css" />
 
</head>
<body>
<div class="container">
    <header class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Wario</a> 
                <a class="navbar-brand"> <span id="client_count"></san></a>
            </div>
            <div class="collapse navbar-collapse">
                <nav>
    <ul class="nav navbar-nav">
        <li><a href="/" title="Home">Home</a></li>
        <li><a href="/contact" title="Contact">Contact</a></li>
    </ul>
</nav>
 
            </div>
        </div>
    </header>
 
 
<section class="container">
 
 
    <form role="form" action="/users/signup" method="post">
               <div class="form-group">
            <label for="name">Pseudo</label>
            <input type="text" name="pseudo" class="form-control" id="pseudo" placeholder="Pseudo"autocomplete="off">
            <div id="resultPseudo"></div>
        </div>
         <div class="form-group">
            <label for="email">Email</label>
            <input type="email" name="email" class="form-control" id="mail" placeholder="Enter email" autocomplete="off">
        <div id="resultMail"></div>
          </div>
              <div class="form-group">
            <label for="name">Password</label>
            <input type="password" name="password" class="form-control" id="password" placeholder="*******">
        <div id="resultPass"></div>
        </div>
	<button id="next">Next</button>
        <button type="submit" id="submit" style="display:none;" class="btn btn-default">Signup for free</button>
    </form>
</section>
 
 
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/javascripts/socket.io/socket.io.js"></script>
</body>
</html>

**demenvil** · 16/10/2015, 16h57

Sujet résolu.
J'ai mis un src au lieu d'un href dans le link pour le css.. Erreur à la con ^^

CSS non pris en compte

NodeJS

Discussions similaires

Partager

Partager