html
1 2 <div class="lp_timer"> 3 <div class="cdown" data-cdown-min="15"></div> 4 </div> 5 6 <p class="cp_bnr"><img src="img/timer_15min_bnr.jpg" ></p> 7 8 9 10
css
1 2 .lp_timer { 3 background: url("../img/timer_15min_bg.jpg")no-repeat center top; 4 background-size: 100%; 5 height: 20vw; 6 width: 100%; 7 overflow: hidden; 8 position: fixed; 9 z-index: 100; 10 } 11 12 .cdown, 13 .cdown-done, 14 .cdown-loop { 15 font-size: 7vw; 16 color: #FDF051; 17 font-weight: bold; 18 position: relative; 19 top: 12vw; 20 left: 34vw; 21 width: 100%; 22 } 23 24 25.cp_bnr{ 26 margin-top: 10vw; 27} 28 29
javascript
1 2window.addEventListener( 3 "load", 4 function() { 5 var cdown = new Object(); 6 cdown.elem = document.querySelectorAll(".cdown"); 7 cdown.tmr = new Array(); 8 cdown.getTime = function(I) { 9 var attributes = cdown.elem[I].attributes; 10 for (var type, value, i = 0; i < attributes.length; i++) { 11 type = attributes[i].name.match(/(^data-cdown-)(.+)/); 12 if (type) { 13 value = parseInt(attributes[i].value, 10) || 0; 14 return type[2] == "min" ? value * 60 : value; 15 } 16 } 17 return null; 18 }; 19 cdown.start = function(I) { 20 var sec = cdown.getTime(I); 21 if (sec == null) { 22 return; 23 } 24 var target = new Date().getTime() + sec * 1000; 25 cdown.tmr[I] = setInterval(function() { 26 var now = new Date().getTime(); 27 var left = target - now; 28 var output = { 29 min: Math.floor((left % (1000 * 60 * 60)) / (1000 * 60)), 30 sec: Math.floor((left % (1000 * 60)) / 1000), 31 ms: left % 1000, 32 }; 33 console.log(left); 34 if (left > 0) { 35 cdown.elem[I].textContent = "" + ("0" + output.min).slice(-2) + " : " + ("0" + output.sec).slice(-2) + " : " + ("00" + output.ms).slice(-2); 36 } else { 37 cdown.elem[I].textContent = "0:00"; // 終了後に表示される言葉 38 window.clearInterval(cdown.tmr[I]); 39 } 40 }, 20); 41 }; 42 for (var i = 0; i < cdown.elem.length; i++) { 43 cdown.start(i); 44 } 45 }, 46 false 47); 48 49 50 51
上記コードのように画像が上下2枚の構成で、上の画像をフローティングした時に
下の画像 cp_bnr が被ってしまうので
フローティング要素の下の画像 cp_bnr に
margin-top
padding-top
などを指示して余白を作ろうと思ったんですが全くcssが反応しません。
class名などは間違ってなく、
.cp_bnr img
や
img.cp_bnr
など書いたり他のcss(width:100%など)の指示を書いたりしたんですが
それすら反映されず....
こちらの解決案わかる方いらっしゃいますでしょうか?
解決したいこと
.cp_bnr
と言うclass名の要素に 余白を作るcss指示を反映させたい
備考
javascript不要かもしれませんが念のため
回答1件
あなたの回答
tips
プレビュー