1. ホーム
  2. 質問と答え
  3. オブジェクトの位置を制御するには

オブジェクトの位置を制御するには

2012-05-13 8 views
0

Webページでテンプレートを使用する方法を学習しようとしています。私がstackoverflowで見つけた何かのおかげで、私は基本を行っている。今私は書式設定を何らかの制御したい。私は素敵に見える例を見つけたので、何かを学ぶためにそれを使うと思った。問題が明らかになりますので、私は2つの画像を紹介します：オブジェクトの位置を制御するには

original my attempt

は、私は本当に、フォーム自体を気にしないでください。それは単に何かを学ぶための例として役立ちます。私が制御したいことがいくつかあります： 1）オリジナルでは会社名がjpeg画像に関してうまく配置されていることに注意してください。私の場合、それは左に固執しています。 2）オリジナルでは、Firefoxのウィンドウを展開すると、フォームは中央にとどまり、両側に空白があります。私の場合、Primefacesコントロールはウィンドウ全体を占め、JPEG画像の一部を切り取ってしまうほど高すぎます。

オリジナルのstyle.cssを使用していたので、別のアイテムをコピーして貼り付けようとしましたが、私が探しているコントロールは何もありませんでした。私はすべての内部の定義に入れてみましたが、彼らが作った。これは

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

元のフォームの始まりです

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

：私はどんな違いがあるstyle.cssで唯一のものを紹介します変わりはない。私はXHTMLではるかに簡単私のバージョン最後に

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

を持っているテンプレートの主なポイントは動作しているようだようにするため、私はテンプレートに

<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を上書きする必要があります。

私はあなたが

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

で試すことができますので、私は!importantが必要であることをわからないんだけど、基本的に使用すると、コンポーネントに固定幅を与えるために持って、あなたはPanelGridを使用していることを推測します自動リサイズ

EDITからそれを停止する：

を使用すると、すべての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-を使用してもしてみてください'margin-left'の代わりに' left'を入力してください – StepTNT

+0

これは修正するために重要ではありません。私はそれが、私以外の誰もがやる方法を知っている何かだと思った。元の例では、イメージに関してテキストをオフセットすることを知るのに十分なほど巧妙です。 margin-leftとpadding-leftの両方がページの端に対して計算されます。どういうわけか、ページはJPEG画像のサイズを知り、すべてがその値に設定されます。これが私以外の誰もが知っているものでなければ、私はそれを忘れることができます。プライムフェイスには十分なパワーがあり、別の解決策が思い付きます。 –

関連する問題

 関連する問題