Question

我正在学习如何使用网页上的模板。由于我发现的停滞不前,我有基础。现在,我想对形式安排进行一些控制。我发现了一个看不起的事例,因此我认为我会利用它学习一些东西。我有2幅图像,这样,问题就很明显:

I don t really care about the form itself. It just serves as an example to learn something. There are a couple of things I would like to control over: 1) Notice in the original that the Company Name is placed nicely with respect to the jpeg image. In my case it is stuck to the left. 2) In the original if I expand the Firefox window the form stays centered and there is white space on both sides. In my case the Primefaces controls take the whole window and they are too high, cutting off part of the jpeg image.

我看到了原用风格.cs,因此,我试图复制和复制不同的物品,但我看不到控制着Im。我只举出作风的故事:

body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}

这是原形式的开始

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Xhtml18</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
    <div id="header">
        <div id="logo">
            <h1><a href="#">Company <span>Name</span></a></h1>
            <p>Nice Slogan Goes Here</p>
        </div>
        <div id="menu">
            <ul>
                <li class="current_page_item"><a href="#">Homepage</a></li>
                <li><a href="#">ABOUT US</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">SUPPORT</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div>
</div>

I tried putting in all the inner definitions, but they made no difference. I have my version much simpler

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Master template</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</h:head>
<h:body>
<div id="logo">
    <h1><a href="#">Company <span>Name</span></a></h1>
    <p>Nice Slogan Goes Here</p>
</div>
<ui:insert name="AreaOne">Default text</ui:insert>
</h:body>
</html>

最后,在我的xhtml中,我提出了关键的步骤,使我能够做一些行动。

<h:body>
<ui:composition template="master.xhtml">
    <ui:define name="AreaOne">

So that the major point of templating seems to be working, just I need some more control over it. Sorry for the long message but I think I need it all to explain the problem.

EDIT: I don t know how to add a file per se, so I ll spell it out as code

body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}

h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 2.8em;
}

h3 {
font-size: 1.6em;
}

p, ul, ol {
margin-top: 0;
line-height: 180%;
}

ul, ol {
}

a {
text-decoration: none;
color: #419725;
}

a:hover {
}

#wrapper {
margin: 0 auto;
padding: 0;
}

/* Header */

#header-wrapper {
height: 234px;


}

#header {
width: 950px;
margin: 0 auto;
padding: 0px 0px 0px 30px;
}

/* Logo */

#logo {
float: left;
width: 500px;
margin: 0px;
padding: 30px 0px 0px 60px;
color: #f7f7f7;

}

#logo h1, #logo p {
}

#logo h1 {
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
font-size: 3.8em;
background: redc;
}

#logo h1 span {
color: #efc527;
}

#logo p {
margin: 0;
padding: 0px 0px 0px 0px;
font-size: 16px;
color: #fff;
} 

#logo a {
border: none;
background: none;
text-decoration: none;
color: #f7f7f7;
}

/* Search */

#search {
float: left;
width: 280px;
height: 40px;
padding: 0px;
}

#search form {
height: 40px;
margin: 0;
padding: 0px 0 0 10px;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #DEDEDE;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}

#search-submit {
width: 50px;
height: 22px;
border: none;
background: #e4e4e4;
color: #171d21;
}

/* Menu */

#menu {
float: right;
width: 950px;
height: 50px;
margin: 0 auto;
padding: 0;
}

#menu ul {
float: left;
margin: 0;
padding: 74px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
}

#menu a {
display: block;
margin-right: 1px;
padding: 16px 20px 15px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #fff;
border: none;
}

#menu a:hover, #menu .current_page_item a {
background: #131618;
text-decoration: none;
color: #FFFFFF;
}

#menu .current_page_item a {
}

/* Page */

#page {
width: 990px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
background: url(images/img03.jpg) repeat-y left top;
}

#page-bgtop {
padding: 40px 0px 20px 0px;
background: url(images/img02.jpg) no-repeat left top;
}
/* Content */

#content {
float: left;
width: 720px;
padding: 0px 0px 0px 0px;
}

.post {
margin-bottom: 40px;
border-bottom: 1px dotted #E7E2DC;
margin-right: 10px;
}

.post .title {
height: 41px;
padding: 7px 0px 0px 30px;
letter-spacing: -.5px;
}

.post .title a {
border: none;
color: #000;
 }

.post .meta {
margin-bottom: 30px;
padding: 0px 30px 0px 30px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
font-style: italic;
}

.post .meta .date {
float: left;
}

.post .meta .posted {
float: right;
}

.post .meta a {
}

.post .entry {
padding: 0px 30px 20px 30px;
padding-bottom: 20px;
text-align: justify;
}

.links {
padding-top: 20px;
font-size: 12px;
font-weight: bold;
}

/* Sidebar */

#sidebar {
float: right;
width: 240px;
margin: 0px;
padding: 0px 20px 0px 10px;
color: #fff;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
margin: 0;
padding: 0;
}

#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}

#sidebar li li {
line-height: 35px;
border-bottom: 1px dotted #E7E2DC;
margin: 0px 30px;
border-left: none;
}

#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}

#sidebar li li a {
padding: 0px 0px 0px 15px;
}

#sidebar h2 {
height: 38px;
padding-left: 30px;
letter-spacing: -.5px;
font-size: 1.8em;
color: #fff;
}

#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}

#sidebar a {
border: none;
color: #efc527;
}

#sidebar a:hover {
text-decoration: underline;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
padding: 20px;
}

#calendar table {
width: 100%;
}

#calendar tbody td {
text-align: center;
}

#calendar #next {
text-align: right;
}

/* Footer */

#footer {
height: 50px;
margin: 0 auto;
padding: 0px 0 30px 0;
font-family: Arial, Helvetica, sans-serif;
border-top: 5px solid #4ac221;
width: 990px;
background: #262626;
}

#footer p {
margin: 0;
padding-top: 40px;
line-height: normal;
font-size: 9px;
text-transform: uppercase;
text-align: center;
color: #fff;
}

#footer a {
color: #fff;
}

Answer 1

页: 1

body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}

您可以删除<代码>center属性,或者你可以通过做类似的事情来改变案文(例如!)

<div align="center"><h1><a href="#">Company <span>Name</span></a></h1></div>

然后,为了阻止你的主言部分实现自动化,你必须推翻缺省。

我猜想你重新利用小组,以便你能够尝试。

<p:panelGrid columns="2" style="width: 200px !important">....</p:panelGrid>

我不相信需要<条码>! 进口,但基本上,你必须给部件固定的宽度,以阻止其实现自动化。

EDIT:

如果你想对每一条<代码>p:panelGrid部分适用你的风格,你就应考虑超越整个类别。

这里仅看一看每个主要部分的类别名称:

rel=“nofollow”>http://primefaces.googlecode.com/files/primefaces_users_guide_3_2.pdf

友情链接