2013-11-20 27 views
0

我正在設計我的jsf頁面,但是當我運行它時瀏覽器(Chrome)上沒有顯示任何內容。
我使用Eclipse的開普勒,glassfish4和primefaces
這裏的HTML代碼jsf頁面上的css樣式在服務器上無法正確顯示

<div class="box"> 
     <p:graphicImage url="images/usericon.png" id="usericon" 
      alt="utilisateur IsetN"></p:graphicImage> 
     <br></br> 
     <p:inputText placeholder="Login" required="true"></p:inputText> 
     <br></br> 
     <p:password value="#{passwordController.password}" 
      promptLabel="#{msg['password.promptLabel']}" 
      weakLabel="#{msg['password.weakLabel']}" 
      goodLabel="#{msg['password.goodLabel']}" 
      strongLabel="#{msg['password.strongLabel']}" required="true" 
      placeholder="Mot de passe" /> 
     <br></br> 
     <p:commandButton value="Connexion" /> 
     <br></br> 
     <h:link url="#">Aide?</h:link><br></br> 
     </div> 

,這就是風格

 .box{ 
     height:100px; 
      width:100px; 
     /*border-radius*/ 
     -webkit-border-radius:15px; 
      -moz-border-radius:15px; 
      border-radius:15px; 
      background-color:#cdcdcd; 
      /*box-shadow*/ 
      -webkit-box-shadow:0 8px 6px -6px #efefef; 
      -moz-box-shadow:0 8px 6px -6px #efefef; 
      box-shadow:0 8px 6px -6px #efefef; 
      margin:50% 50% 50% 50%; 
       } 

注:該組件沒有風格的作品非常好。

+1

*「瀏覽器上沒有顯示任何內容」*這似乎與CSS無關。右鍵單擊瀏覽器中的頁面,執行*查看源代碼*。你看到了什麼?您是否看到原始的JSF源代碼或其生成的HTML輸出? – BalusC

回答

0

工作對我來說:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html lang="en" 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" 
    xmlns:p="http://primefaces.org/ui" 
    xmlns:fn="http://java.sun.com/jsp/jstl/functions"> 

<h:head> 

    <style type="text/css"> 
.box { 
    height: 100px; 
    width: 100px; 
    /*border-radius*/ 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
    background-color: #cdcdcd; 
    /*box-shadow*/ 
    -webkit-box-shadow: 0 8px 6px -6px #efefef; 
    -moz-box-shadow: 0 8px 6px -6px #efefef; 
    box-shadow: 0 8px 6px -6px #efefef; 
    margin: 50% 50% 50% 50%; 
} 
</style> 


</h:head> 

<h:body> 

    <div class="box"> 
     <p:inputText placeholder="Login" required="true" value="#"></p:inputText> 
    </div> 

</h:body> 
</html> 

當我跑到你的CSS,我發現, 「保證金:50%50%50%50%;」把你的灰色盒子放在屏幕中間,但我必須滾動才能看到它!我知道這很愚蠢,但你確定你的組件不只是在主滾動區域之外顯示嗎?

相關問題