css 갤러리 최근글 불러올 때 가로갯수 문의드립니다. 정보
css 갤러리 최근글 불러올 때 가로갯수 문의드립니다.본문
오류가 나는곳의 주소를 알려주시면 더 빠르고 정확하게 답변 받을 수 있습니다.
오류 주소 :
grapedw님께서 올려주신 최근글 소스로 갤러리 최신글로 변경하여 작업중에 있습니다.
소스대로 하면 한개씩 세로로 정렬이 주욱 되는데요
가로갯수를 4개씩 나오도록 정렬할 수 있을까요?
답변 부탁드리겠습니다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>
<script src="<?=$latest_skin_path?>/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="<?=$latest_skin_path?>/jquery.quick.pagination.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="<?=$latest_skin_path?>/styles.css">-->
<style>
h1, h2,ul {
clear: both;
}
ul.pagination1 li:hover,
ul.pagination2 li:hover,
ul.pagination3 li:hover {
background-color: #ffffff;
}
ul.pagination1 li,
ul.pagination2 li,
ul.pagination3 li {
list-style-type:none;
font-family: dotum;
background-color: #ffffff;
font-size: 12px;
color: #fff;
line-height: 1;
width: 600px;
margin-bottom: 1px;
list-style:none;
border:1px solid #EFEFEF;
float: left;
margin:0px;
position:relative;
display:inline;
}
ul.red {
outline:10px solid red;
}
ul.simplePagerNav li{
display:block;
float: left;
padding: 10px;
margin-bottom: 10px;
font-family: georgia;
font-size:14px;
border:1px solid #fde2ca
}
ul.simplePagerNav li a{
color: #333;
text-decoration: none;
}
li.currentPage {
background: red;
background: #FF9500;
}
ul.simplePagerNav li.currentPage a {
color: #fff;
}
table.pageme {
border-collapse: collapse;
border: 1px solid #ccc;
}
table.pageme td {
border-collapse: collapse;
border: 1px solid #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("ul.pagination1").quickPagination({pagerLocation:"both",pageSize:"12"});
});
</script>
<ul class="pagination1">
<? for ($i=0; $i<count($list); $i++) { ?>
<li>
<?
$file = $list[$i][file][0][path] .'/'. $list[$i][file][0][file];
echo $list[$i]['icon_reply'] . " ";
echo "<a href='{$list[$i]['href']}'>";
echo "<img src='$file' width='185' border='0' height='135'>";
echo "<br />";
if ($list[$i]['is_notice'])
echo "<font style='font-family:돋움; font-size:9pt; color:#2C88B9;'><strong>{$list[$i]['subject']}</strong></font>";
else
echo "<font style='font-family:돋움; font-size:9pt; color:#6A6A6A;'>{$list[$i]['subject']}</font>";
echo "</a>";
if ($list[$i]['comment_cnt'])
echo " <a href=\"{$list[$i]['comment_href']}\"><span style='font-family:돋움; font-size:8pt; color:#9A9A9A;'>{$list[$i]['comment_cnt']}</span></a>";
// if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
// if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }
echo " " . $list[$i]['icon_new'];
echo " " . $list[$i]['icon_file'];
echo " " . $list[$i]['icon_link'];
echo " " . $list[$i]['icon_hot'];
echo " " . $list[$i]['icon_secret'];
?>
</li>
<? } ?>
</ul>
오류 주소 :
grapedw님께서 올려주신 최근글 소스로 갤러리 최신글로 변경하여 작업중에 있습니다.
소스대로 하면 한개씩 세로로 정렬이 주욱 되는데요
가로갯수를 4개씩 나오도록 정렬할 수 있을까요?
답변 부탁드리겠습니다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>
<script src="<?=$latest_skin_path?>/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="<?=$latest_skin_path?>/jquery.quick.pagination.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="<?=$latest_skin_path?>/styles.css">-->
<style>
h1, h2,ul {
clear: both;
}
ul.pagination1 li:hover,
ul.pagination2 li:hover,
ul.pagination3 li:hover {
background-color: #ffffff;
}
ul.pagination1 li,
ul.pagination2 li,
ul.pagination3 li {
list-style-type:none;
font-family: dotum;
background-color: #ffffff;
font-size: 12px;
color: #fff;
line-height: 1;
width: 600px;
margin-bottom: 1px;
list-style:none;
border:1px solid #EFEFEF;
float: left;
margin:0px;
position:relative;
display:inline;
}
ul.red {
outline:10px solid red;
}
ul.simplePagerNav li{
display:block;
float: left;
padding: 10px;
margin-bottom: 10px;
font-family: georgia;
font-size:14px;
border:1px solid #fde2ca
}
ul.simplePagerNav li a{
color: #333;
text-decoration: none;
}
li.currentPage {
background: red;
background: #FF9500;
}
ul.simplePagerNav li.currentPage a {
color: #fff;
}
table.pageme {
border-collapse: collapse;
border: 1px solid #ccc;
}
table.pageme td {
border-collapse: collapse;
border: 1px solid #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("ul.pagination1").quickPagination({pagerLocation:"both",pageSize:"12"});
});
</script>
<ul class="pagination1">
<? for ($i=0; $i<count($list); $i++) { ?>
<li>
<?
$file = $list[$i][file][0][path] .'/'. $list[$i][file][0][file];
echo $list[$i]['icon_reply'] . " ";
echo "<a href='{$list[$i]['href']}'>";
echo "<img src='$file' width='185' border='0' height='135'>";
echo "<br />";
if ($list[$i]['is_notice'])
echo "<font style='font-family:돋움; font-size:9pt; color:#2C88B9;'><strong>{$list[$i]['subject']}</strong></font>";
else
echo "<font style='font-family:돋움; font-size:9pt; color:#6A6A6A;'>{$list[$i]['subject']}</font>";
echo "</a>";
if ($list[$i]['comment_cnt'])
echo " <a href=\"{$list[$i]['comment_href']}\"><span style='font-family:돋움; font-size:8pt; color:#9A9A9A;'>{$list[$i]['comment_cnt']}</span></a>";
// if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
// if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }
echo " " . $list[$i]['icon_new'];
echo " " . $list[$i]['icon_file'];
echo " " . $list[$i]['icon_link'];
echo " " . $list[$i]['icon_hot'];
echo " " . $list[$i]['icon_secret'];
?>
</li>
<? } ?>
</ul>
댓글 전체
<ul class="pagination1">
<li>
<?
for ($i=0; $i<count($list); $i++) {
$file = $list[$i][file][0][path] .'/'. $list[$i][file][0][file];
echo $list[$i]['icon_reply'] . " ";
echo "<a href='{$list[$i]['href']}'>";
echo "<img src='$file' width='185' border='0' height='135'>";
echo "<br />";
if ($list[$i]['is_notice'])
echo "<font style='font-family:돋움; font-size:9pt; color:#2C88B9;'><strong>{$list[$i]['subject']}</strong></font>";
else
echo "<font style='font-family:돋움; font-size:9pt; color:#6A6A6A;'>{$list[$i]['subject']}</font>";
echo "</a>";
if ($list[$i]['comment_cnt'])
echo " <a href="{$list[$i]['comment_href']}"><span style='font-family:돋움; font-size:8pt; color:#9A9A9A;'>{$list[$i]['comment_cnt']}</span></a>";
// if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
// if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }
echo " " . $list[$i]['icon_new'];
echo " " . $list[$i]['icon_file'];
echo " " . $list[$i]['icon_link'];
echo " " . $list[$i]['icon_hot'];
echo " " . $list[$i]['icon_secret'];
if($i%4 == 0)
echo "</li><li>";
}
?>
</ul>
그리고 css나 style로 이미지 사이즈 맞춰주세요.
<li>
<?
for ($i=0; $i<count($list); $i++) {
$file = $list[$i][file][0][path] .'/'. $list[$i][file][0][file];
echo $list[$i]['icon_reply'] . " ";
echo "<a href='{$list[$i]['href']}'>";
echo "<img src='$file' width='185' border='0' height='135'>";
echo "<br />";
if ($list[$i]['is_notice'])
echo "<font style='font-family:돋움; font-size:9pt; color:#2C88B9;'><strong>{$list[$i]['subject']}</strong></font>";
else
echo "<font style='font-family:돋움; font-size:9pt; color:#6A6A6A;'>{$list[$i]['subject']}</font>";
echo "</a>";
if ($list[$i]['comment_cnt'])
echo " <a href="{$list[$i]['comment_href']}"><span style='font-family:돋움; font-size:8pt; color:#9A9A9A;'>{$list[$i]['comment_cnt']}</span></a>";
// if ($list[$i]['link']['count']) { echo "[{$list[$i]['link']['count']}]"; }
// if ($list[$i]['file']['count']) { echo "<{$list[$i]['file']['count']}>"; }
echo " " . $list[$i]['icon_new'];
echo " " . $list[$i]['icon_file'];
echo " " . $list[$i]['icon_link'];
echo " " . $list[$i]['icon_hot'];
echo " " . $list[$i]['icon_secret'];
if($i%4 == 0)
echo "</li><li>";
}
?>
</ul>
그리고 css나 style로 이미지 사이즈 맞춰주세요.
ul.pagination1 li,
ul.pagination2 li,
ul.pagination3 li {
list-style-type:none;
font-family: dotum;
background-color: #ffffff;
font-size: 12px;
color: #fff;
line-height: 1;
width: 600px;
margin-bottom: 1px;
list-style:none;
border:1px solid #EFEFEF;
float: left;
margin:0px;
position:relative;
display:inline;
}
위에서 width:600px 를 현재 전체 가로에 나누기 4 하셔서 입력하시고요 만약 전체가 800이시면 200px 로 잡아주시면 되는데 혹 border 문제로 190px 로 잡아 주시면 됩니다
ul.pagination2 li,
ul.pagination3 li {
list-style-type:none;
font-family: dotum;
background-color: #ffffff;
font-size: 12px;
color: #fff;
line-height: 1;
width: 600px;
margin-bottom: 1px;
list-style:none;
border:1px solid #EFEFEF;
float: left;
margin:0px;
position:relative;
display:inline;
}
위에서 width:600px 를 현재 전체 가로에 나누기 4 하셔서 입력하시고요 만약 전체가 800이시면 200px 로 잡아주시면 되는데 혹 border 문제로 190px 로 잡아 주시면 됩니다
감사합니다!