- 締切済み
position:relative とカーサーについて
初めましてして質問します。 http://ywphotography.net flashのスライドショーと半透明なpng画像をposition:relativeで重ねています。メニューバーの上にもposition:relativeでリンクを置いています。しかし、リンクをマウスオーバーしても通常の様にカーサーがポインタに変わりません。直接cssでcursor:pointerと指定しても変わりません。でもposition:staticに戻すとポインタに変わってくれました。 これを回避する方法はありますか。解決方法が分かる方いらっしゃいましたら宜しくお願いします。
- tecboi91
- お礼率0% (0/2)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
cursorはカーソルと読みます。 Flashはブラウザが直接表示しているのではなく、ブラウザがFlash Playerを呼び出してFlash Playerに表示などの制御を行わせています。 このためスタイルシートをいじっても問題は解決しません。
- tenderfeel
- ベストアンサー率56% (215/379)
z-indexを重なり順通りに設定してみてください。
関連するQ&A
- CSS position: relativeについて
a:hover{ position:relative; top:2px; right:2px; } このような記述をCSSにしています。 ネスケ7.1で見ると 1.バナーにカーソルを合わせると上半分の画像が消えてしまう。 2.リンクしている部分にカーソルを合わせると画面上部と右側にGoogle AdSense広告の残像？のようなものが見える。 という二点の不具合が見られるのですが、改善方法はありありますか？ IEではこの問題は起きません。 また、position: relativeの記述をCSSから外すと1.2.の問題共にネスケ7.1でも起こりません。 解決法がなければposition: relativeを外そうと思いますが、出来れば記述したままで解決したいのでよろしくお願いします。
- ベストアンサー
- HTML
- CSS position: relativeについて
CSS定義のposition: relativeを使うと、マウスがリンクに重なると指定したpointまたはpixelに上下左右に動きますね。そこで、教えて欲しいのは、ある特定のリンク部分は動かないようにしたいのですが、記述次第で出来るのでしょうか？ 今、制作中のHPはタブを使っているような感じのものを作っています、そのタブのリンク画像のところはマウスが重なっても動かないようにしたいので、ご存知の方がおりましたら、よろしくお願いします。
- ベストアンサー
- HTML
- IEで表示されてしまう余白をなくしたい
ブログポータルのテンプレをカスタマイズしたことがあるレベルの私ですが、今回初めてHPを作っています。 トップページに、jQueryでスライドショーを設置しているのですが、IEで確認したところ、そのスライドショーの上下に、不要な余白ができてしまいます。 スライドショーが参照しているCSSに原因があるんだろうということは、なんとなく分かるのですが、解決方法がわかりません。 スライドショーのCSSですが、オリジナルは以下です。 position:relative; が影響し、上下のcontents（menuやheader）に重なってしまうため、各数値を変更しました。 ------------------ @charset "utf-8"; /*crossFader*/ .crossfader{ position:relative; height:340px; } .crossfader img{ position:absolute; top:0; left:0; z-index:8; opacity:0; cursor:pointer; } .crossfader .active{ z-index:10; opacity:1.0; } .crossfader .last-active{ z-index:9; } ------------------ ソースを見てもらったほうが確実と思いますので、URL記載します。 ほかにも、HTMLの不備などありましたらご指摘下さい。よろしくお願いいたします。 http://miyauchi-babymomcare.com/
- ベストアンサー
- CSS
- CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- ベストアンサー
- HTML
- XHTML1.1でposition:relative指定したdivの挙動
XHTML1.1で、widthとheightをpx指定したdiv（divA）の中に、position:relative;を指定したdiv（divB）を配置した場合、 divAよりdivBの幅が広くなると、divBの内容がdivAの外側にはみ出して表示されてしまいますよね。 これを回避する方法はないのでしょうか。 以下簡単ですがサンプルです。 ----- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #divA { width: 200px; height: 200px; border: 1px solid #000; overflow: scroll; } .divB { position:relative; } </style> </head> <body> <div id="divA"> <div class="divB"> ************************************************************************************************************<br /> </div> </div> </body> </html>
- ベストアンサー
- CSS
- aタグ 中央寄せ
こんにちは aタグのの内容を上下左右の中央に寄せたいのですが、 どのようにすればよいでしょうか？ html-------------- <div class="specialEdition"> <a href="#">LINK</a> </div> css--------------- #leftcolumn .specialEdition { position:relative; width:180px; height:100px; background:url(images/left01.png) no-repeat; cursor:pointer;} #leftcolumn .specialEdition a{ display:block; width:100%; height:100%; position:absolute; left:0; top:0;}
- 締切済み
- CSS
- positionについて下記の認識で正しいでしょう
positionについて下記の認識で正しいでしょうか？ ・relativeは動かしたい要素自体にpositionプロパティをつける。親要素にpositionプロパティはいらない。 { position: relative; top:100px; left:10px } ・absolute; 絶対。 親要素の背景 { width: 100%; position: relative; background: url(../img01.jpg) no-repeat left top; } 子要素の動かしたい要素 .box.box02 p{ position: absolute; left: 0; top: 0; } ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ・absoluteは、親要素も何も関係なしにブラウザ上の上から何PX左から何PXと指定して、要素を配置でできる。 ただし例外として、 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。 親ボックスにpositionプロパティのstatic（初期値）以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（個人的に単独で使う事はほぼないです） ・relativeは、親要素から、何PX左から何PXと指定して、要素を配置でできる 補足また、まとめて指定する方法はマージンのようにないのでしょうか？
- ベストアンサー
- CSS
- 【CSS】positionの親子関係について
あるボックスを親として、そこにコンテンツを配置したいと思っています。 flaot は使わず、posiotion で位置を指定する想定で、下記のスクリプトを書きました。 （該当箇所以外の部分は省きます） << CSS >> #container { position: relative; } #main { position: absolute; top: 10px; } #side { position: absolute; top: 10px; right: 10px; } << HTML >> <div id="container"> <p><img src="container.png" width="700" height="400"></p> <div id="contents"> <p><img src="main.png" width="550" height="650" id="main"></p> <p><img src="side.png" width="100" height="650" id="side"></p> </div> </div> これを実行すると、main は container に合わせて移動がされる（親子関係になっている）のですが、side のみ、ウィンドウサイズに合わせて移動をしてしまいます。 relative と absolute で親子関係を作る、という考え方自体は合っていると思うのですが、何か法則など（親子関係は一対一でなければならない等）あるのでしょうか。 CSSの勉強を始めたばかりのため、お詳しい方にご解説をお願いしたいです。。
- ベストアンサー
- CSS
- 「position:absolute」のIEのバグへの対処方法
CSS #navbar { position: absolute; z-index: 1 } HTML <div id="navbar"> 略 </div> <div id="contents"> 略 </div> CSSとJavascriptを使って、プルダウンメニューを作ったのですが、IE7でうまく動かない為ネット検索したところ、CSSの「position:absolute;」に対して、「"absoluteした要素が消える"というIEのバグ?」の記事に出会いました。 このため「position:relative;」としてみたのですが．． メニューの下のコンテンツがプルダウンメニューのプルダウンされる大きさの分だけ下に下がって空間が空いてしまい、メニューバーの下にコンテンツがすぐ在ってその上にプルダウンするメニューが重なる、という表示ができなくなってしまいました。 なにかよい方法はありますでしょうか。
- ベストアンサー
- HTML
- GallerifficというjQueryはIE7で
GallerifficというjQueryを使ってスライドショーを設置しています。 http://www.twospy.com/galleriffic/ IE7よりも古いバージョンで見ると、レイアウトがぐちゃぐちゃに崩れてしまいます。 このjQueryはIE7では使えないのでしょうか？ いろいろ調べていると英語の情報で、「div.slideshow img」にposition: absolute;やposition: relative;を追加しろと出てきますが、レイアウトが崩れるのはjQueryの問題ではなくCSSの問題なのでしょうか？ 詳しい方教えていただけると幸いです。
- ベストアンサー
- JavaScript
補足
z-indexでも試してみましたが無理でした。 どうやらFLASHが下にあるのが原因の様です。リンクをフラッシュ上でない所に移すとちゃんとポインタに変わります。