css질문 정보
css질문본문
최신글스킨을쓰는데 슬라이드입니다..
css중에
ul#scrollerFrame {margin:0 0 0 25px;}
ul#scrollerFrame li {position:relative;float:left;margin:0 0 0 10px;width:165x;height:200px;}
이게있습니다.
슬라이드 처음은 딱맞는데 넘어가는순간 왼쪽으로 삐져나옵니다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once("$latest_skin_path/skin.lib.php");
$img_width = 165; // 이미지 가로 사이즈
$img_height = 125; // 이미지 세로 사이즈
$frame_width = 990; // 가로길이
$ext2_arr = explode("|",$list[$i]['wr_2']);
$ext2_arr[7];
$data_path = $g4[path]."/data/file/$bo_table";
$thumb_path = $data_path.'/latest_thumb';
@mkdir($thumb_path, 0707);
@chmod($thumb_path, 0707);
?>
<!--최신글, 이미지, 내용 시작-->
<script type="text/javascript" src="<?=$latest_skin_path?>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<?=$latest_skin_path?>/js/jquery.imageScroller.js"></script>
<style type="text/css">
img {border:0}
a {text-decoration:none}
/*스크롤러 스타일*/
div#scroller {background-color:#f7f7f7; height:205px; width:990; padding:0px 20px 20px 30px ;margin:0;clear:both;overflow:hidden;border:1px #ddd solid; }
/*좌우버튼*/
div.button {height:30px; padding:0 0 0 0;}
#btn1, #btn2 {cursor:pointer;}
ul#scrollerFrame {margin:0 0 0 25px;}
ul#scrollerFrame li {position:relative;float:left;margin:0 0 0 10px;width:165x;height:200px;}
/*가격 및 설명 부분*/
ul#scrollerFrame li p {margin:0;padding:0}
ul#scrollerFrame li p.price{font-family:verdana;font-size:12px;font-weight:bold;margin-top:7px;text-align:left;color:#0a62cf;}
ul#scrollerFrame li p.comment{font-family:돋움;font-size:11px;letter-spacing:-1px;margin-top:4px;padding:0 5px;text-align:left;color:#f8f8f8;line-height:170px;}
/*붙박이 아이콘 설정*/
.besticon {position:absolute;top:0;left:0}
.price {font-family:돋움;font-size:12px;font-weight:bold;padding-top:7px;text-align:left;color:#0a62cf}
</style>
<script type="text/javascript">
$(function(){
$("#scroller").imageScroller({
next:"btn1", //다음 버튼 ID값
prev:"btn2", //이전 버튼 ID값
frame:"scrollerFrame", //스크롤러 프레임 ID값
width:160, //이미지 가로 크기
child:"li", //스크롤 지정 태그
auto:true //오토 롤링 (해제는 false)
});
});
</script>
<body>
<div id="scroller" align="left">
<div class="button" style="position:absolute; z-index:100;margin:65px 0 0 0;" align="left">
<span id="btn2" style="float:right;margin:5px 0 0 0;"><img src="<?=$latest_skin_path?>/img/next.png"></span>
<span id="btn1" style="float:right;margin:5px 900px 0 0;"><img src="<?=$latest_skin_path?>/img/prev.png"></span>
</div>
<br>
<ul id="scrollerFrame" style="position:absolute; z-index:10;margin:0 0 0 25" align="left">
<? for ($i=0; $i<count($list); $i++) { ?>
<li>
<?
막~~있음
?>
</li>
<? } ?>
</ul>
</div>
</body>
왜삐져나올까요?
css중에
ul#scrollerFrame {margin:0 0 0 25px;}
ul#scrollerFrame li {position:relative;float:left;margin:0 0 0 10px;width:165x;height:200px;}
이게있습니다.
슬라이드 처음은 딱맞는데 넘어가는순간 왼쪽으로 삐져나옵니다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once("$latest_skin_path/skin.lib.php");
$img_width = 165; // 이미지 가로 사이즈
$img_height = 125; // 이미지 세로 사이즈
$frame_width = 990; // 가로길이
$ext2_arr = explode("|",$list[$i]['wr_2']);
$ext2_arr[7];
$data_path = $g4[path]."/data/file/$bo_table";
$thumb_path = $data_path.'/latest_thumb';
@mkdir($thumb_path, 0707);
@chmod($thumb_path, 0707);
?>
<!--최신글, 이미지, 내용 시작-->
<script type="text/javascript" src="<?=$latest_skin_path?>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<?=$latest_skin_path?>/js/jquery.imageScroller.js"></script>
<style type="text/css">
img {border:0}
a {text-decoration:none}
/*스크롤러 스타일*/
div#scroller {background-color:#f7f7f7; height:205px; width:990; padding:0px 20px 20px 30px ;margin:0;clear:both;overflow:hidden;border:1px #ddd solid; }
/*좌우버튼*/
div.button {height:30px; padding:0 0 0 0;}
#btn1, #btn2 {cursor:pointer;}
ul#scrollerFrame {margin:0 0 0 25px;}
ul#scrollerFrame li {position:relative;float:left;margin:0 0 0 10px;width:165x;height:200px;}
/*가격 및 설명 부분*/
ul#scrollerFrame li p {margin:0;padding:0}
ul#scrollerFrame li p.price{font-family:verdana;font-size:12px;font-weight:bold;margin-top:7px;text-align:left;color:#0a62cf;}
ul#scrollerFrame li p.comment{font-family:돋움;font-size:11px;letter-spacing:-1px;margin-top:4px;padding:0 5px;text-align:left;color:#f8f8f8;line-height:170px;}
/*붙박이 아이콘 설정*/
.besticon {position:absolute;top:0;left:0}
.price {font-family:돋움;font-size:12px;font-weight:bold;padding-top:7px;text-align:left;color:#0a62cf}
</style>
<script type="text/javascript">
$(function(){
$("#scroller").imageScroller({
next:"btn1", //다음 버튼 ID값
prev:"btn2", //이전 버튼 ID값
frame:"scrollerFrame", //스크롤러 프레임 ID값
width:160, //이미지 가로 크기
child:"li", //스크롤 지정 태그
auto:true //오토 롤링 (해제는 false)
});
});
</script>
<body>
<div id="scroller" align="left">
<div class="button" style="position:absolute; z-index:100;margin:65px 0 0 0;" align="left">
<span id="btn2" style="float:right;margin:5px 0 0 0;"><img src="<?=$latest_skin_path?>/img/next.png"></span>
<span id="btn1" style="float:right;margin:5px 900px 0 0;"><img src="<?=$latest_skin_path?>/img/prev.png"></span>
</div>
<br>
<ul id="scrollerFrame" style="position:absolute; z-index:10;margin:0 0 0 25" align="left">
<? for ($i=0; $i<count($list); $i++) { ?>
<li>
<?
막~~있음
?>
</li>
<? } ?>
</ul>
</div>
</body>
왜삐져나올까요?
댓글 전체
크로스브라우징 처리가 안되어있는 css일수도 있으니까요.
일단 다른 브라우저에서도 확인해보세요.
일단 다른 브라우저에서도 확인해보세요.
다그래요 ㅠㅠ 오페라크롬파폭사파리 ㅠㅠ
