背景画像を固定表示でその画像にリンクを…

締切済

質問者：shi-no22
質問日時：2011/06/19 23:24
回答数：3件

自身のウェブサイトの画面右下に画像を表示させて、
なおかつその画像にリンクを貼りたいのですが、
ｈｔｍｌやｃｓｓのスキルは並みの者なので、どうかご助力をお願いします！

イメージとしては、
ttp://www.rakuten.co.jp/e-goods/
や
ttp://www.designwalker.com/
の右側にある画像リンクです。

こちら2つのサイト様のソースを拝見して、
作用している部分を抽出して自分なりに作ってみたのですがうまくいきませんでした。

IEでうまく表示されなかったのです。

他ブラウザではちゃんと右側に出て、スクロールしても画像が固定されるのですが、
IEだけ普通に画像が表示されているだけの状態（左寄せに表示されていて、スクロールしても固定表示されていない）になってしまいます。

2つめに挙げたサイト様はJavaScriptを使用されているっぽい（？）のですが、
できればJavaScript無しで表示させたいです。

IE以外のブラウザではうまく表示されていたので、ちょっと悔しいです。。
解決方法がお分かりになる方、ご意見をいただけるととても助かります。
どうぞ宜しくお願いします！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2011/06/20 01:14

HTMLのどこか(といってもbody直下のように親となるコンテナブロックがstatic意外で配置されていないところ)にナビゲーションを置いて、それをfixさせればよいです。

ただし、古いIEはfixに対応していないので、別途HEAD内に

として、JavaScriptを用意することが一般的です。

<body>
　<div class="header">
　</div>
　<div class="section">
　</div>
　<div class="footer">
　　<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に埋め込まないためです。

- 0
- 件

通報する

No.2

回答者： DrFell
回答日時：2011/06/20 06:45

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">

</style>
</head>
<body>
<div id="nav">★</div>
<div id="contents">非固定部分（本文）
</div>
</body>
</html>

- 0
- 件

通報する

No.3

回答者： dscripty
回答日時：2011/06/20 11:22

IE7 と IE8 は省略。

IE6 は、

他のブラウザと CSS だけじゃなくて HTML 構造も変えちゃえうことで position:fixed; と同じようなことができるというお話。

『CSSのみでIE6にposition:fixedを対応させる』
http://css-eblog.com/csstechnique/position-fixed …

css はこれ。(※ 本当に使うときは、外部 CSS で！)



html はこれ。

<body>
  
  <div class="section">
    <p>※ここにコンテンツを入れる</p>
  </div>
  

  <div class="fixed-position">
    <p>固定したい何か</p>
  </div>
  <div class="fixed-position">
    <p>固定したい何かその二</p>
  </div>
</body>

つまり、むりやり、body 要素を (ブラウザの表示領域とかの)view port(※) にして div#body を body 要素にしてしまおうという荒業。
思いついた人すごすぎ！
(※) http://www.w3.org/TR/CSS21/visuren.html#position …