포인트랭킹과 그 외 질문사항

포인트랭킹과 그 외 질문사항

QA

포인트랭킹과 그 외 질문사항

답변 4

본문

안녕하세요 고수형님들!

237255000_1725261406.1342.jpg

이렇게 하고싶은데 지금 제가 되있는게 

237255000_1725261460.5533.png

이렇게 되어있습니다. 위에처럼 네모난 박스처럼 하려면 어떻게 해야할까요?

237255000_1725261568.062.png

그리고 저는 왜이렇게 삐딱하게 설정이 되어있는걸까요?ㅠㅠ

237255000_1725261648.7154.png

고수님들 !! 답변해주시면 정말 감사드리겠습니다.

이 질문에 댓글 쓰기 :

답변 4

1. 현재는 너무 기초가 없으신 듯 해요. 

정렬 배치에 관한 기본 CSS를 좀 공부 후 작업해 보세요.

https://homzzang.com/b/css-254

 

2. 작업을 할 땐 각 요소의 테두리를 보이게 한 후 작업하면 펀리합니다.

해당 HTML 요소들에 아래 코드 일단 넣으신 후, 작업해 보세요.

각 요소의 색상코드를 다르게 해야 구조 파악에 용이합니다.

style="border:1px solid gray; box-sizing:border-box;"

 

3. 도저히 혼자 못하겠다 싶을 땐, 해당 URL 주소를 공개 후 도움을 구해보세요.

<!-- 위젯 시작 { -->
<?php
include_once("./_common.php");
?>
<style type="text/css">
.pl_rank{clear:both;position:relative;margin:0 auto;width:100px;padding:8px 0 5px}
.pl_rank2:after {display:block;visibility:hidden;clear:both;content:""}
.pl_rank h3{padding:0 10px;height:28px;line-height:2.4em;border:1px solid #cdd6de;background:#f2f5fc;color:#494a4a}
.pl_rank_ul{padding:3px 0 0}
.pl_rank_ul ul{float:left;width:200px;margin:0;padding:0;overflow:hidden;list-style:none}
.pl_rank_ul ul li{position:relative;line-height:18px;margin:5px 0}
.pl_rank_ul ul li .rank_bg{display:inline-block;width:17px;height:17px;margin-right:8px;border:1px solid #b3b8c0;text-align:center;color:#b3b8c0;text-indent:-1px}
.pl_rank_ul ul li .rank_bg1{border:1px solid #ed2525;color:#ed2525}
.pl_rank_ul ul li .rank_bg2{border:1px solid #3452be;color:#3452be}
.pl_rank_ul ul li .rank_point{display:inline-block;position:absolute;top:0;right:2px;font-family:verdana;color:#d83d44;font-size:10px;font-weight:bold}
</style>

<div class="pl_rank">
<b>전체 포인트 순위</b>
<div class="pl_rank_ul">
<ul>
<?php
$sql_common = " and mb_id != '{$config[cf_admin]}' ";
$rank_rows = 10; //출력 수
$sql = " select * from {$g5[member_table]} where mb_point > '{$row[mb_point]}' {$sql_common} order by mb_point desc, mb_today_login desc limit {$rank_rows} ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
    $rank = number_format($i + 1);
    //$rank_name = get_sideview($row['mb_id'], $row['mb_nick'], $row['mb_email'], $row['mb_homepage']);
    $rank_name = $row['mb_nick'];
    $point = number_format($row['mb_point']);
    if ($rank == 1) {
        $rank_bg = ' rank_bg1';
    } else if ($rank <= 3) {
        $rank_bg = ' rank_bg2';
    } else {
        $rank_bg = '';
    }
?>
    <li><span class="rank_bg<?php echo $rank_bg; ?>"><?php echo $rank; ?></span><?php echo $rank_name; ?><span class="rank_point"><?php echo $point; ?></span></li>
<?php } ?>
</ul>
  </div>
    </div>
<!-- } 위젯 끝-->

 

이렇게 되어있습니다.

 왜 됐습니다!! 됐는데 

237255000_1725263464.155.png

이게 갑자기 왜이러죠? 방문자가 포인트 순위 옆으로 달라붙었어요 ㅠㅠ

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 12
© SIRSOFT
현재 페이지 제일 처음으로