CSS Pas pris en compte sur ma page JSF

Salut à tous!
Je débute en J2EE et je rencontre quelques difficultés. notamment sur mes pages JSF
j'utilise le framework JSF Primefaces 5.1 alors j'ai créé une page index.xhtml qui s'affiche très bien mais lorsque je crée la seconde page stagiaire.xhtml
Je vois tous les liens mais pas de CSS.
je sais donc pas quoi penser.

les fichiers sont
index.html :

Code:

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:u="http://xmlns.jcp.org/jsf/passthrough">
 
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="description" content=""/>
        <meta name="author" content="FalCon"/>
        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <h:outputStylesheet name="./css/metro-bootstrap.css" />
        <h:outputStylesheet name="./css/metro-bootstrap-responsive.css" />
        <h:outputStylesheet name="./css/iconFont.min.css" />
 
                <title>Welcome | InternShip Management 1.0</title>
    </h:head>
 
    <body class="metro">
 
        <div id="top">
        <ui:insert name="top">
            <nav class="navigation-bar fixed-top">
            <nav class="navigation-bar-content">
        <div class="element">
            <a class="element-menu" href="#"><span class="icon-box"></span>InternShip Management</a>
        </div>
 
            <span class="element-divider"></span>
            <a class="element brand" href="#"><span class="icon-spin"></span></a>
            <span class="element-divider"></span>
            <a class="element brand" href="#"><span class="icon-printer"></span></a>
            <span class="element-divider"></span>
 
        <div class="element input-element">
            <form>
                <div class="input-control text">
                    <input type="text" placeholder="Search..."></input>
                    <button class="btn-search"></button>
                </div>
            </form>
        </div>
 
        <div class="element place-right">
            <a class="dropdown-toggle" href="#">
                <span class="icon-cog"></span>
            </a>
            <ul class="dropdown-menu place-right" data-role="dropdown">
                <li><a href="#">My Profile</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Log Out</a></li>
            </ul>
        </div>
            <span class="element-divider place-right"></span>
            <a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
            <span class="element-divider place-right"></span>
                <button class="element image-button image-left place-right">
                    Cedric Moudze
                    <img src=""/>
                </button>
            </nav>
            </nav>
        </ui:insert>
        </div>
        <br/><br/><br/><br/>
        <div class="grid">
        <div class="row">
            <div class="span4">
                <nav class="sidebar light">
    <ul style="margin-left: 10px;">
        <li class="title">Menu</li>
        <li class="stick bg-blue"><a href="#"><i class="icon-home"></i>Business</a></li>
        <li class="stick bg-emerald"><a href="#"><i class="icon-rocket"></i>Training</a></li>
        <li class="stick bg-red"><a href="./stagiaire.xhtml"><i class="icon-cog"></i>Trainees</a></li>
 
        <li class="stick bg-green"><a href="#"><i class="icon-github"></i>Coaches</a></li>
        <li class="stick bg-orange"><a href="#"><i class="icon-cloud"></i>Cities</a></li>
        <li class="stick bg-yellow">
            <a class="dropdown-toggle" href="#"><i class="icon-tree-view"></i>Internship Verification</a>
            <ul class="dropdown-menu" data-role="dropdown">
                <li><a href="">Specifications</a></li>
                <li><a href="">Operations</a></li>
                <li><a href="">Internship Status</a></li>
            </ul>
        </li>
        </ul>
</nav>
            </div>
            <div class="span10" style="border: 1px solid red;"> CENTRE</div>
 
            <div class="span3">
                <div class="notice">
                    <div class="fg-white">Notifications Here</div>
                </div>
            </div>
 
        <div>
                <nav class="navigation-bar fixed-bottom">
                <nav class="navigation-bar-content">
 
                <div class="element">
                    <div class="bottom-menu-wrapper">
                <ul class="horizontal-menu compact">
                    <li>2015 TEAM Luke IAI-Cameroun</li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Legal</a></li>
                    <li><a href="#">Advertise</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Feedback</a></li>
                </ul>
                    </div>
                </div>
                </nav>
                </nav>
 
        </div>
 
        <script src="./resources/js/jquery.min.js"></script>
        <script src="./resources/js/jquery.mousewheel.min.js"></script>
        <script src="./resources/js/jquery.widget.min.js"></script>
        <script src="./resources/js/metro.min.js"></script>
    </div>
    </div>
    </body>
 
