모바일과 pc 스타일이 달라요... 정보
모바일과 pc 스타일이 달라요...첨부파일
본문
http://humble1935.cafe24.com/ver2/index.php
이 주소를 pc로 보면 슬라이드에 그림자가 없습니다.
그런데 스마트폰으로 들아가면 슬라이드 주변에 그림자가 나타나거든요.
pc 에서 열어도 그림자가 보이게 하고 싶은데 어떻게 하면 될까요?
스타일 파일 올려봅니다^^
#slider {
position:relative;
width:530px;
height:300px;
margin:0px 0px 0px 0px;
background:#202834 url(../img/nivo/loading.gif) no-repeat 50% 50%;
-moz-box-shadow:0px 0px 10px #333;
-webkit-box-shadow:0px 0px 10px #333;
box-shadow:0px 0px 10px #333;
}
#slider img {
position:absolute;
top:0px;
left:0px;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:0;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:-1;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:75px;
right:0px;
bottom:10px;
background:#6d6d6d;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:80%;
z-index:89;
}
.nivo-caption p {
color:#fff;
padding:5px;
margin:0;
}
.nivo-controlNav {
position:absolute;
left:48%;
bottom:-30px;
}
.nivo-controlNav a {
display:block; /*
width:10px;
height:10px;
background:url(../img/nivo/bullets.png) no-repeat; */
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:-10px 0;
}
.nivo-directionNav a {
display:block;
width:30px;
height:34px;
background:url(../img/nivo/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:10px;
}
a.nivo-prevNav {
left:10px;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
이 주소를 pc로 보면 슬라이드에 그림자가 없습니다.
그런데 스마트폰으로 들아가면 슬라이드 주변에 그림자가 나타나거든요.
pc 에서 열어도 그림자가 보이게 하고 싶은데 어떻게 하면 될까요?
스타일 파일 올려봅니다^^
#slider {
position:relative;
width:530px;
height:300px;
margin:0px 0px 0px 0px;
background:#202834 url(../img/nivo/loading.gif) no-repeat 50% 50%;
-moz-box-shadow:0px 0px 10px #333;
-webkit-box-shadow:0px 0px 10px #333;
box-shadow:0px 0px 10px #333;
}
#slider img {
position:absolute;
top:0px;
left:0px;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:0;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:-1;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:75px;
right:0px;
bottom:10px;
background:#6d6d6d;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:80%;
z-index:89;
}
.nivo-caption p {
color:#fff;
padding:5px;
margin:0;
}
.nivo-controlNav {
position:absolute;
left:48%;
bottom:-30px;
}
.nivo-controlNav a {
display:block; /*
width:10px;
height:10px;
background:url(../img/nivo/bullets.png) no-repeat; */
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:-10px 0;
}
.nivo-directionNav a {
display:block;
width:30px;
height:34px;
background:url(../img/nivo/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:10px;
}
a.nivo-prevNav {
left:10px;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
댓글 전체
IE8버전까지는 box-shadow 기능이 제공이 안되므로 그림자가 나타나지 않을 겁니다.