CSS Pas pris en compte sur ma page JSF

**Gigic21** · 13/04/2015, 01h59

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 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
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 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
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>

**facilus68** · 21/04/2015, 14h44

Bonjour,

Dans stagiaire.xhtml, es ce normal qu'il n'y a pas le tag <html> ?

**JohannL** · 23/04/2015, 11h38

Bonjour,

De ce que je vois, tu te retrouves avec deux éléments <h:head> dans ton second fichier : celui du fichier index (via le template) et celui du fichier stagiaire (en insertion dans la partie "top", donc dans le body). Il faut que tu supprimes le <h:head> dans le fichier stagiaire, qui est redondant et mal placé.

Je te conseille de faire un troisième fichier, à part, pour contenir le template. Tu pourras y mettre un head standart et même quelques élément du body récurents.

Et aussi, évite d'utiliser un <ui:insert> dans un <ui:define> avec le même nom.

@facilus68 : C'est normal oui, il utilise un composition. Son fichier va repartir du fichier template indiqué (ici index.html) et va insérer les zones indiquées. C'est une bonne fonctionnalité de jsf pour mutualiser des fragments de pages.

CSS Pas pris en compte sur ma page JSF

JSF Java

Vue hybride

Discussions similaires

Partager

Partager