- 締切済み
背景画像を固定表示でその画像にリンクを…
自身のウェブサイトの画面右下に画像を表示させて、 なおかつその画像にリンクを貼りたいのですが、 ｈｔｍｌやｃｓｓのスキルは並みの者なので、どうかご助力をお願いします！ イメージとしては、 ttp://www.rakuten.co.jp/e-goods/ や ttp://www.designwalker.com/ の右側にある画像リンクです。 こちら2つのサイト様のソースを拝見して、 作用している部分を抽出して自分なりに作ってみたのですがうまくいきませんでした。 IEでうまく表示されなかったのです。 他ブラウザではちゃんと右側に出て、スクロールしても画像が固定されるのですが、 IEだけ普通に画像が表示されているだけの状態（左寄せに表示されていて、スクロールしても固定表示されていない）になってしまいます。 2つめに挙げたサイト様はJavaScriptを使用されているっぽい（？）のですが、 できればJavaScript無しで表示させたいです。 IE以外のブラウザではうまく表示されていたので、ちょっと悔しいです。。 解決方法がお分かりになる方、ご意見をいただけるととても助かります。 どうぞ宜しくお願いします！
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- dscripty
- ベストアンサー率51% (166/325)
IE7 と IE8 は省略。 IE6 は、 他のブラウザと CSS だけじゃなくて HTML 構造も変えちゃえうことで position:fixed; と同じようなことができるというお話。 『CSSのみでIE6にposition:fixedを対応させる』 http://css-eblog.com/csstechnique/position-fixed-forie6.html css はこれ。(※ 本当に使うときは、外部 CSS で！) <!--[if IE 6]> <style type="text/css"> html, body { margin:0; padding:0; height:100%; } /* html 要素と body 要素 を固定させる */ body { position:relative; overflow:hidden; } /* body 要素を、absolute 子孫要素の基準 box にする */ #body { overflow:auto; } /* body 要素のかわり */ .fixed-position { position:absolute; } /* fixed っぽくする要素 */ </style> <![endif]--> html はこれ。 <body> <!--[if IE 6]><div id="body"><![endif]--> <div class="section"> <p>※ここにコンテンツを入れる</p> </div><!-- .section --> <!--[if IE 6]></div><![endif]--><!--"#body"--> <div class="fixed-position"> <p>固定したい何か</p> </div><!-- .fixed-position --> <div class="fixed-position"> <p>固定したい何かその二</p> </div><!-- .fixed-position --> </body> つまり、むりやり、body 要素を (ブラウザの表示領域とかの)view port(※) にして div#body を body 要素にしてしまおうという荒業。 思いついた人すごすぎ！ (※) http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme
- DrFell
- ベストアンサー率55% (305/551)
IE6は、非対応、IE7-8はfixedに半分しか対応していないので、JavaScriptを使うかfixedを使わないで無理やり的に表現するかになってしまいます。 以下のソースは文書宣言も大切ですので、使用モードが違うときは上手くいかない場合があります。 その時は、http://www.k5.dion.ne.jp/~i-araki/css/tuki.htmlを参考になさってください。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <STYLE TYPE="text/css"> <!-- *{ margin:0; padding:0; } html,body { height: 100%; overflow: hidden; /*本来のスクロールバーを隠します*/ } #contents { /*非固定全部を大囲い。*/ overflow:auto; /*スクロールバーを出しています*/ height:100%; /*高さを画面一杯に指定します*/ position: relative; /*位置の基準点を相対位置に指定します。*/ padding-right:100px; /*右の画像と重ならないように空けます*/ } #nav { position:absolute; /*ブラウザの左上を絶対的な位置にします*/ right:30px; /*固定部分の位置指定*/ bottom:30px; /*固定部分の位置指定*/ } --> </style> </head> <body> <div id="nav">★</div><!--★を適切な画像に変えてください*/--> <div id="contents">非 固 定 部 分（本文） </div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLのどこか(といってもbody直下のように親となるコンテナブロックがstatic意外で配置されていないところ)にナビゲーションを置いて、それをfixさせればよいです。 ただし、古いIEはfixに対応していないので、別途HEAD内に <!--[if lt IE 7]> <script type="text/javascript" src="/js/fixed.js"></script> <![endif]--> として、JavaScriptを用意することが一般的です。 <body> <div class="header"><!-- これはabsoluteだとして --> </div> <div class="section"><!-- これはrelativeだとして --> </div> <div class="footer"><!-- これはstatic --> <p class="nav"><a href="./index.html"><span>トップへ</span></p> </div> </body> と、きちんとマークアップして、これをスタイルシートで・・ p.nav{ position:fixed;/* fixさせます。 */ right:0;bottom:0; /* 位置を指定 */ width:80px;height:80px;/* 画像のサイズに合わせる */ background-image:url(./images/goTop.gif); } p.nav a{ display:block;/* inline要素のaをblockにする */ width:100%;height:100%;/* 親ブロックいっぱいまで */ } p.nav a span{ display:none; /* 画面では見せない */ } 走り書きで、テストしてませんが、たぶん良いはず。 なお、HTMLでは、リンクに「トップへ」と書いてあるのは、文書内容に関係ない画像をHTMLに埋め込まないためです。
