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

CSSでツールチップを実装しています。
フォームの説明用に使っているのですが、マウスオーバーした時に画像のように正確に表示されません。
(赤枠がツールチップ部分です)

フォームのCSSはdlタグを使っています。
dl{overflow: hidden;position: relative;border: 1px solid #CCCCCC;}
dt{float: left;width: 100px;background-color: #eeeeee;padding: 5px;}
dd{float: left;width: 100px;margin: 0px;padding: 5px;}


dlの「overflow: hidden;position: relative;」を削除すればツールチップの全てが表示されるので、
これが原因だと思います。しかし、dl・dt・ddタグで横並びしたいので削除せずに解決策を探しています。

CSSツールチップは以下で説明しているソースを利用しています。
http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/


わかりづらいかもしれませんが、解決方法をご存じの方は教えて下さい。
※IE7、Firefox3.5.7で同じ現象になります。
※z-indexを指定しても変わりませんでした。

1265854740
●拡大する

●質問者: k27w
●カテゴリ:ウェブ制作
✍キーワード:background-color border CSS DD DL
○ 状態 :終了
└ 回答数 : 1/3件

▽最新の回答へ

1 ● kaz
●60ポイント

dt / dd の float 指定により、border: 1px solid #CCCCCC; が一本線になってしまうため

overflow: hidden を使って回避しているのだと思いますが、

「overflow: hidden」は「領域からはみ出たものは表示しない」という指定なので、

dl に指定した場合、dl の領域からはみ出すものは表示されません。


HTML / CSS のコード全体が無い&レイアウトの詳細が分からないため

一般的な改善策しか提示することはできませんが、解決法としては以下の2パターンが考えられます。



dt に上下 padding がある(上下に間隔を設けたい)ことから、前者になると思います。

(inline 要素には上下の padding を設定しても確保されないため)

clearfix は応用範囲の広い tips なので、これを機会に覚えると良いと思います。

※「clearfix」で検索をすると多くの解説ページが出てきます。

◎質問者からの返答

ありがとうございます。「overflow: hidden」に関する認識不足でした。大変参考になりました。

関連質問


●質問をもっと探す●



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