1

글타래: 흠...punbb에 대해서 질문좀해도 될까요..;;

여기..요즘 잘 안열리던대..무슨일 잇으신가요?ㅠㅠ
질문좀 드릴께요.

어디다 질문드렸엇는대 답변이 안올라와서 다시올려요
링크 http://forum.standardmag.org/viewtopic.php?id=3298

질문 씀:

죄송들합니다 .. 전혀 주제와 다른 글들을 올리내요 정말 죄송합니다.
마땅하게 .. 도움을 요청할때가 없어서 질문드립니다 ^^;;

http://popotz.shworks.com/forum/index.php 여기 보시면 아시겠지만 맨 아래

  새로운 글      일반 글      고정된 글      잠긴 글      이동된 글

이 기능을 추가하려 합니다.. main.tpl 수정하고 있는대 그냥 테이블식으로 만들어서 넣으면 첫 화면에는 이상없지만
포럼에 들어가게 되면 디자인이 망가지게 되더군요 .. css를 설정해줘야 하나..도움좀 주세요^^;;

버전은 1.3 최신버전입니다.

답변 씀:

디자인 깨지는것을 모르겠는데 정확히 어떤부분인가요?

질문
http://fs.textcube.com/blog/6/69183/attach/XJR9bZEHx0.jpg
첫 이미지 입니다. 예 입니다.
main.tpl을 수정해 테이블을 만들어 추가를 했습니다.

<!-- forum_qpost -->
<table border="1" cellspacing="0" width="860" bordercolordark="black" bordercolorlight="black" align="center">
    <tr>
        <td width="860" bgcolor="#FBFBFB"><p align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG style="VERTICAL-ALIGN: middle"
alt="New posts" src="http://popotz.shworks.com/forum/img/XmasIani/icon_new.png" minmax_bound="true">&nbsp;&nbsp;새로운 글&nbsp;&nbsp;&nbsp;
<IMG style="VERTICAL-ALIGN: middle" alt="No new posts"
src="http://popotz.shworks.com/forum/img/XmasIani/icon.png" minmax_bound="true">&nbsp;&nbsp;일반 글&nbsp;&nbsp;&nbsp; <IMG
style="VERTICAL-ALIGN: middle" alt="Sticky thread" src="http://popotz.shworks.com/forum/img/XmasIani/sticky.png"
minmax_bound="true">&nbsp;&nbsp;고정된 글&nbsp;&nbsp;&nbsp; <IMG style="VERTICAL-ALIGN: middle"
alt="Closed thread" src="http://popotz.shworks.com/forum/img/XmasIani/closed.png" minmax_bound="true">&nbsp;&nbsp;잠긴 글&nbsp;&nbsp;&nbsp;
<IMG style="VERTICAL-ALIGN: middle" alt="Moved thread"
src="http://popotz.shworks.com/forum/img/XmasIani/redirect.png" minmax_bound="true">&nbsp;&nbsp;이동된 글</p></td>
    </tr>
</table>

<!-- forum_info -->


css 를 따로 추가없이 테그로만 했습니다.

http://fs.textcube.com/blog/6/69183/attach/XBBDaYXTeV.jpg
두번째 보시면 아시겠지만..테이블이 아래 테이블과 붙어버립니다.

1번 그림처럼 포럼을 선택해도 테이블 간격이 일정하게 할수없을까요?..
테이블이 붙지않고 간격유지할수 잇을까요..? 도와주세요 ㅠㅠ

asg88씨가 수정함 (2010-05-13 01:06 AM)

2

댓글: 흠...punbb에 대해서 질문좀해도 될까요..;;

css에서 table에 적당한 margin-top 값을 주시면 될 것 같습니다.
그런데, 표준도 아니고 접근성도 떨어지는 table로 layout을 짜지 마시고 div으로 처리하시면 더 좋겠네요.

+ = ²

3

댓글: 흠...punbb에 대해서 질문좀해도 될까요..;;

참고하시라고, 표준에 맞게 만들어봤습니다.
먼저 html은 이렇습니다.

<div id="legend">
    <ul>
        <li id="new">새로운 글</li><li id="general">일반 글</li><li id="sticky">고정된 글</li><li id="closed">잠긴 글</li><li id="moved">이동된 글</li>
    </ul>
</div>

아주 단순하죠.

아래는 CSS 정의입니다.

#legend {width:100%; border: 1px solid #999; margin:1em auto 0;}
#legend ul {width: 425px; margin: 5px auto; padding: 0;}
#legend ul li {list-style: none; display: inline-block; *display: inline; padding: 0 5px 0 20px; width: 60px; font-size: 12px; text-align: center;}
li#new {background: transparent url(new.png) no-repeat center left;}
li#general {background: transparent url(general.png) no-repeat center left;}
li#sticky {background: transparent url(sticky.png) no-repeat center left;}
li#closed {background: transparent url(closed.png) no-repeat center left;}
li#moved {background: transparent url(moved.png) no-repeat center left;}

주의하실 것은, li에 정의되어 있는 배경 그림의 이름을 실제 사용하신 것으로 바꾸셔야 합니다.
나머지 margin이나 padding 값은 layout에 맞게 조절해 주시면 될 듯하네요.

+ = ²