IEでのポップアップ画像の位置「fixed」
- IEでポップアップ画像の位置を固定する方法
- HTMLとCSSだけでは難しいが、他の方法も試してみる
- firefoxやgoogleChromeでは対応しているが、IE8ではうまくいかない
- ベストアンサー
IEでのポップアップ画像の位置「fixed」
オンマウスでポップアップする画像を、左上に固定したいのですが、 HTMLとCSSだけでは難しいのでしょうか？ HTMLとCSS以外の知識はほとんどありませんので、なんとかこの2つでとも思っているのですが… firefox・googleChromeでは下記のCSSで左上でポップアップ画像が固定されています。 IE8で確認したところ、どうしても画像の下に出てしまいます。 .thumbnail{ z-index: 0; font-size:12px; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ position: absolute; background-color: #FFFFFF; padding: 5px; left: 10px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span{ visibility: visible; position: fixed; top: 10px; left: 10px; } ご教授いただければと思います。
- rabbit-kimura
- お礼率91% (102/112)
- CSS
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
.thumbnail:hover span を以下のようにしてみてはどうでしょうか。 .thumbnail:hover span{ visibility: visible; position: fixed; _position:absolute; top: 10px; _top:expression(eval(document.documentElement.scrollTop+10)+'px'); left: 10px; } IEだけは、_position:absolute;でabsoluteとし、 _top:expression(eval(document.documentElement.scrollTop+10)+'px'); で上部から10ピクセルに指定しています。 ただし、_top:以下はCSS内にJavaScriptを記載しているので、 JavaScriptをOFFにしている方には、適応されません。
その他の回答 (4)
- mikemike7
- ベストアンサー率87% (97/111)
IE8でもposition:fixedは無効かと思っていました。 それにIE6でもbody直下にポップアップ要素を置かないとどちらにしても駄目ですね。 今の仕様で実装するなら、 私ではJavaScriptでポップアップさせるくらいしか思い付きません。 ただ、以下のページも見つけました。 うまくいくかわかりませんが、参考までに。 http://d.hatena.ne.jp/mujin/20100220/p1
お礼
ありがとうございました!! 今作っていたコードで、新たに、他ブラウザでポップアップが出たり出なかったりという現象もわかって、今回のご回答いただいたスクリプトを交えながら今一度最初から組んでみようと思いました。 まったく知らなかった分野だったので、かなり参考になりました。 ご丁寧にありがとうございました!!
- tracer
- ベストアンサー率41% (255/621)
#2の追記です。 ちなみに、IE6を対象に、かつtransitionモードで記述する場合は、#1さんの回答がベストアンサーかと思います。 その場合は、固定要素のマークアップだけを移動(body直下などに)すれば、期待する挙動になるかと思います。
お礼
ありがとうございました!! 今作っていたコードで、新たに、他ブラウザでポップアップが出たり出なかったりという現象もわかって、今回のご回答いただいたスクリプトを交えながら今一度最初から組んでみようと思いました。 まったく知らなかった分野だったので、かなり参考になりました。 ご丁寧にありがとうございました!!
- tracer
- ベストアンサー率41% (255/621)
No.1さんが回答されているのは主にIE6に対しての策です。 IE8で問題が起きているとしたら、解決策は異なるはずです。 IE各バージョンのposition:fixed対応状況は、 IE6 : そもそもfixedの機能がない。→No.1さんのようにjavascriptで代替する。 IE7 : 半分対応、ただし他のブラウザとは少し異なる。 IE8 : 半分対応、ただし他のブラウザとは少し異なる。 IE9 : たぶん他のブラウザと同じ(未確認) 記憶だけで書いていますが、概ねこんな感じかと思います。 問題となるIE8の「半分対応、ただし他のブラウザとは少し異なる」の箇所。 私が認識しているのは以下の2点です。 半分対応な点 strictモードでないとposition:fixedは有効にならない。 他のブラウザとは少し異なる点 通常fixedは絶対配置なので、対象要素をどこにマークアップしてもbody、いわゆるブラウザの描画領域を基準に配置されますが、IE7、8の場合は、absoluteと同様に、直近のstaic以外の値が設定されるpositionをもつ親要素を起点に配置されます。 以下に例を示します。 例1:div1が基準 <body> <div id="1" style="position:relative"> <div id="2"> <span style="position:fixed">123</span> </div> </div> </body> 例2:div2が基準 <body> <div id="1"> <div id="2" style="position:relative"> <span style="position:fixed">123</span> </div> </div> </body> 例3:bodyが基準(bodyまでposition指定要素がないため) <body> <div id="1"> <div id="2"> <span style="position:fixed">123</span> </div> </div> </body> 従って、質問者さんの課題は、「他のブラウザとは少し異なる点」ではないかと想像します。 ブラウザに対して要素を固定したいのであれば、単純にbody直下に固定要素を置くだけでOKかと思います。 論理構造を保ったまま配置したいのであれば、bodyから連なる親要素のpositionを操作してみてください。 IE6を対象に入れないのであれば、質問者さんが期待されるようにHTML/CSSだけの問題かと思います。
お礼
>>IE各バージョンのposition:fixed対応状況 すごい分かりやすくご説明いただき、大変感謝しております。 もう一度、全体を見直しながら、いただいたご回答をもとに組んでみたいと思います!!
- mikemike7
- ベストアンサー率87% (97/111)
HTML部分も記載できますか？
補足
すみません、ありがとうございます!! ポップアップのとこだけで大丈夫でしょうか。 <a class=thumbnail href=http://www.yahoo.co.jp/ target=_blank > <div class=thumbnail > <img src=http://k.yimg.jp/images/top/sp/logo.gif class=imgsize border=0 /> <span> <img src=http://k.yimg.jp/images/top/sp/logo.gif > </span> </div> </a>
関連するQ&A
- 非リンク画像にポップアップ、ブラウザでの違い
質問、失礼いたします。 htmlとCSSで、画像のポップアップを作っています。 ソースは下記の通りです ■HTML部分 <a class="thumbnail" href="xxx"> <img src="xxx" border="0" /> <span><img src="ooo" /></span> </a> ■CSS部分 .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span{ visibility: visible; top: 0; left: 60px; } ■サンプル掲載サイト http://akifumih.seesaa.net/article/111153756.html このコードを使い、HTML部分のリンクを外し <span class="thumbnail"> <img src="ｘｘｘ" /> <span><img src="ooo" /> </span> </span> として、Chromeで確認したら問題なかったのですが、 IEの場合、ポップアップをしなくなっていました。 この2つのブラウザで見た場合、どうして異なるのかが不明で ご存じの方がいらっしゃいましたら、ご教授お願い致します。
- ベストアンサー
- CSS
- テキストにマウスオーバーしたら任意の場所に画像表示させる方法で、
テキストにマウスオーバーしたら任意の場所に画像表示させる方法で、 画像と一緒に文字を表記させたいのですが、添付画像のように文字が 折り返ししてしまい、一列表示出来ません。 記述的には以下の通りです。 >スタイルシート部 /*Credits: Dynamic Drive CSS Library */ /*URL: ******/style/ */ .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: #FFFFFF; padding: 5px; left: -1000px; border: 1px solid gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 160px; left: 450px; } >HTML部 <a class="thumbnail" href="" title="">ドゥカティGP9 No.27 CASEY STONER<span><img src="57197.jpg" /><br />ドゥカティGP9 No.27 CASEY STONER</span></a> コピーして応用している為、問題点が分かりません。 教えて下さい。
- 締切済み
- HTML
- クリッカブルマップ上のポップアップ画像
初心者です。よろしくお願いします。 クリッカブルマップ上にあるリンク先にポインタを合わせると、ポップアップ画像が表示される仕組みを作りたいと思います。 いろいろなサイトで調べるうちに、テキストにポインタを合わせた時にポップアップ画像が表示されるコードを見つけたので、そのコードを自分なりに作り変えて試してみたのですが、うまく表示されません。 現在のhtmlコード、およびcssのコードは下記のとおりです。 <ul> <img src="img/top_map.jpg" alt="テスト画像" width="880" height="720" border="0" usemap="#Map" /> <map name="Map"><span class="test"><area shape="rect" coords="363,70,379,86" href="リンク先URL" target="_blank" /> </span> </map> </ul> ul area { position: relative; } ul area span { display: block; visibility: hidden; width: 150px; height: 150px; position: absolute; top: -100px; left: 50px; } ul area:hover { background: #FFFFFF; } ul area:hover span { visibility: visible; text-indent: -10000px; } span.yahoo { background: url(ポップアップ画像URL); } 他のサイトで、areaにはhoverという記述ができないという書き込みもありましたが、何とか実現できないものかと思っています。 どなたか、教えていただけないでしょうか？
- 締切済み
- HTML
- ＦｉｒｅＦｏｘでＴｏｏｌｔｉｐの位置がおかしい
ＣＳＳ初心者で、いくつかのサイトを参考にＴｏｏltip表示を試したのですが、ＦｉｒｅＦｏｘでだけ表示位置が変わってしまいます。Ｃｈｒｏｍｅでは問題なかったのですが、ターゲットがＦｉｒeFoxで困っています。 どのような方法で直せばよいのでしょうか。 ＣＳＳは以下の通りです .toolTip:hover{ background: #ffffff; text-decoration: none; } .toolTip span{ display: none; border: solid 2px #999; background-color: #eee; color: #666; padding: 5px; font-size: 12px; margin-left: 8px; line-height: 1.6; } a.toolTip:hover span{ display: inline; position: absolute; background-color: #fff7ee; border: 1px solid #cccccc; color: #000000; width: 150px; ｝ ＨＴＭＬの一部ですが <a href="#" class="toolTip"><span>介護記録の内容の表示と印刷ができます</span><img src="b-print.jpg" width="211" height="144"></a> としています
- ベストアンサー
- CSS
- 吹き出しの位置に付いて
<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> 上記のＣＳＳで吹き出しを作ると、必ず右側に 吹き出しが表示されます。 中央（バーナーの真下）にソースを表示したいので margin-leftの部分をセンターなどに変更したのですが 必ず右側に表示されます。 吹き出しを中央に表示するには 何処を変更したら良いでしょうか。 宜しくお願い致します。
- ベストアンサー
- HTML
- １番右側の画像のhoverだけ位置をずらしたい
テーブル内の画像にcssでマウスオーバーで拡大画像が出るように設定しましたが、 一番右の列をマウスオーバーすると画面からその拡大画像が消えてしまうため、 この列のみもう少し左側に画像が出るようにしたいのですが、どう記述したらよいのか分かりません。 http://okwave.jp/qa/q6343605.html ↑この回答がかなり核心をついているのですが、私の記述で言うところの隣接セレクタってどこなのか分かりません。。 現在設定しているのは下記のコードです。 どなたかご教授下さい。 【html】 <tr><td class="type1" td colspan="2" scope="col" align="center" valign="middle"><a href="#" id="hover"><img src="●●.jpg" width="100" height="100" alt="ec"/></a></td> </a></td> </tr> 【css】 td.type1 { height: 185px; width: 185px; background-color:#FFF; } a#hover img{ border:none; padding:5px; width:100px; height:100px; border: 1px solid #CCC; } a#hover{ display:block; width:100px; height:100px; } a#hover:hover img{ width:300px; height:300px; position:absolute; padding:5px; border: 1px solid #CCC; background-color:#FFF; } ちなみにtdが４つ入ります。（画像は横に４つ入り、一番右側というのは４番目になります）
- 締切済み
- CSS
- スタイルシートのpositionでフッターを位置指定するには
こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか？ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }
- 締切済み
- その他([技術者向] コンピューター)
- css position:fixed でヘッダとフッタを固定したい
画像のようなページを作りたいと思っています。 使用するのはテキストエディタで、htmlとcssのみです。 cssで、 #header{ background-color: #cc99ff; position:fixed; top : 0; left : 0; width:100%; height:55px; z-index:3; } #inner {background-color: #cc9900; margin: 0em 3em 3em 3em; padding: 1em; width:90%; height:90%; z-index:1; border-top:solid 2px #004427; border-bottom:solid 2px #004427;} のように書いても、IE、firefoxともに固定が無視されます。 これ以外にも、少々書き方を変えたり色々してみたのですが、固定はされても位置が崩れる（ほとんどが、ヘッダが下がって来ます。）等、上手く行きません。 原因も分からず、解決策が見つかりません。 良い方法等、お教え下さい。 よろしくお願い致します。
- ベストアンサー
- HTML
- 階層型ドロップダウンメニューのサブ項目CSSの背景色の指定について
メニューバーにサブ項目を作り、hover,active,時のbackground-colorを指定したいのですが、うまくいきません。 ◆http://haradesignroom.jp/0909menu_bar/0909renewal/kaisoumenu/index.html Web制作関連の雑誌に出ていたフォーマットを元に上記のメニューバーを作りました。 第一階層には背景画像を配し、hover,activeのときに別画像を設定しました。 ６項目のうち、サブメニューがある（商品情報など）にマウスをおくと、グレーの背景色のサブメニューが表示されるまでは良いのですが、サブメニュー各項目にマウスを置くと、第一階層のhoverの画像が表示されてしまいます。またサブメニューの下欄の項目が表示されません。 サブメニューがhover、active状態のときに、さらに別色（＃FFCCCC）で指定したいのですが、CSSの書き方がわかりません。 どなたかご教示お願いいたします。 【CSS】 * { margin: 0; padding: 0; } body { font-family: Helvetica, Sans-Serif; font-size: 12px; padding-bottom: 15px; } #page-wrap { width: 800px; margin-top: 25px; margin-right: auto; margin-bottom: 25px; margin-left: auto; } a { text-decoration: none; } ul { list-style: none; background-repeat: repeat-x; } p { margin: 15px 0; } /* LEVEL ONE*/ ul.dropdown { position: relative; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: none; border-right-style: none; border-left-style: none; } ul.dropdown li { font-weight: bold; float: left; background-image: url(../images/menu_bk.jpg); height: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCC99; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } ul.dropdown a:hover { color: #993333; background-image: url(../images/menu_on_bk.jpg); } ul.dropdown a:active { color: #993333; background-image: url(../images/menu_on_bk.jpg); } ul.dropdown li a { display: block; color: #666666; border-right-style: none; border-left-style: none; padding-top: 20px; padding-right: 30px; padding-bottom: 4px; padding-left: 30px; border-top-style: none; border-bottom-style: none; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li:first-child a { border-left: none; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover { color: #666666; position: relative; background-color: #D2D2D2; } ul.dropdown li.hover a { color: #993333; } /* LEVEL TWO */ ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; } ul.dropdown ul li { font-weight: normal; color: #FFFFFF; border-bottom: 1px solid #ccc; float: none; background-repeat: repeat-x; background-image: url(../images/transparent02.jpg); float:none; } /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; color: #FFFFFF; } /* LEVEL THREE*/ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; color: #FFFFFF; } ◆ 長々申し訳ありませんが、どなたかよろしく お願いいたします。◆
- 締切済み
- インターネットビジネス
- CSS backgroundが反映されません
CSS初心者です。 CSSレイアウトで問題にぶつかりました。 下記CSSをIE6で見るとbodyに書いた 「background-image:url(images/flower.png); 」が反映されません。 IE10では反映されました。 いったい何故でしょうか。。。 調べてみたのですがいまいち分かりませんでした。 よろしくお願いいたします。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ * { margin:0; padding:0; } body { background-image:url(images/flower.png); background-repeat:no-repeat; background-position:bottom; background-attachment:fixed; background: rgb(#00000); color: rgb(76, 76, 76); } body{ text-align:center; } div#container { background-image:url(images/sora.jpg); background-repeat:no-repeat; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000; } div#container{ width: 770px; margin: 0 auto; text-align: left; border: 3px solid rgb(228, 225, 219); } .photo{ margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute; } .photo2{ margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute; } p { line-height: 2em; font-size: 0.8em; } .p1{ font-weight: bold; letter-spacing: 0.1em; } .h1{ text-align: center; } h1 span { display:none; } h2 span { display:none; } h3 { line-height: 1.2em; padding-top: 2.4em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } h3 { background-image:url(images/h3.png); background-repeat:no-repeat; background-position:0px 35px; padding-right: 40px; padding-left: 30px; } h2 { line-height: 1.3em; padding-top: 1em; padding-bottom: 1em; font-size: 1em; font-weight: bold; } a{ color:#0000ff; font-style:normal; text-decoration:underline; } a:link { color: rgb(90, 120, 255); font-style:normal; text-decoration:underline; } a:visited { color: rgb(165, 188, 255); text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } acronym { border-bottom-color: currentColor; border-bottom-width: medium; border-bottom-style: none; } #intro { padding: 0px 79px 0px 86px; } #participation p { padding-right: 40px; padding-left: 10px; } #intro { padding-top: 50px; } #preamble p { padding-right: 40px; padding-left: 15px; } #explanation p { padding-right: 40px; padding-left: 15px; } #preamble { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #explanation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #participation { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #benefits { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #requirements { padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge; } #quickSummary p{ padding-right: 40px; padding-left: 10px; } #footer { text-align: center; line-height: 1.5em; padding-top: 10px; padding-bottom: 40px; font-size: 0.9em; } #footer a:link { color: rgb(133, 126, 112); } #footer a:visited { color: rgb(133, 126, 112); } #footer a:hover { color: rgb(133, 126, 112); } #footer a:active { color: rgb(133, 126, 112); }
- ベストアンサー
- CSS
お礼
ご回答ありがとうございました!!
補足
早々のご回答ありがとうございます!! JavaScriptが要なのですかっ!! ご回答いただいた内容で試したところ、左上に固定はされるのですが、 ブラウザの左上基準でなくどうもページの左上となり、スクロールして下がった箇所で見ると、 上部が隠れて、画像がついてこない（？）感じになってしまいます。 このような現象の対策はご存じないでしょうか。