为什么我的JSF CSS html和body标签没有被应用

时间:2014-01-17 08:42:04

标签: css jsf primefaces

这是我的登录信息:

  html{
    /* fallback */
            background-color: #84AFB8;
    /* Safari 4-5, Chrome 1-9 */
            background: -webkit-gradient(radial, center center, 0, center center, 0, from(#84AFB8), to(#b1d2e1));
    /* Safari 5.1, Chrome 10+ */
            background: -webkit-radial-gradient(circle, #84AFB8, #b1d2e1);
    /* Firefox 3.6+ */
            background: -moz-radial-gradient(circle, #84AFB8, #b1d2e1);
    /* IE 10 */
            background: -ms-radial-gradient(circle, #84AFB8, #b1d2e1);
    /* Opera 11.10+ */
            background: -o-linear-gradient(right, #84AFB8, #b1d2e1);
}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: auto auto;
    background-image: url("#{resource['images/activpos_login_background.png']}");
/*  background-color:#b0c4de; */
}

我的xhtml代码中的登录页面:

<!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"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets" >

<h:head>
    <h:outputStylesheet library="css" name="login.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--    <link rel="shortcut icon" type="image/x-icon" href="http://www.picpanda.com/images/wx4tneinur7acq4drlen.ico" /> -->
</h:head>
<h:body>
<!-- <ui:composition template="/pages/protected/templates/master.xhtml"> -->

    <div id="mainContainer">
        <div id="main">
            <div id="logo" align="center">
                <h:graphicImage name="images/activpos_logo.png" />
            </div>
            <div id="login" align="center">
                <h:graphicImage name="images/activpos_login_body.png" />

                <h:form id="loginForm" styleClass="text">

                    <p:focus context="loginForm" />
                    <p:growl showDetail="false" life="3000" />

                    <h:outputLabel value="Please Login" />

                    <h:panelGrid columns="1">
                        <br />
                        <br />
<!--                        <h:outputLabel value="#{bundle.loginUserName}" /> -->
                        <p:inputText value="#{loginMB.username}" label="Username"
                            id="username" required="true" style="width: 240px;">
                            <f:validateLength minimum="1" />

                            <p:watermark for="username" value="Username" />  
                        </p:inputText>

                        <br />
<!--                        <h:outputLabel value="#{bundle.loginPassword}" /> -->
                        <p:password value="#{loginMB.password}" label="Password"
                            id="senha" required="true" autocomplete="off"
                            style="width: 240px;">
                            <f:validateLength minimum="1" />
                            <p:watermark for="senha" value="Password" /> 
                        </p:password>

                        <br />
                        <p:commandButton action="#{loginMB.login}" value="login" styleClass="loginImage" />
<!--                            <h:graphicImage name="images/login.png" /> -->
<!--                        </p:commandButton> -->

                    </h:panelGrid>
                        <br />
                        <br />
                        <p:commandLink action="#{loginMB.displayForgotPassword}"
                            style="color:black;" ajax="false" immediate="true">
                            <h:outputText value="Forgot password?" style="color:black;font-size:12px;" />
                        </p:commandLink>

                </h:form>
<!--                <h:outputText value="Version 2.4.2" styleClass="version" /> -->

                </div>
            </div>
        </div>
    <div id="footerContainer">Copyright © 2014. All rights reserved.</div>
<!--    </ui:composition> -->
</h:body>
</html>

结果是页面css html并且未加载body标签。

但是当我点击忘记密码链接时,css html和body标签按预期加载。

public void displayForgotPassword() {
        displayInfoMessageToUser("Please contact support@blah.com");
    }

我几乎花了一天的时间来看看它是什么原因造成的。这是我的头号问题。

并且最后一个小问题是我的登录按钮中的css背景图像虽然我跟着Displaying command button with image only并且My own primefaces p:commanButton icon

提前致谢。

0 个答案:

没有答案