Mozilla 한국 커뮤니티

계속 질문만 올리네요..

다름이 아니라 보통 게시판에서요
밑에 페이지 네비게이션이 중앙에 오구요
그 라인에 글쓰기 버튼이 우측으로 붙어있는 디자인이요..

기왕이면 디자인 깨고 싶지 않아서 이제껏 버튼은 relative로 잡아서 했거든요
근데 그렇게 되면 버튼의 height값이 페이징부분보다 클경우 밑의 내용에 뭍혀지는 현상이 일어나거든요..

--------------------------------------------------------------------
<div style="position:relative;">
<p style="position:absolute;right:0;text-align:right;margin-top:-3px;"><a href="#"><img src="../images/bt_write.gif" alt="글쓰기" width="58" height="30" border="0" /></a> </p>
</div>
<p style="text-align:center;"><img src="../images/page_prev.gif" alt="이전페이지" width="17" height="13">123<img src="../images/page_next.gif" alt="다음페이지" width="17" height="13"></p>
<p style="border:1px solid #999;">...</p>
--------------------------------------------------------------------

그차이점만큼 페이징 부분에 여백을 주는걸로 대충 때웠는데
개발자 스타일에 따라서 1페이지일때는 아예 페이지네비게이션을 안다는 경우도 있거든요..그럴때는 또 깝깝해져서리...

다른 분들은 저런 게시판을 어떻게 짜시나요?

저는

<div class="button">
<a href="?">글쓰기</a>
</div>

<div class="pager">
<a href="?">이전</a>
<a href="?">1</a>
<a href="?">2</a>
<a href="?">3</a>
<a href="?">4</a>
<a href="?">5</a>
<a href="?">다음</a>
</div>

이렇게 하고

div.button {
height: 20px;
margin: 0 0 -20px 300px;
}

div.pager {
text-align: center;
padding: 5px 0;
}
div.pager img {
vertical-align: middle;
}

이렇게 합니다.

단, 네거티브 마진을 사용할 경우 div.button이 div.pager 를 덮을 수도 있으니 특별한 주의가 필요 합니다.