Feuille de style sur XHTML

**farid69** · 02/03/2013, 15h44

Salut à tous,

Voilà j'ai appliqué des feuille de style à une page html et ça fonctionne.
J'ai pris la même feuille de style mais sur du XHTML cette fois çi aucun résultat.
J'avoue que je ne comprends pas trop dnas la mesure ou cela devrait fonctionner de la même manière.
Est-ce que quelqu'un à une idée?

Merci.

Le code de ma page

Code :

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
<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <title><ui:insert name="title">Default Title</ui:insert></title>
        <meta name="description" content=""/>
        <meta name="viewport" content="width=device-width"/>
        <link rel="stylesheet" type="text/css" media="screen,projection,print" href="css/bootstrap.min.css" />
        <style>
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>
        <link rel="stylesheet" type="text/css" media="screen,projection,print"  href="css/bootstrap-responsive.min.css"/> 
        <link rel="stylesheet" type="text/css" media="screen,projection,print" href="css/main.css"/>
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js" type="text/css"></script>
    </h:head>
 
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li><a class="brand" href="index.jsp">Aventix</a></li>
                            <li><a href="index.jps">Acceuil</a></li>
                            <li><a href="#about">À propos</a></li>
                            <li><a href="#contact">Contact</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Adhérent <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="adhesion.jsp">Entreprise</a></li>
                                    <li><a href="#">Commerçant</a></li>
                                    <li><a href="http://localhost:1980/aventix/faces/employes/List.xhtml">Employés</a></li>
                                    <li class="divider"></li>
                                    <li class="nav-header">Géolocalisation</li>
                                    <li><a href="geolocalisation.jsp">Géolocalisation automatique</a></li>
                                    <li><a href="#">Géolocalisation</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tests<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="saisiemp.jsp">lolo</a></li>
                                    <li><a href="testbeanaje.jsp">titi</a></li>
                                    <li><a href="testbeanjhe.jsp">tata</a></li>
                                    <li><a href="testbeanfdi.jsp">tutu</a></li>
                                </ul>
                            </li>
                        </ul>
 
                        <form method="post" action="loginCheck">
                            <div class="navbar-form pull-right" >
 
                                <a><input class="span2" type="email" placeholder="Email" name="email_aut" id="email_aut" required="true"/></a>
                                <a><input class="span2" type="password" placeholder="Password" name="password_aut" id="password_aut" required="true"/></a>
                                <a><input class="btn" value="Connecter" type="submit"/></a>
                            </div>
                         </form>                       
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="hero-unit">
                <ui:insert name="title">Default Title</ui:insert>
            </div>
             <p>
                <ui:insert name="body">Default Body</ui:insert>
            </p>
        </div>
    </body>
 
</html>

**rodolphebrd** · 02/03/2013, 16h14

Je ne connaissais pas cette syntaxe!

Je verrais plutôt votre document bâti sur cette architecture là:

Code html :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
</head>
 
<body>
</body>
</html>

**farid69** · 02/03/2013, 16h58

Merci pour la réponse.
En fait c'est une page JSF d’où les h: ect....
Mais dans l'esprit cela reste du HTML et ma feuille de style devrait être prise en compte.
En fait le code ci-dessus est un template que j'applique ensuite aux autres pages comme ci-dessous :

