최근게시물 슬라이딩이 한쪽으로 쏠려있어요 ㅡㅜ
본문
최근게시물 슬라이딩인데 한쪽으로 쏠려있어요 이거 수정하려면 소스 어디를 건드려야할까요
도움 부탁드려요
증상은 이래요 ㅡㅜ
<?php
if(!defined("_GNUBOARD_")) exit;
$zp_thumb_width = "1001";
$zp_thumb_height = "315";
$data_path = $g4[path]."/data";
$thumb_path = $data_path."/thumb/$board[bo_table]/board";
if (!is_dir($thumb_path))
{
@mkdir("$data_path/thumb", 0707);
@chmod("$data_path/thumb", 0707);
@mkdir("$data_path/thumb/$board[bo_table]", 0707);
@chmod("$data_path/thumb/$board[bo_table]", 0707);
@mkdir("$data_path/thumb/$board[bo_table]/board", 0707);
@chmod("$data_path/thumb/$board[bo_table]/board", 0707);
// file hidden
$file = $thumb_path . "/index.php";
$f = @fopen($file, "w");
@fwrite($f, "");
@fclose($f);
@chmod($file, 0606);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="<?=$latest_skin_path?>/js/jquery.js"></script>
<script type="text/javascript" src="<?=$latest_skin_path?>/js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
nextId: "slider1next",
prevId: "slider1prev"
});
$("#slider2").easySlider({
numeric: true
});
});
</script>
<link href="<?=$latest_skin_path?>/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="content">
<div id="slider">
<ul>
<?php for($i=0; $i<count($list); $i++) {
$thumb = $thumb_path.'/'.$list[$i][wr_id].'.'.jpg;
// thumb
if (!file_exists($thumb)) {
if ($list[$i][file][0][file]) {
$file = $list[$i][file][0][path] .'/'. $list[$i][file][0][file];
} else if ($list[$i][file][1][file]) {
$file = $list[$i][file][1][path] .'/'. $list[$i][file][1][file];
} else if ($list[$i][file][2][file]) {
$file = $list[$i][file][2][path] .'/'. $list[$i][file][2][file];
} else {
$file = $list[$i][file][0][path] .'/'. $list[$i][file][0][file];
}
// getimage
if (preg_match("/\.(jp[e]?g|gif|png)$/i", $file) && file_exists($file)) {
$size = getimagesize($file);
if ($size[2] == 1) {
$src = imagecreatefromgif($file);
} else if ($size[2] == 2) {
$src = imagecreatefromjpeg($file);
} else if ($size[2] == 3) {
$src = imagecreatefrompng($file);
} else {
break;
}
$rate = $zp_thumb_width / $size[0];
$height = (int)($size[1] * $rate);
if ($height < $zp_thumb_height) {
$dst = imagecreatetruecolor($zp_thumb_width, $height);
} else {
$dst = imagecreatetruecolor($zp_thumb_width, $zp_thumb_height);
}
imagecopyresampled($dst, $src, 0, 0, 0, 0, $zp_thumb_width, $height, $size[0], $size[1]);
imagejpeg($dst, $thumb_path.'/'.$list[$i][wr_id].'.'.jpg, $zp_thumb_height);
@chmod($thumb_path.'/'.$list[$i][wr_id].'.'.jpg, 0606);
}
}
$data_path = $g4[path]."/data";
$thumb_path = $data_path.'/thumb'.'/'.$bo_table.'/board';
$img = "<img src='{$latest_skin_path}/img/noimg.gif' width='{$img_w}' alt='{$list[$i][wr_subject]}' style='vertical-align: middle;' />";
$thumb = $thumb_path.'/'.$list[$i][wr_id].'.'.jpg;
if(file_exists($thumb)) {
$img = "<img src='$thumb' alt='{$list[$i][wr_subject]}'>";
} else {
$img = "<p style='width:{$img_w}px; height:88px; text-align:center; line-height:88px; border:0px solid #dddddd;'>no image</p>";
}
$href = "$g4[bbs_path]/board.php?bo_table=$bo_table";
echo "<li>{$img}</li>";
} ?>
</ul>
</div>
</div>
</div>
</body>
</html>
답변 3
최근게시물에 불필요한 요소들이 많이 있네요 html body container 이런거 다지워주세요 ;
#container {
width:696px;
이 width:696px;만 지우시면 해결이 될 듯합니다.
css는 아래와 같아요
body {
color:#333;
line-height:180%;
margin:0;
padding:0;
text-align:center;
}
h1{
font-size:180%;
font-weight:normal;
margin:0;
padding:0 20px;
}
h2{
font-size:160%;
font-weight:normal;
}
h3{
font-size:140%;
font-weight:normal;
}
/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-2000px;
}
/* // image replacement */
#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px;
background:#fff;
margin-bottom:0em;
}
#header{
height:80px;
line-height:80px;
background:#5DC9E1;
color:#fff;
}
#content{
position:relative;
}
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:1001px;
height:315px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:1000px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
답변을 작성하시기 전에 로그인 해주세요.