スタイルシート(WEB)についての質問です。

http://www.vpi.jp/modules/sections/
上記URL中央上部の「トップページ」が中央(middle)に来ません、原因と解決方法を教えて頂けませんでしょうか?よろしくお願いいたします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/05/15 03:06:02
  • 終了:2006/05/16 12:43:04

回答(5件)

id:hamtarozamurai No.1

hamtarozamurai回答回数107ベストアンサー獲得回数42006/05/15 03:18:11

ポイント2pt

ご質問の意図がいまいちわかりにくいですが,

の直前に

�@

というのが入ってて,これが「トップページ」を少し右に押し出してますけど。

はずしてたらごめんね。

http://www.vpi.jp/modules/sections/

id:Discovery

すみません、よくわかりませんでした。

2006/05/15 19:04:21
id:sugerboy79 No.2

sugerboy79回答回数14ベストアンサー獲得回数02006/05/15 06:22:27

ポイント23pt

http://www.vpi.jp/modules/sections/

トップページの文字があるdivタグのclassがitemTitleとなっていますが、CSSを見てみると、TEXT-ALIGN: left;となっています。

たぶんこれが原因ではないでしょうか?

ちなみにVERTICAL-ALIGNはmiddleになっていますが、これは縦方向への制御です。

id:Discovery

ご回答ありがとうございます、縦方向への制御を行いたいと考えていますが、「トップページ」(ピンク色)縦方向の中央に来てくれません、縦方向の上部に来てしまいます。

2006/05/15 11:09:21
id:kn1967 No.3

kn1967回答回数2915ベストアンサー獲得回数3012006/05/15 07:04:45

ポイント23pt

http://www.mozilla.gr.jp/standards/webtips0004.html

http://www.nishishi.com/blog/2006/02/centering_of_bo.html

FireFoxなどであればBODYタグのスタイルでセンタリングをするだけで良いのですが、IEのCSSは中途半端でバグだらけなのでDIVタグで全体を包んで、そのDIVでセンタリングする必要があります。

今回のページでは全体にテーブルを用いていますのでTABLEタグのスタイルにてtext-align: centerという手も使えますが、テーブルに頼らずCSSでレイアウトを行うことにチャレンジしてもよろしいでしょうね。

以下、CSSでレイアウトしてある例です。

http://www.jikojyouhou.jp/data1.html

http://www.jikojyouhou.jp/common.css

id:Discovery

ありがとうございます、

2006/05/15 19:11:53
id:villain No.4

villain回答回数174ベストアンサー獲得回数122006/05/15 15:18:44

ポイント23pt
<b>トップページ</b>


の部分が上下中央になっていないということですよね?

ソースを見るとこの辺りのdivの構造が複雑でよく分かりません。

どうやら、スタイルシートのitemHeadクラスとitemTitleクラスに

誤りがあるようなので見直してください。

id:Discovery

ありがとうございます。

このページはXOOPSが出力しているため、

ソースを変更することができず、

CSSでデザインを変更しています。

itemHead と itemTitle に誤りがある

と思って色々試したのですが、

結局、縦中央揃えをすることができませんでした。

2006/05/15 19:09:01
id:yoneto164 No.5

ヨネちゃん回答回数813ベストアンサー獲得回数942006/05/16 12:10:33

ポイント31pt

とりあえず背景指定とは別に要素を作ります。

<DIV class=itemHead><DIV class=itemTitle><DIV class=itemTitleText><B>トップページ</B></DIV></DIV></DIV>

として、スタイルシートに以下を加えます。

.itemTitleText {

padding-top: 5px;

}

このようにテキストのみをパッディングする方法ではいかがでしょうか。

http://msugai.fc2web.com/web/CSS/padding.html

id:Discovery

ありがとうございます、

この方法で試してみます。

--

みなさまご回答ありがとうございました。

2006/05/16 12:41:22

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません