人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: Discovery
●カテゴリ:ウェブ制作
✍キーワード:URL Web スタイルシート トップページ
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● hamtarozamurai
●2ポイント

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

の直前に

?@

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

はずしてたらごめんね。

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

◎質問者からの返答

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


2 ● sugerboy79
●23ポイント

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

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

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

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

◎質問者からの返答

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


3 ● kn1967
●23ポイント

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

◎質問者からの返答

ありがとうございます、


4 ● villain
●23ポイント
<b>トップページ</b>


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

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

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

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

◎質問者からの返答

ありがとうございます。

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

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

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

itemHead と itemTitle に誤りがある

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

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


5 ● ヨネちゃん
●31ポイント

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

<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

◎質問者からの返答

ありがとうございます、

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

--

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