みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

吹き出しの位置に付いて

<style>
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:288px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #ffffff; color:#0208a8;}
</style>

上記のCSSで吹き出しを作ると、必ず右側に
吹き出しが表示されます。

中央(バーナーの真下)にソースを表示したいので
margin-leftの部分をセンターなどに変更したのですが
必ず右側に表示されます。

吹き出しを中央に表示するには
何処を変更したら良いでしょうか。

宜しくお願い致します。

投稿日時 - 2009-05-06 19:37:50

QNo.4936743

困ってます

質問者が選んだベストアンサー

#2です。

>ただ、スクロールすると下のバナーの・・・確認する方法はあるでしょうか?

申し訳ありません。よく分からないです。

スクロールすると<span>部分が消えてしまって見えないということでしょうか?
a:hoverとはマウスが乗った状態のことですので、質問者様のCSSを見る限りマウスを離せば消える使用と思いますが・・。

マウスを乗せたら表示&マウスを離しても表示状態のままにしたいのなら、無理にCSSを使わずJavaScriptなどを使い、
<a herf="URL" onmouseover="className='on'">テキスト<span>吹き出し</span></a>
などとマーキングしておき、CSSに
a span{display:none}
a.on span{dispaly:block;position:relative;top:**px;left:**px;}
などとしたほうが無難かと思います。

回答が的外れでしたらご容赦ください。

投稿日時 - 2009-05-08 00:00:45

お礼

font_color様

何度もありがとう御座います。

感謝感激です。

早々、試してみます。

ページは、縦に長く下まで複数の画像があるので
下の吹き出しが画面のはるか上に表示され
確認することが出来なくなっていました。

また、右側の吹き出しが画面から
はみ出し見えなくなり困っておりました。

この度は、本当にありがとう御座います。

投稿日時 - 2009-05-08 20:07:38

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

a.tooltip span {display:none;}
a.tooltip:hover span{
display:block;←変更
position:relative;←変更
top:**px;←※
left:**px;←※
width:288px;
background:#ffffff;
border:1px solid #ffffff;
color:#0208a8;
}
※の部分を調整してみてください。

投稿日時 - 2009-05-07 01:50:06

お礼

ありがとう御座います。

中央に表示できました。

ただ、スクロールすると下のバナーの吹き出しを
表現できないので、困りました。

スクロールしても、吹き出しを確認する方法は
あるでしょうか?

何度も申し訳ありませんが、よろしくお願いいたします。

投稿日時 - 2009-05-07 21:25:46

ANo.1

a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:288px;}

margin-leftをmargin-topに変えて値をいろいろ変更してみてください。
例:margin-top:10px;

投稿日時 - 2009-05-06 19:46:56

お礼

ありがとう御座います。

参考にいたします。

投稿日時 - 2009-05-07 21:20:44