PC用縦バナーについて

Question

PCページに縦バナーを3段(300円OFF・200円OFF・100円OFF）を
貼り付けたいのですが、下記のタグをヘッダーに貼り付けたのですが、
1段目(300円OFF)・3段目(100円OFF)しか表示されません。
数値を少しずつ調整しても2段目が表示されないのですが・・・。

どこか間違っているのでしょうか？
宜しくお願い致します。



 
 
 
 #sidefixedbanner {
 top: 10px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←左端に固定する場合は、rightをleftに変更してください */
z-index: 10;
 display: block;
 width: auto;
 position: fixed;
 }
 





div#sidefixedbanner {
top: 10px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←右端に固定する場合は、leftをrightに変更し、バナーのずらし幅を調整してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}
div#sidefixedbanner a{ /* マウスカーソルがバナーに乗っていない状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616772.gif) no-repeat scroll 0 0 transparent; /* 背景としてバナー用画像を設定 */
background-position: -290px 0px; /* 背景を左に290ピクセルずらす */
width: 88px; /* ずらした残りの幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}
div#sidefixedbanner a:hover{ /* マウスカーソルがバナーに乗っている状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616772.gif) no-repeat scroll 0 0 transparent; 
background-position: 0px 0px; /* ずらした背景を元に戻す */
width: 250px; /* 画像本来の幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}





 
 
 
 #sidefixedbanner2 {
 top: 200px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←左端に固定する場合は、rightをleftに変更してください */
z-index: 10;
 display: block;
 width: auto;
 position: fixed;
 }
 





div#sidefixedbanner2 {
top: 200px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←右端に固定する場合は、leftをrightに変更し、バナーのずらし幅を調整してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}
div#sidefixedbanner2 a{ /* マウスカーソルがバナーに乗っていない状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616773.gif) no-repeat scroll 0 0 transparent; /* 背景としてバナー用画像を設定 */
background-position: -290px 0px; /* 背景を左に290ピクセルずらす */
width: 88px; /* ずらした残りの幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}
div#sidefixedbanner2 a:hover{ /* マウスカーソルがバナーに乗っている状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616773.gif) no-repeat scroll 0 0 transparent; 
background-position: 0px 0px; /* ずらした背景を元に戻す */
width: 250px; /* 画像本来の幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}




 
 
 
 #sidefixedbanner2 {
 top: 400px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←左端に固定する場合は、rightをleftに変更してください */
z-index: 10;
 display: block;
 width: auto;
 position: fixed;
 }
 





