테이블 td 사이에
<link rel="stylesheet" type="text/css" href="css/style.css" />
<div class="sp-slideshow">
<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
<label for="button-1" class="button-label-1"></label>
<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
<label for="button-2" class="button-label-2"></label>
<input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
<label for="button-3" class="button-label-3"></label>
<label for="button-1" class="sp-arrow sp-a1"></label>
<label for="button-2" class="sp-arrow sp-a2"></label>
<label for="button-3" class="sp-arrow sp-a3"></label>
<ul class="sp-slider clearfix">
<li><img src="img/img_003.gif" alt="image01" /></li>
<li><img src="img/img_002.gif" alt="image02" /></li>
<li><img src="img/img_001.gif" alt="image03" /></li>
</ul>
</div><!-- sp-content -->
</div><!-- sp-slideshow -->
이런 슬라이딩 효과가 있는 소스를 써넣었는데요
그 소스들을 테이블안에서 벗어나지 못하게 하고싶어요
CSS 파일을 뜯어보면
.sp-content {
overflow: hidden;
width: 741px;
height: 409px;
margin: 0 auto;
border:1px;
}
.sp-slideshow input {
width: 0px;
height: 0px;
}
.sp-arrow {
position: absolute;
top: 60%;
margin-right: 10%;
margin-left: 10%;
width: 28px;
height: 38px;
display: none;
cursor: pointer;
background: transparent url(../img/arrows.gif) no-repeat;
-webkit-transition: opacity linear 0.3s;
-ms-transition: opacity linear 0.3s;
-moz-transition: opacity linear 0.3s;
-o-transition: opacity linear 0.3s;
-transition: opacity linear 0.3s;
}
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
.sp-selector-2:checked ~ .sp-arrow.sp-a3{
right: 15px;
display: block;
background-position: top right;
}
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
.sp-selector-3:checked ~ .sp-arrow.sp-a2{
left: 15px;
display: block;
background-position: top left;
}
.sp-slider {
position: relative;
left: 0;
width: 500%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
-webkit-transition: left ease-in 0.2s;
-ms-transition: left ease-in 0.2s;
-o-transition: left ease-in 0.2s;
-moz-transition: left ease-in 0.2s;
-transition: left ease-in 0.2s;
}
.sp-slider > li {
color: #ffffff;
width: 20%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float: left;
text-align: center;
opacity: 0.1;
-webkit-transition: opacity ease-in 0.4s 0.4s;
-ms-transition: opacity ease-in 0.4s 0.4s;
}
input.sp-selector-1:checked ~ .sp-content .sp-slider {
left: 0;
}
input.sp-selector-2:checked ~ .sp-content .sp-slider {
left: -100%;
}
input.sp-selector-3:checked ~ .sp-content .sp-slider {
left: -200%;
}
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3){
opacity: 1;
}
이렇게 되어있는데 저 arrow를 고정시키고 싶어요 td안에요 ㅠㅠ 어찌하면 좋을까요
베스트금지
본인삭제금지
글쓰기