センタリング

0   名前： あさひ ： 2006/08/16（水） 21:14  ［URL］  ID:4g.5x74y
http://utai.sakura.ne.jp/
上記URL、現行のテンプレートの右側にもう１カラム増やし、
そこにアマゾンのアフィリエイト画像を並べたいと思っております。
試行錯誤を重ね、今のところ以下のような状態です。
http://utai.sakura.ne.jp/sb.cgi?tid=2

１．見ていただければ分かるとおり、
「Item」という文字はセンタリングされているのですが、
アマゾンの画像はカラムからはみ出しています。
最終的には背景色をbodyのものと同じにするつもりなので、
特に問題が無いといえば無いのですが、どうにも気持ちが悪いです。
どこの記述をどのように修正すれば改善されるでしょうか。

２．現行のテンプレートのようにカラムをセンタリングしたく、
text-align: center;
をbodyに記述しているのですが、思うようになっていません。
どこに記述すればセンタリングされるでしょうか。

以上２点、ご教授いただければと思います。
よろしくお願いいたします。
1   名前： カヅサツ ◆ThCi95HEzw ： 2006/08/16（水） 21:14  ［URL］  ID:f0UXxXRM
このページが参考になると思います。
http://www.geocities.jp/multi_column/
2   名前： あさひ ： 2006/08/16（水） 21:14  ID:4g.5x74y
返信ありがとうございます。
１のほうはなんとか解決し、思うように表示させることができました。
しかし２の、カラム全体のセンタリングはいまだ実現できていません。
ご提示くださったサイトを見ても、
bodyにtext-align: center;を記述するとなっており、
そのようにしているのですが、なぜセンタリングされないのでしょうか。

ちなみに、ページ構成は
<div id="inbox">
 <div id="wrap">
  <div id="main"></div>
  <div id="navi1"></div>
 </div>
 <div id="navi2">
</div>
となっており、（汚くてお恥ずかしいですが）スタイルシートは
body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  color:#000;
  background:#e4eff5;
  font-size:12px;
  line-height:160%;
  text-align: center;
}
#inbox {
  width: 780px; /* #wrap + #navi2 */
  background:#e4eff5;
}
#wrap {
  float:left;
  width:700px; /* #navi1 + #main +20 */
  background:#e4eff5;
  text-align: left;
}
#main {
  float:right;
  width:500px;
  background:#fff;
  margin:0;
  padding:0;
}
#navi1 { 
  float:left;
  width:180px;
  line-height:160%;
  padding:20px 0 0 0;
  margin:0;
  color:#ccc;
  background:#000;
}
#navi2 {
  float:right;
  width:80px;
  background:#e4eff5;
  padding:0;
  margin:0;
  line-height:180%;
  text-align: center;
  overflow:hidden;
}

となっております。
3   名前： あさひ ： 2006/08/16（水） 21:14  ID:4g.5x74y
IEで確認したところ、センタリングされていました。
Opera、Firefoxでは相変わらずセンタリングされていません。
まさかそいった仕様だということはないと思うのですが、
やはり私の記述がどこかおかしいのでしょうか。

＃IEでみるのとOpera、Firefoxでみるのとでは
フォントサイズが違ったのですが、こちらは仕様でしょうか。
それともこれも私の記述ミスでしょうか……。
4   名前： カヅサツ ◆ThCi95HEzw ： 2006/08/16（水） 21:14  ［URL］  ID:f0UXxXRM
現象が確認できるウェブページの URL がわかれば検証できるかもしれません。
5   名前： あさひ ： 2006/08/16（水） 21:14  ID:4g.5x74y
http://utai.sakura.ne.jp/sb.cgi?tid=2
現象が起こっているのは上記URLになります。
どうぞよろしくお願いいたします。
6   名前： カヅサツ ◆ThCi95HEzw ： 2006/08/16（水） 21:14  ［URL］  ID:O5hEMlpW

text-align は、ブロックの内容テキストの位置を指定するプロパティで、ブロックそのものの位置に影響を与えません。
それは margin プロパティの仕事です。

text-align が、子要素のブロックの位置を変えてしまうのは、Win IE のバグです。

<!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" xml:lang="ja" lang="ja">
<title>サンプル</title>
<style type="">
#test1{
	width: 780px;
	background:#e4eff5;
	text-align: center;
}
#test2{
	width: 780px;
	background:#e4eff5;
	margin-left: auto;
	margin-right: auto;
}
#test3{
	width: 780px;
	background:#e4eff5;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
</style>
<head>
<body>
<div id="test1">
	<p>このブロックそのものはセンタリングされませんが、内容テキストはセンタリングされます。</p>
</div>
<div id="test2">
	<p>このブロックそのものはセンタリングされますが、内容テキストはセンタリングされません。</p>
</div>
<div id="test3">
	<p>このブロックそのものも内容テキストもセンタリングされます。</p>
</div>
</body>
</html>


私が先に提示した参考サイト内の http://www.geocities.jp/multi_column/practice/3column1.html#fixed にもサンプルがあります。
7   名前： Z ◆XTzyosZXcL ： 2006/08/16（水） 21:14  ID:7S9Va0oj
>>5
　CSS云々をおっしゃる前に、まずそのCGIで「妥当なHTML(XHTML)文書を出力させる」方が先ではないでしょうか。

　Another HTML-lint gateway(http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html)で>>5の参照先で出力されている文書の文法をチェックすると、

1.XHTML1.0Strict文書型宣言をしている文書であるのに、
2.XHTML1.0Strict文書型では使えない要素や属性を使っていて、
3.空要素が閉じられていない
4.BODY要素内やblockquote要素などに直接テキストが記述されている、など

と色々な問題を含んでいます。

XHTMLの基本）
http://www.kanzaki.com/docs/html/xhtml1.html

HTMLの基本）
http://www.kanzaki.com/works/2001/pub/wsd01.html
8   名前： あさひ ： 2006/08/16（水） 21:14  ID:4g.5x74y
カヅサツさま
返信ありがとうございます。
おかげさまで、思う通りに表示させることができました。
text-alignは「text」とついているように、
テキストにのみ適応されるプロパティだったのですね。
勉強になりました。

Zさま
ご提示くださったサイトで実際チェックし、直しをしました。
CGIのほうは全く勉強しておらず、
どう直したらtargetを吐き出さないようにできるか等
今の私では手の回らない部分もありますので、
これから勉強するなり調べるなりして直していこうと思います。
ありがとうございました。

＃ブラウザによるフォントサイズの違いは11pxを使用しないことで回避しました。
原因はわからずじまいですが……。
9   名前： Z ◆XTzyosZXcL ： 2006/08/16（水） 21:14  ID:7S9Va0oj
>＃ブラウザによるフォントサイズの違いは11pxを使用しないことで回避しました。原因はわからずじまいですが……。
　原因はちゃんと分かりますよ(^^;

http://www.fromdfj.net/html/fontsize.html　から引用：

「Macの標準dpiは72dpi、Windowscのは96dpiです。つまり、pxで指定すると、Macでは、Windowsで見るよりも、フォントサイズが4/3倍になってしまうのです（これは、あくまでOSだけを考えた場合です」）。
「ptを使えばOSレベルでは、サイズの統一を図ることができました。しかし、まだディスプレイがあります。上の話は、あくまでOSの解像度と画面の解像度が一致している場合の話です。現実には、ディスプレイの解像度=OSの解像度とはなっていることは稀であるため、pxを使うよりもptを使った指定のほうが表示サイズは流動的になります。」

（実際は前後の文章で色々と説明がありますので、参照先の文書を全部読んでください。）
一覧へ戻る