div#sidefixedbanner2 {
top: 400px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←右端に固定する場合は、leftをrightに変更し、バナーのずらし幅を調整してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}
div#sidefixedbanner2 a{ /* マウスカーソルがバナーに乗っていない状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616774.gif) no-repeat scroll 0 0 transparent; /* 背景としてバナー用画像を設定 */
background-position: -290px 0px; /* 背景を左に290ピクセルずらす */
width: 88px; /* ずらした残りの幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}
div#sidefixedbanner2 a:hover{ /* マウスカーソルがバナーに乗っている状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616774.gif) no-repeat scroll 0 0 transparent; 
background-position: 0px 0px; /* ずらした背景を元に戻す */
width: 250px; /* 画像本来の幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}

Answer

ECマスターズの田中です。


以降に記載されているIDが、
プラチナ200円OFFクーポンと同じ「sidefixedbanner2」になっております。

この場合、スタイルシートも同じ要素への記載とみなされ、
「プラチナ200円OFFクーポン」の記述が
後に定義した「ゴールド100円OFFクーポン」に上書きされてしまいます。

このような事態を避けるには、
「ゴールド100円OFFクーポン」内に記載されているID（計6箇所）を、
他と重複しない文字列にご変更ください。
（sidefixedbanner3、など）

ID属性は、そのページでただ一つ存在する要素を示すための属性なので、
同じページ内で同じIDが重複しないようご注意ください。

また、いただいたHTMLソースの中で、
各バナー用の記載が重複しております。
各バナー共通で、冒頭の各タグは必要ないと思いますので、
下記ソースを削除していただき、実際の見た目に変化がないかどうかご確認ください。

=====================





#sidefixedbanner {
top: 10px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←左端に固定する場合は、rightをleftに変更してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}







#sidefixedbanner2 {
top: 200px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←左端に固定する場合は、rightをleftに変更してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}







#sidefixedbanner2 {
top: 400px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←左端に固定する場合は、rightをleftに変更してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}

Answer

早々のご回答ありがとうございます。

思い出しました。
以前もこのようなご回答を頂いた記憶があります。
早速修正して貼り付けまして表示を確認致しました。

ただご回答の中に
＞また、いただいたHTMLソースの中で、
＞各バナー用の記載が重複しております。
＞各バナー共通で、冒頭の各タグは必要ないと思いますので、
＞下記ソースを削除していただき、実際の見た目に変化がないかどうかご確認ください。

こちらを削除したものが下記になりますが、まったく表示しなくなりました。
削除するものが間違っているのでしょうか？

最初の重複していたHTMLソースを貼り付けた場合、きれいに３段表示されました。
理解が間違っているかもしれません。

--------------------------------------------------------





div#sidefixedbanner {
top: 10px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←右端に固定する場合は、leftをrightに変更し、バナーのずらし幅を調整してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}
div#sidefixedbanner a{ /* マウスカーソルがバナーに乗っていない状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616772.gif) no-repeat scroll 0 0 transparent; /* 背景としてバナー用画像を設定 */
background-position: -290px 0px; /* 背景を左に290ピクセルずらす */
width: 88px; /* ずらした残りの幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}
div#sidefixedbanner a:hover{ /* マウスカーソルがバナーに乗っている状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616772.gif) no-repeat scroll 0 0 transparent; 
background-position: 0px 0px; /* ずらした背景を元に戻す */
width: 250px; /* 画像本来の幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}








div#sidefixedbanner2 {
top: 200px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←右端に固定する場合は、leftをrightに変更し、バナーのずらし幅を調整してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}
div#sidefixedbanner2 a{ /* マウスカーソルがバナーに乗っていない状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616773.gif) no-repeat scroll 0 0 transparent; /* 背景としてバナー用画像を設定 */
background-position: -290px 0px; /* 背景を左に290ピクセルずらす */
width: 88px; /* ずらした残りの幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}
div#sidefixedbanner2 a:hover{ /* マウスカーソルがバナーに乗っている状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616773.gif) no-repeat scroll 0 0 transparent; 
background-position: 0px 0px; /* ずらした背景を元に戻す */
width: 250px; /* 画像本来の幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}








div#sidefixedbanner3 {
top: 390px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←右端に固定する場合は、leftをrightに変更し、バナーのずらし幅を調整してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}
div#sidefixedbanner3 a{ /* マウスカーソルがバナーに乗っていない状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616774.gif) no-repeat scroll 0 0 transparent; /* 背景としてバナー用画像を設定 */
background-position: -290px 0px; /* 背景を左に290ピクセルずらす */
width: 88px; /* ずらした残りの幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}
div#sidefixedbanner3 a:hover{ /* マウスカーソルがバナーに乗っている状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0070616774.gif) no-repeat scroll 0 0 transparent; 
background-position: 0px 0px; /* ずらした背景を元に戻す */
width: 250px; /* 画像本来の幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}

Answer

ECマスターズの田中です。

私にて改めて確認したところ、
背景の位置調整が必要ないことがわかりましたので、

重複分を削除していただいたソースから、さらに
各バナーのCSSに含まれている

background-position: -290px 0px; /* 背景を左に290ピクセルずらす */
および
background-position: 0px 0px; /* ずらした背景を元に戻す */

以上2行、全体で計6行を削除していただけますでしょうか。

そうすると正常に動作するようになりますが、
一番上のバナーが楽天本来のヘッダーに被る位置にありますので、
topの値を増やして調整していただきますようお願いします。

Answer

田中　様

いつもありがとうございます。
きれいに表示が出来ました。
何度もありがとうございました。