Code :

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
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
 
    <ui:composition template="/template.xhtml" class="span4">
        <ui:define name="title">
            <h:outputText value="#{bundle.ListEmployesTitle}"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <h:form styleClass="jsfcrud_list_form">
                <h:panelGroup id="messagePanel" layout="block">
                    <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
                </h:panelGroup>
                <h:outputText escape="false" value="#{bundle.ListEmployesEmpty}" rendered="#{employesController.items.rowCount == 0}"/>
                <h:panelGroup rendered="#{employesController.items.rowCount > 0}">
                    <h:outputText value="#{employesController.pagination.pageFirstItem + 1}..#{employesController.pagination.pageLastItem + 1}/#{employesController.pagination.itemsCount}"/>&nbsp;
                    <h:commandLink action="#{employesController.previous}" value="#{bundle.Previous} #{employesController.pagination.pageSize}" rendered="#{employesController.pagination.hasPreviousPage}"/>&nbsp;
                    <h:commandLink action="#{employesController.next}" value="#{bundle.Next} #{employesController.pagination.pageSize}" rendered="#{employesController.pagination.hasNextPage}"/>&nbsp;
                    <h:dataTable value="#{employesController.items}" var="item" border="0" cellpadding="2" cellspacing="0" rowClasses="jsfcrud_odd_row,jsfcrud_even_row" rules="all" style="border:solid 1px">
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="#{bundle.ListEmployesTitle_numEmp}"/>
                            </f:facet>
                            <h:outputText value="#{item.numEmp}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="#{bundle.ListEmployesTitle_numCarte}"/>
                            </f:facet>
                            <h:outputText value="#{item.numCarte}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="#{bundle.ListEmployesTitle_nom}"/>
                            </f:facet>
                            <h:outputText value="#{item.nom}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="#{bundle.ListEmployesTitle_prenom}"/>
                            </f:facet>
                            <h:outputText value="#{item.prenom}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="#{bundle.ListEmployesTitle_adresse}"/>
                            </f:facet>
                            <h:outputText value="#{item.adresse}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="#{bundle.ListEmployesTitle_cp}"/>
                            </f:facet>
                            <h:outputText value="#{item.cp}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="#{bundle.ListEmployesTitle_ville}"/>
                            </f:facet>
                            <h:outputText value="#{item.ville}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="#{bundle.ListEmployesTitle_statut}"/>
                            </f:facet>
                            <h:outputText value="#{item.statut}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="#{bundle.ListEmployesTitle_solde}"/>
                            </f:facet>
                            <h:outputText value="#{item.solde}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="#{bundle.ListEmployesTitle_email}"/>
                            </f:facet>
                            <h:outputText value="#{item.email}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="#{bundle.ListEmployesTitle_numEnt}"/>
                            </f:facet>
                            <h:outputText value="#{item.numEnt}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="&nbsp;"/>
                            </f:facet>
                            <h:commandLink action="#{employesController.prepareView}" value="#{bundle.ListEmployesViewLink}"/>
                            <h:outputText value=" "/>
                            <h:commandLink action="#{employesController.prepareEdit}" value="#{bundle.ListEmployesEditLink}"/>
                            <h:outputText value=" "/>
                            <h:commandLink action="#{employesController.destroy}" value="#{bundle.ListEmployesDestroyLink}"/>
                        </h:column>
                    </h:dataTable>
                </h:panelGroup>
                <br />
                <h:commandLink action="#{employesController.prepareCreate}" value="#{bundle.ListEmployesCreateLink}"/>
                <br />
                <br />
                <h:link outcome="/index" value="#{bundle.ListEmployesIndexLink}"/>
            </h:form>
        </ui:define>
    </ui:composition>
 
</html>

ps : désolé pour le code à l'avenir je le mettrai systématiquement dans les balises code

**Auteur** · 03/03/2013, 22h03

bonsoir,

que vient faire le DOCTYPE dans ce document XML ?

**Muchos** · 04/03/2013, 19h13

Envoyé par Auteur

que vient faire le DOCTYPE dans ce document XML ?

Ouhlah! J'étais comme @rodolphebrd : je doutais, mais ne connaissant pas xhtml 1.1, je n'ai rien dit.

Si c'est du xml, alors on peut le styliser avec xsl.

**farid69** · 05/03/2013, 14h09

Envoyé par Auteur

bonsoir,

que vient faire le DOCTYPE dans ce document XML ?

Salut,

c'est généré automatiquement par Netbeans, du coup je l'ai laissé.

**Auteur** · 05/03/2013, 15h57

Je viens de revoir les tutos XML et on peut déclarer un doctype effectivement :
http://gilles-chagnon.developpez.com...?page=dtd#LI-B
http://zvon.developpez.com/tutoriels/dtd/

Cependant, je ne pense pas le dtd xhtml1-transitional.dtd soit le mieux adapté au document XML que tu construis.

Pour en revenir à ta CSS, peut-être as-tu une erreur dans les chemins :

Code :

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

1
2
3
4
5
        <link rel="stylesheet" type="text/css" media="screen,projection,print" href="css/bootstrap.min.css" />
 
        <link rel="stylesheet" type="text/css" media="screen,projection,print"  href="css/bootstrap-responsive.min.css"/> 
        <link rel="stylesheet" type="text/css" media="screen,projection,print" href="css/main.css"/>
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js" type="text/css"></script>

Feuille de style sur XHTML

HTML

Vue hybride

Discussions similaires

Partager

Partager