1. 首頁
  2. 問答
  3. 如何控制對象的位置

如何控制對象的位置

2012-05-13 40 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有足夠的力量來提出另一種解決方案。 –

相關問題

 相關問題