• 文字サイズ


解決済

サイドバナーを固定(フローティングバナー)に変更する方法 

  • 相談者:非公開
  • 2015/12/07 17:46
初歩的な質問で恐縮ですが、店舗のサイドバナーをスクロールしても固定で表示される
バナーに変更したいと思っています。

どのようなタグを組めば良いでしょうか。

absolute を fixed に変えてみたところ画面が崩れてしまいました。
ご教授頂けると幸いです。 



使用タグ 
<!-- // サイドバナー設定 // -->
table {position:static;}

#tate_left a,
#tate_right a {
display: block;
margin-bottom: 16px;/* min-height: 100%;
width: 78px;       
visibility: visible;
height: 16000px;
text-indent:-9999px;*/

}

#tate_left,
#tate_right {
position: absolute;
width: 78px;       /* 画像の横幅 */
min-height:100%;
visibility: visible;
display: block;
margin-top: 300px;
}
#tate_left { left: 0px; }
#tate_right { right: 0px; }


/***********************
左縦帯バナー設定
************************/
.tateobi1 {
/* background: url(http://image.rakuten.co.jp/SHOP-URL/cabinet/03317856/imgrc0067677198.jpg) repeat-y scroll;
min-height: 100%;
[disabled]height: 5200px; */
top: 70px;
z-index: auto;
visibility: visible;
}
/***********************
右縦帯バナー設定
************************/
.tateobi2 {
top: 70px;
z-index: auto;
visibility: visible;
}

.tateobi2 .banner01 {

}

.tateobi2 .banner02 {

}

@media screen and (max-width: 1200px) {
#tate_left, #tate_right {
visibility: hidden;
}
}  

// サイドバナー設定 end //
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2015/12/07 19:32
ECマスターズの田中です。

タグの全体を、下記のようにご変更いただくといかがでしょうか。

===== この下の行から ===============………(省略)………
  • 返信者:非公開(質問者)
  • 2015/12/08 08:40
いつもありがとうございます。

コピーを作成し実施したところ無事固定バナーで表示されるようになりました。
本当にありがとうございます。

(バナーの大………(省略)………
  • 返信者:非公開
  • 2015/12/08 11:39
ECマスターズの田中です。

>他のページと同様のバナーを表示したいと思っているのですが、
>どのようにすればよいかお教え頂けませんでしょうか。

只………(省略)………
  • 返信者:非公開(質問者)
  • 2015/12/08 12:03
ありがとうございます。

無事解決いたしました。 



………(省略)………
このフォーラムへの質問は終了しました