Окончательно запуталась, нужно, чтобы на каждом слайде был свой текст и кнопка. у меня либо все тексты на одном сладйе, либо все тексты на всех слайдах. Как быть?
#slider {
height: 550px;
margin: 100px auto 0;
position: absolute;
width: 1250px;
right: 50px;
top: 150px;
}
}
#slides {
background-color: #000;
height: inherit;
overflow: hidden;
position: relative;
width: inherit;
}
.inner {
width: 500%;
}
.inner:after {
content: '';
display: block;
height: 0;
clear: both;
}
/*1слайд*/
.page-a:after {
content: '';
display: block;
height: 0;
clear: both;
}
.page-a {
float: left;
width: 20%;
display: inline-block;
}
.page-a img {
width: 1250px;
height: 550px;
opacity: 0.7;
}
.page-a .page-1 {
display: block;
position: absolute;
left: 150px;
bottom: 200px;
font-family: "Roboto Regular" sans-serif;
font-size: 24px;
line-height: 1.5;
/* width:100%;*/
color: #fff;
font-weight: normal;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.page-1 span {
font-family: "Roboto Regular" sans-serif;
font-size: 18px;
position: relative;
bottom: 15px;
}
.page-a .page-2 {
display: block;
position: absolute;
left: 150px;
bottom: 125px;
font-family: 'Arial Regular', sans-serif;
font-size: 18px;
color: #000;
border: 1px solid #fecd39;
padding: 15px 21px;
background-color: #fecd39;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.page-2 a {
color: #000;
}
.page-2 a:hover {
background-color: #e2aa00;
border-color: #e2aa00;
}
.page-2 a:active {
background-color: #e2aa00;
border-color: #785a00;
box-shadow: inset 0px 2px 3px 2px rgba(120, 90, 0, 0.5);
}
/*2 слайд*/
.page-b:after {
content: '';
display: block;
height: 0;
clear: both;
}
.page-b {
float: left;
width: 20%;
display: inline-block;
}
.page-b img {
width: 1250px;
height: 550px;
opacity: 0.7;
}
.page-b .page-3 {
display: block;
position: absolute;
left: 150px;
bottom: 200px;
font-family: "Roboto Regular" sans-serif;
font-size: 24px;
line-height: 1.5;
/* width:100%;*/
color: #fff;
font-weight: normal;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.page-3 span {
font-family: "Roboto Regular" sans-serif;
font-size: 18px;
position: relative;
bottom: 15px;
}
.page-b .page-4 {
display: block;
position: absolute;
left: 150px;
bottom: 125px;
font-family: 'Arial Regular', sans-serif;
font-size: 18px;
color: #000;
border: 1px solid #fecd39;
padding: 15px 21px;
background-color: #fecd39;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.page-4 a {
color: #000;
}
.page-4 a:hover {
background-color: #e2aa00;
border-color: #e2aa00;
}
.page-4 a:active {
background-color: #e2aa00;
border-color: #785a00;
box-shadow: inset 0px 2px 3px 2px rgba(120, 90, 0, 0.5);
}
/*3 слайд*/
.page-c:after {
content: '';
display: block;
height: 0;
clear: both;
}
.page-c {
float: left;
width: 20%;
display: inline-block;
}
.page-c img {
width: 1250px;
height: 550px;
opacity: 0.7;
}
.page-c .page-5 {
display: block;
position: absolute;
left: 150px;
bottom: 200px;
font-family: "Roboto Regular" sans-serif;
font-size: 24px;
line-height: 1.5;
/* width:100%;*/
color: #fff;
font-weight: normal;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.page-5 span {
font-family: "Roboto Regular" sans-serif;
font-size: 18px;
position: relative;
bottom: 15px;
}
.page-c .page-6 {
display: block;
position: absolute;
left: 150px;
bottom: 125px;
font-family: 'Arial Regular', sans-serif;
font-size: 18px;
color: #000;
border: 1px solid #fecd39;
padding: 15px 21px;
background-color: #fecd39;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.page-6 a {
color: #000;
}
.page-6 a:hover {
background-color: #e2aa00;
border-color: #e2aa00;
}
.page-6 a:active {
background-color: #e2aa00;
border-color: #785a00;
box-shadow: inset 0px 2px 3px 2px rgba(120, 90, 0, 0.5);
}
#overflow {
overflow: hidden;
}
#slider input {
display: none;
}
#controls {
left: 50%;
margin-left: -68px;
top: 50px;
position: absolute;
}
#controls label {
z-index: 15;
cursor: pointer;
display: inline-block;
height: 8px;
margin: 25px 12px 0 16px;
position: relative;
width: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
*/ border-radius: 50%;
-webkit-transition: background ease-in-out .5s;
-moz-transition: background ease-in-out .5s;
-o-transition: background ease-in-out .5s;
transition: background ease-in-out .5s;
}
/* перелистывание фотографий */
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide5:checked~#controls label:nth-child(1) {
/* первые пять значений создадут стрелку справа*/
width: 22px;
height: 42px;
/*border-top: 20px solid transparent;
border-left: 20px solid #333;
border-bottom: 20px solid transparent;*/
background: url('next.png') no-repeat;
float: right;
/*в правый угол*/
margin-right: -30px;
/* за блок*/
display: block;
position: relative;
right: -600px;
top: 170px;
}
#slide1:checked~#controls label:nth-child(3),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2) {
/*стрелка слева*/
width: 22px;
height: 42px;
/*border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid rgb(51, 51, 51);*/
background: url('prenext.png') no-repeat;
float: left;
display: block;
position: relative;
left: -600px;
top: 170px;
}
#slide1:checked~#slides .inner {
margin-left: 0;
}
#slide2:checked~#slides .inner {
margin-left: -100%;
}
#slide3:checked~#slides .inner {
margin-left: -200%;
}
/*точки для перелистывания*/
#active {
text-align: center;
margin-top: 10px;
}
#active label {
width: 10px;
height: 10px;
background: #fff;
opacity: 0.5;
display: inline-block;
cursor: pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: relative;
bottom: 500px;
margin-left: 15px;
z-index: 15;
}
#active label:hover {
background: #fff;
opacity: 1;
}
#slide1:checked~#active label:nth-child(1),
#slide2:checked~#active label:nth-child(2),
#slide3:checked~#active label:nth-child(3) {
background: #fff;
opacity: 1;
}
#slides .inner {
transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
}
<div id="slider">
<input type="radio" name="slider" id="slide1" checked="">
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="page-a">
<img src="transport.jpg" />
<div class="page-1">
<h1>ТРАНСПОРТНЫЕ И <br>ЛОГИСТИЧЕСКИЕ<br>УСЛУГИ</h1> <span>Перевозка и доставка грузов по всей России</span></div>
<div class="page-2"> <a href="transport.html">ПЕРЕЙТИ В РАЗДЕЛ</a></div>
</div>
<div class="page-b">
<img src="expertisa.jpg" />
<div class="page-3">
<h1>СТРОИТЕЛЬСТВО И <br>МОНТАЖ</h1> <span>Перевозка и доставка грузов по всей России</span></div>
<div class="page-4"> <a href="stroyka.html">ПЕРЕЙТИ В РАЗДЕЛ</a></div>
</div>
<div class="page-c">
<img src="sltorg.jpg" />
<div class="page-5">
<h1>ОПТОВО-РОЗНИЧНАЯ<br>ТОРГОВЛЯ</h1> <span>Перевозка и доставка грузов по всей России</span></div>
<div class="page-6"> <a href="trade.html">ПЕРЕЙТИ В РАЗДЕЛ</a></div>
</div>
</div>
<!--inner-->
</div>
<!--overflow-->
</div>
<!--slides-->
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
<div id="active">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Есть страница на которой нужно расположить несколько элементов в рядИ у меня получилось но почему то в 2 разных случаях понадобилось делать...
Сделал, чтобы при нажатии на чекбокс disabled у кнопки убиралось, но как сделать, чтобы оно появлялось при повторном нажатии на чекбокс?