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

<div class=”t_menu”>
<a href=””>ああああ</a> | <a href=””>ああああ</a></a>
</div>

.t_menu {
padding-left:10px;
width:790px;
height:24px;
color:#F8F7F5;
font-weight:bold;
background-image:url(”../common/c_title_top.gif”);
background-position:right bottom;
background-repeat:no-repeat;
}

t_menuに高さ24pxの背景画像を設定しています。ポジション指定あり。
このt_menuの中にテキストリンクを入れているのですが、
この時にテキストリンクの位置を下げたいのです。
この仕様で可能なのでしょうか?
不可能であれば可能な対処法をご教授くださいませ。
基本的なことかと思いますがよろしくお願い致します。

●質問者: gloglo
●カテゴリ:コンピュータ
✍キーワード:background-image background-position background-repeat COLOR Common
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● mady
●18ポイント

http://www.tohoho-web.com/js/index2.htm

索引

padding-left:10px;

padding:10px 0px 0px 10px;

とかにしたらどうでしょう?

◎質問者からの返答

ご回答ありがとうございます。

そういうことではないですね。

説明足らずで申し訳ありません。

height:24pxのボックスのbottomにテキストを落としたいのです。(画像の一番下部分に合わせたい)画像のheightが24pxです。


2 ● battan
●18ポイント

http://dummy.co.jp/

URLはダミーです。

あれこれ試してみたのですが私の知識・経験では1つのclassにて対応が出来ませんでした。

CSSについてそんなに詳しいわけではないのでご希望に添えないかもしれませんが…

別途以下のCSSを追加して

.text_down {

vertical-align: -3px;

}


<font cless=”text_down”><a href=””>ああああ</a> | <a href=””>ああああ</a></font>

とすれば文字の位置が下がります。

下げる量は”-3px”の数値で調整することになります。

◎質問者からの返答

確かにできますが各ブラウザでの数値の間隔が違のでieを元に指定するかff,nnを元にするかでどちらかは諦めるしかないですね。

ありがとうございました。

他に方法はないものでしょうか。。。


3 ● soyuz11
●17ポイント

http://cssbug.at.infoseek.co.jp/detail/winie/b069.html

Internet Explorer (Windows) CSSバグリスト

vertical-alignはクラス名などが対象では

うまく反映されないバグがあるようです。

(strictも互換モードも)


.t_menu{

width:790px;

height:24px;

padding:12px 0 0 10px;

color:#F8F7F5;

font-weight:bold;

vertical-align:bottom;

background:gainsboro url(xxxxx.gif) right bottom no-repeat;

}


つまり、有効な解決策がないので、

左上からpaddingで文字を押し込めた方がてっとり早そうですね。IEもFireFoxもまだまだ正しいCSSを反映しているとは言い難いようです。

◎質問者からの返答

ありがとうございます。

そうですね、ブラウザ毎の解釈が違うのはどうにかしてほしいです。


4 ● スーパーよしお
●17ポイント

http://acacia.fc2web.com/hatena/

URLはダミーです。

<div class=”t_menu”>

<div class=”aaaa”>

<a href=””>ああああ</a>|<a href=””>ああああ</a>

</div>

</div>


.t_menu{

position:relative;

}

.aaaa{

position:absolute;

bottom:0;

}


このようなpositon指定で出来るかもしれません。

※div病注意

関連質問


●質問をもっと探す●



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