0
私はコンピュータ上でページを開くとコントロールの矢印がうまく配置されているように見えますが、ページ上でズームインまたはズームアウトすると動いていますどのように私はそれらを常にポジションに保つことができますか？ 私は何が欠けているのか分かりません。ここでスライダコントロールの矢印が移動しています
は、テストページがある：以下 http://friendshipforever.co.uk/slider%20test/slider.html
CSSとHTML：
#slider {
\t text-align: center;
}
h2 {
\t margin: 40px 0 25px;
\t border-bottom: 1px solid #bbb;
\t padding: 0 0 10px;
}
p {
\t margin: 0 0 16px;
}
strong {
\t font-weight: bold;
}
label, a {
\t color: teal;
\t cursor: pointer;
\t text-decoration: none;
}
label:hover, a:hover {
\t color: #000 !important;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
label, #active, img { -moz-user-select:none;-webkit-user-select:none; }
.catch { display: block; height: 0; overflow: hidden; }
#slider {
\t margin: 0 auto;
}
#description {
\t margin: 25px auto;
\t text-align: left;
\t max-width: 650px;
\t padding: 0 25px;
}
.respond {
\t margin: 0 auto;
\t max-width: 370px;
}
/* NEW EXPERIMENT */
/* Slider Setup */
input {
\t display: none;
}
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }
#overflow {
\t width: 105%;
\t overflow: hidden;
}
article img {
\t max-width: 400px;
}
#slides .inner {
\t width: 500%;
\t line-height: 0;
}
#slides article {
\t width: 20%;
\t float: left;
}
/* Slider Styling */
/* Control Setup */
#controls {
\t margin: -25% 0 0 0;
\t width: 100%;
\t height: 50px;
}
#controls label {
\t display: none;
\t width: 50px;
\t height: 50px;
\t opacity: 0.3;
}
#active {
\t margin: 23% 0 0;
\t text-align: center;
}
#active label img {
\t display: inline-block;
\t height: 70px;
\t border-style: solid;
\t border-width: 3px;
\t border-color: black;
\t opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#active label img:hover {
opacity: 0.5; \t
}
#controls label:hover {
\t opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(1) {
\t background: url('next.png') no-repeat;
\t position: relative;
\t float: right;
\t margin: 0 350px 0 0;
\t display: block;
}
#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
\t background: url('prev.png') no-repeat;
\t position: relative;
\t float: left;
\t margin: 0 0 0 300px;
\t display: block;
}
#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5) {
\t opacity: 0.5;
}
/* Slider Styling */
#slides {
\t
\t width:400px;
\t margin: auto;
\t
\t
}
/* Animation */
#slides .inner {
\t -webkit-transform: translateZ(0);
\t -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
\t -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
\t -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
\t -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}
#slider {
\t -webkit-transform: translateZ(0);
\t -webkit-transition: all 0.5s ease-out;
\t -moz-transition: all 0.5s ease-out;
\t -o-transition: all 0.5s ease-out;
\t transition: all 0.5s ease-out;
}
#controls label{
\t -webkit-transform: translateZ(0);
\t -webkit-transition: opacity 0.2s ease-out;
\t -moz-transition: opacity 0.2s ease-out;
\t -o-transition: opacity 0.2s ease-out;
\t transition: opacity 0.2s ease-out;
}
#slide1:checked ~ #slides article:nth-child(1) .info,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info,
#slide5:checked ~ #slides article:nth-child(5) .info {
\t opacity: 1;
\t -webkit-transition: all 1s ease-out 0.6s;
\t -moz-transition: all 1s ease-out 0.6s;
\t -o-transition: all 1s ease-out 0.6s;
\t transition: all 1s ease-out 0.6s;
}
.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {
\t -webkit-transform: translateZ(0);
\t -webkit-transition: all 0.5s ease-out;
\t -moz-transition: all 0.5s ease-out;
\t -o-transition: all 0.5s ease-out;
\t transition: all 0.5s ease-out;
}<!-- CSS -->
\t <link href="sliderstyle.css" media="screen, projection" rel="stylesheet" type="text/css" />
\t \t \t
\t \t <!-- Slider Setup -->
\t
\t \t <input checked type=radio name=slider id=slide1 />
\t \t <input type=radio name=slider id=slide2 />
\t \t <input type=radio name=slider id=slide3 />
\t \t <input type=radio name=slider id=slide4 />
\t \t <input type=radio name=slider id=slide5 />
\t
\t
\t \t <!-- The Slider -->
\t \t
\t \t <div id=slides>
\t \t
\t \t \t <div id=overflow>
\t \t \t
\t \t \t \t <div class=inner>
\t \t \t \t
\t \t \t \t \t <article>
\t \t \t \t \t \t
\t \t \t \t \t \t <img src=cheesesandwich.png />
\t \t \t \t \t </article>
\t \t \t \t \t
\t \t \t \t \t <article>
\t \t \t \t \t \t
\t \t \t \t \t \t <img src=cheeseplush1.jpg />
\t \t \t \t \t </article>
\t \t \t \t \t
\t \t \t \t \t <article>
\t \t \t \t \t \t
\t \t \t \t \t \t <img src=cheeseplush2.jpg />
\t \t \t \t \t </article>
\t \t \t \t \t
\t \t \t \t \t <article>
\t \t \t \t \t
\t \t \t \t \t \t <img src=cheeseplush3.jpg />
\t \t \t \t \t </article>
\t \t \t \t \t
\t \t \t \t \t <article>
\t \t \t \t \t \t
\t \t \t \t \t \t <img src=cheeseplush4.jpg />
\t \t \t \t \t </article>
\t \t \t \t \t
\t \t \t \t </div> <!-- .inner -->
\t \t \t \t
\t \t \t </div> <!-- #overflow -->
\t \t
\t \t </div> <!-- #slides -->
\t
\t
\t \t <!-- Controls and Active Slide Display -->
\t
\t \t <div id=controls>
\t \t \t <label for=slide1></label>
\t \t \t <label for=slide2></label>
\t \t \t <label for=slide3></label>
\t \t \t <label for=slide4></label>
\t \t \t <label for=slide5></label>
\t \t
\t \t </div> <!-- #controls -->
\t \t
\t \t <div id=active>
\t \t \t <label for=slide1><img src=cheesesandwich.png /></label>
\t \t \t <label for=slide2><img src=cheeseplush1.jpg /></label>
\t \t \t <label for=slide3><img src=cheeseplush2.jpg /></label>
\t \t \t <label for=slide4><img src=cheeseplush3.jpg /></label>
\t \t \t <label for=slide5><img src=cheeseplush4.jpg /></label>
\t \t \t
\t \t </div> <!-- #active -->
\t
\t </article> <!-- #slider -->
私はマーグを取り除いた後、彼らはまだ動いていますあなたが言及したように – Peter