###前提・実現したいこと
1.矢印入りのリンクバナー(.digicatalog)を、
position: relative;
position: absolute;
で指定したところ、画面サイズによって配置がズレてしまいます。
2.カルーセルの左右矢印を、同様に、
position: relative;
position: absolute;
で指定したところ、画面サイズによって配置がズレてしまいます。
画面サイズを変えても配置が変わらないようなコーディングは、
どのようにすれば良いでしょうか。
よろしくお願いいたします。
###該当のソースコード
<body> <header class="header"> <div class="top"> <img src="/img/imagebanner.png" width="1178" height="390" alt=""/> </div> <div class="digicatalog"> <img src="/img/dicatalogbtn.png" width="334" height="70" alt=""/> </div> </header> <div class="wrapper"> <main class="main"> <div class="sets"> <h2 id="midashi1"> <img src="img/midashi1.png" width="980" height="154" alt=""/> </h2> <div class="caroufredsel_wrapper"> <div class="slides"><img src="/img/set1.png"></div> <div class="slides"><img src="/img/set2.png"></div> <div class="slides"><img src="/img/set3.png"></div> <div class="slides"><img src="/img/set4.png"></div> <div class="slides"><img src="/img/set5.png"></div> <div class="slides"><img src="/img/set6.png"></div> <div class="slides"><img src="/img/set7.png"></div> </div> <div class="button"> <p><a href="#" class="prev" style="display: block;"><img src="img/slide_left.png" alt=""/></a></p> <p><a href="#" class="next" style="display: block;"><img src="img/slide_right.png" alt=""/></a></p> </div> </div>
img { max-width : 100% ; height : auto ; } body { -webkit-text-size-adjust : 100% ; } .header { position: relative; top: 0; width: 80%; margin: 0 auto; width: 1181px; } .digicatalog { position: absolute; width: 1181px; top: 250px; left: 695px; } .wrapper { width: 980px; margin: 0 auto; } .main { width: 100%; display: block; margin: 0 auto; text-align:center; } .sets { position: relative; top: 0; width: 980px; margin: 0 auto; } .caroufredsel_wrapper { width: 980px; } .slides { width: 209px; height: 474px; float: left; display: block; margin-left: 10px; margin-right: 10px; } .button { width: 980px; margin: 0 auto; } .prev { position: absolute; top: 400px; left: -20px; } .next { position: absolute; top: 400px; right: -20px; }
回答1件
あなたの回答
tips
プレビュー