css - 如何控制对象的位置

我正在尝试学习如何在网页中使用模板。多亏了我在 stackoverflow 上找到的东西，我有了基础知识。现在我想要对格式进行一些控制。我找到了一个看起来不错的例子，所以我想我会用它来学习一些东西。我会展示 2 张图片，这样问题就很清楚了:

我真的不关心表单本身。它只是作为学习一些东西的例子。我想控制几件事: 1) 请注意，公司名称相对于 jpeg 图像的位置很好。在我的例子中，它卡在左边。 2) 在原来的情况下，如果我展开 Firefox 窗口，表单将保持居中并且两边都有空白。在我的例子中，Primefaces 控件占据了整个窗口，而且它们太高了，切断了部分 jpeg 图像。

我看到原始文件使用了 style.css，所以我尝试复制和粘贴不同的元素，但没有任何东西给我想要的控制权。我将展示 style.css 中唯一有区别的东西:

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>

我尝试输入所有内部定义，但它们没有任何区别。我的版本更简单

<!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">

因此，模板化的主要目的似乎是有效的，只是我需要对其进行更多控制。很抱歉发了这么长的消息，但我想我需要全部来解释这个问题。

编辑: 我不知道如何添加文件本身，所以我将其拼写为代码

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;
}

最佳答案

您的 brackground 具有 center 属性，这就是为什么您的 Logo 位于中心而文本不在其上的原因。

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>

然后，要停止 primefaces 的组件自动调整大小，您必须覆盖默认的 css。

我猜你正在使用 PanelGrid，所以你可以试试

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

我不确定 !important 是必需的，但基本上你必须给组件一个固定的宽度以阻止它自动调整大小

编辑:

如果你想将你的样式应用到每个 p:panelGrid 组件，你应该考虑覆盖整个 css 类。

看看这里就知道每个primefaces组件的css类名了:

http://primefaces.googlecode.com/files/primefaces_users_guide_3_2.pdf

关于css - 如何控制对象的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10570764/

css - 如何控制对象的位置

上一篇：CSS 元素覆盖/重叠问题

下一篇：html - 按比例(动态但没有固定图像尺寸)将完整图像调整为 div 容器，而不拉伸(stretch)到容器的每一侧