1. 首页
  2. 问答
  3. 如何控制对象的位置

如何控制对象的位置

2012-05-13 43 views
0

我正在尝试学习如何在Web页面中使用模板。感谢我在stackoverflow上找到的东西，我有基础知识。现在我想对格式化进行一些控制。我发现了一个看起来不错的例子，所以我想我会用它来学习一些东西。我将展示2幅图像，所以这个问题很清楚：如何控制对象的位置

original my attempt

我真的不关心窗体本身。它仅仅是一个学习东西的例子。有几件事情我想控制： 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; 
}

来源

2012-05-13 Ilan Tal

回答

1

你brackground有center属性，这就是为什么你有你中心的标志和文字不在其上。

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

来源

2012-05-13 09:54:21 StepTNT

+0

我没想到对齐文本为中心的，但你可以看到，在原来它不居中。不知何故，作者将它放置在jpeg左侧的给定偏移处。我一直无法弄清楚他是如何做到的。你对我使用的PanelGrid是正确的。我会尝试与之并行玩，我会看看你的参考，看看我可以从中学到什么。 –

+0

如果你想让它像例子中，请从标识的CSS的'center'属性，像这样的东西尝试： ''

播放与'5％'价值，并尝试使用也'padding- left'而不是'margin-left' – StepTNT

+0

这不是修复的关键。我只是认为这是除了我以外的每个人都知道如何去做的事情。在原始示例中，知道如何相对于图像偏移文本是足够聪明的。边缘左侧和填充左侧均相对于页面边缘进行计算。不知何故，该页面知道jpeg图像的大小，并且一切都设置为该值。如果这不是每个人都知道的，那么我可以把它忘掉。在primefaces有足够的力量来提出另一种解决方案。 –

相关问题

 相关问题