0
Ich habe einen einzigen CSS Slider, vor ein paar Tagen erstellt und es scheint die Kontrolle Pfeile sind gut positioniert, wenn ich die Seite auf meinem Computer öffnen, aber sie bewegen, wenn ich auf der Seite hinein oder heraus Wie kann ich sie immer in Position halten? Ich kann nicht herausfinden, was ich vermisse. HierSlider Control Pfeile bewegen sich
ist die Testseite: http://friendshipforever.co.uk/slider%20test/slider.html
CSS und HTML unter:
#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 -->
sie noch in Bewegung sind, nachdem ich entfernt marg wie du es erwähnt hast – Peter