2013-05-09 60 views
0

我正在使用渲染插件製作PDF文件。爲此,我正在渲染插件。我嘗試爲我的模板添加一個css文件,但它不起作用。我有點混淆,我應該如何導入css文件在我的gsp頁面。css在渲染插件時無法正常工作當我嘗試渲染pdf文件

這是我的模板。

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

<div> 
<link rel="stylesheet" href="${grailsApplication.config.grails.serverURL}/${resource(dir:'css',file:'main.css')}" /> 
<div id="wapper" class="wapper"> 
    <div id="title"> 
     <div class="titleLeft"></div> 

     <div class="titleContent"> 
     </div> 

     <div class="titleRight"></div> 
    </div> 

    <div id="profilePic"></div> 

    <div id="mainContent"> 
     <div id="leftContent"> 
      // some code here 

     </div> 

     <div id="rightContent"> 
       <h2>Contact</h2> 

       <div class="content"> 
        // some code here. 
       </div> 

      <div class="refrence"> 
       <div class="blockHeader">References</div> 

       // some code here 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

這是我的css文件。

@charset "utf-8"; 


@font-face { 
font-family: mixLight; 
src: url('/images/templateImages/template8/TheMix Light Plain.ttf') 
} 

@font-face { 
font-family: mixBold; 
src: url('/images/templateImages/template8/TheMixBold-Plain.ttf'); 
} 

@font-face { 
font-family: mixSemiBold; 
src: url('/images/templateImages/template8/TheMixSemiBold-Plain.ttf'); 
} 

body, div, p, h1, h2, h3, h4 { 
padding: 0; 
margin: 0; 

} 

body { 
font-family: mixLight; 
color: #636466; 
} 

.wapper { 
position: relative; 
padding: 40px; 
width: 85%; 
background-color: #FFFFFF; 
margin-top: 100px; 
margin-left: auto; 
margin-right: auto; 
-moz-box-shadow: 0 0 7px #d6d6d6; 
-webkit-box-shadow: 0 0 7px #d6d6d6; 
box-shadow: 0 0 7px #d6d6d6; 
border-top-style: 1; 
border-right-style: 1; 
border-bottom-style: 1; 
border-left-style: 1; 

border-top-color: #000000; 
border-right-color: #000000; 
border-bottom-color: #000000; 
border-left-color: #000000; 
margin-bottom: 60px; 

} 

.topBorder { 
background-repeat: repeat-x; 
background-position: left top; 
} 

#title { 

color: #FFFFFF; 
font-family: mixLight; 
font-size: 35px; 
height: 142px; 
left: 70px; 
padding-left: 43px; 
margin-top: -8px; 
position: absolute; 
top: -23px; 
width: auto; 
background-repeat: none; 
} 

#title .titleLeft { 
width: auto; 
float: left; 
} 

#title .titleRight { 
width: auto; 
float: left; 
} 

#title .titleContent { 
width: auto; 
float: left; 
background-image: url(/images/templateImages/template8/title_bg.gif); 
background-repeat: x; 
height: 82px; 
padding-top: 60px; 
} 

#leftContent { 
width: 65%; 
float: left; 
} 

#rightContent { 
float: right; 
padding-left: 5%; 
width: 30%; 
} 

.clearAll { 
clear: both; 
} 

.blockHeader { 
color: #119a9c; 
background-color: #a5d9d0; 
padding: 5px 5px 5px 25px; 

font-family: mixBold; 
font-size: 25px; 

} 

#mainContent { 
margin-top: 100px; 
} 

.rightContentColor { 
background-color: #d1ece7; 
} 

.blockContent { 
margin-top: 20px; 
margin-left: 15px; 
} 

.block { 
margin-top: 20px; 

} 

.data { 
margin-top: 5px; 
} 

#profilePic { 
float: right; 
margin-right: -72px; 
width: 187px; 
height: 232px; 
left: 790px; 
top: 40px; 
background-image: url(/images/templateImages/template8/profile_pic.gif); 
} 

.blockContent .blockSubHeading .leftHeading { 
float: left; 
width: 50%; 
} 

.blockContent .blockSubHeading .dateTime { 
float: right; 
width: 30%; 
} 

.blockSubHeading { 
margin-top: 25px; 
} 

h2 { 
color: #009296; 
} 

.contactInfo { 
width: 80%; 
margin-left: 10px; 
} 

.contactInfo .content { 
margin-left: 10px; 
} 

.refrence { 
width: 92%; 
margin-top: 73px; 
} 

.refrence .content { 
background-color: #d1ece7; 
padding: 8%; 
} 

.dateTime { 
padding-right: 20px; 
} 

.dateTime h4 { 
text-align: right; 
} 

我試圖添加風格標籤在凝視模板。但我犯了錯誤。 標籤在這裏。

<style type="text/css"> 
@import url("../../css/templateCss/template8.css"); 

p { 
color: #f00; 
} 
</style> 

但它給出了這個錯誤。

org.xml.sax.SAXParseException, The markup in the document following the root element must be well-formed. 

我沒有得到我錯的地方。任何人都可以幫助我解決這個錯誤,並請提供一個正在運行的試題,說明如何在模板中添加css。

回答

1

嘗試使用剛剛${resource(dir:'css',file:'main.css')},這是不夠的:

<link rel="stylesheet" href="${resource(dir:'css', file:'main.css')}" />