</html>

stagiaire.html :

Code:

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
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                template="./index.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:u="http://xmlns.jcp.org/jsf/passthrough">>
 
    <ui:define name="top">
           <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="description" content=""/>
        <meta name="author" content="FalCon"/>
        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <h:outputStylesheet name="./css/metro-bootstrap.css" />
        <h:outputStylesheet name="./css/metro-bootstrap-responsive.css" />
        <h:outputStylesheet name="./css/iconFont.min.css" />
 
                <title>Welcome | InternShip Management 1.0</title>
    </h:head>
 
    <body class="metro">
 
        <div id="top">
        <ui:insert name="top">
            <nav class="navigation-bar fixed-top">
            <nav class="navigation-bar-content">
        <div class="element">
            <a class="element-menu" href="#"><span class="icon-box"></span>InternShip Management</a>
        </div>
 
            <span class="element-divider"></span>
            <a class="element brand" href="#"><span class="icon-spin"></span></a>
            <span class="element-divider"></span>
            <a class="element brand" href="#"><span class="icon-printer"></span></a>
            <span class="element-divider"></span>
 
        <div class="element input-element">
            <form>
                <div class="input-control text">
                    <input type="text" placeholder="Search..."></input>
                    <button class="btn-search"></button>
                </div>
            </form>
        </div>
 
        <div class="element place-right">
            <a class="dropdown-toggle" href="#">
                <span class="icon-cog"></span>
            </a>
            <ul class="dropdown-menu place-right" data-role="dropdown">
                <li><a href="#">My Profile</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Log Out</a></li>
            </ul>
        </div>
            <span class="element-divider place-right"></span>
            <a class="element place-right" href="#"><span class="icon-locked-2"></span></a>
            <span class="element-divider place-right"></span>
                <button class="element image-button image-left place-right">
                    Cedric Moudze
                    <img src=""/>
                </button>
            </nav>
            </nav>
        </ui:insert>
        </div>
        <br/><br/><br/><br/>
        <div class="grid">
        <div class="row">
            <div class="span4">
                <nav class="sidebar light">
    <ul style="margin-left: 10px;">
        <li class="title">Menu</li>
        <li class="stick bg-blue"><a href="#"><i class="icon-home"></i>Business</a></li>
        <li class="stick bg-emerald"><a href="#"><i class="icon-rocket"></i>Training</a></li>
        <li class="stick bg-red"><a href="./stagiaire.xhtml"><i class="icon-cog"></i>Trainees</a></li>
 
        <li class="stick bg-green"><a href="#"><i class="icon-github"></i>Coaches</a></li>
        <li class="stick bg-orange"><a href="#"><i class="icon-cloud"></i>Cities</a></li>
        <li class="stick bg-yellow">
            <a class="dropdown-toggle" href="#"><i class="icon-tree-view"></i>Internship Verification</a>
            <ul class="dropdown-menu" data-role="dropdown">
                <li><a href="">Specifications</a></li>
                <li><a href="">Operations</a></li>
                <li><a href="">Internship Status</a></li>
            </ul>
        </li>
        </ul>
</nav>
            </div>
            <div class="span10" style="border: 1px solid red;"> CENTRE</div>
 
            <div class="span3">
                <div class="notice">
                    <div class="fg-white">Notifications Here</div>
                </div>
            </div>
 
        <div>
                <nav class="navigation-bar fixed-bottom">
                <nav class="navigation-bar-content">
 
                <div class="element">
                    <div class="bottom-menu-wrapper">
                <ul class="horizontal-menu compact">
                    <li>2015 TEAM Luke IAI-Cameroun</li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Legal</a></li>
                    <li><a href="#">Advertise</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Feedback</a></li>
                </ul>
                    </div>
                </div>
                </nav>
                </nav>
 
        </div>
 
        <script src="./resources/js/jquery.min.js"></script>
        <script src="./resources/js/jquery.mousewheel.min.js"></script>
        <script src="./resources/js/jquery.widget.min.js"></script>
        <script src="./resources/js/metro.min.js"></script>
    </div>
    </div>
    </body>
    </ui:define>
 
</ui:composition>