묻고답하기
이 라운드박스는 어떻게 코딩하면 좋을까요?
2008.12.20 04:04
위와 같은 아웃로그인 스킨을 만들어 보려고 합니다. CSS를 이용하여 DIV로 꾸며보려고 하는데
IE에서와 FF 등에서의 표현이 조금 달라서 어떻게 코딩해야 두 브라우저 간에 똑같이 보여질 수 있을까 하여 질게에 포스팅합니다.
방법1.
각 모서리를 이미지로 저장 후 9분할 후 <div> 태그를 한 줄에 3칸씩 넣는다.
문제점) height:2px로 잡아줬는데도 빈 칸이라서 높이가 브라우저 글자 크기와 같게 나타난다.
해결책) 스타일 시트에 .none {font-size:1px; font-family:verdana; line-height:1%;} 와 같은 css 코드를 넣어준다.
방법2.
상단,가운데,하단 3분할로 이미지를 잘라준다.
문제점) 상단과 하단은 이미지로 모두 처리하고 가운데 부분은 border-left, border-right 로 1px씩 잡아주니깐
FF에서는 정상적으로 표시되는데 반해, IE 에서는 width 값안에서 border가 표시되어 2px이 모자른다.
해결책) IE hack을 사용하여 _width 값을 2px 더 추가한 값을 넣어준다.
방법3.
3분할을 하든지 9분할을 하든지 그냥 테이블로 나타낸다.
방법1로 하다가 코딩이 살짝 복잡해보이길래 방법2로 해봤습니다.
어떻게 하는 것이 가장 깔끔한 코딩방법일까요?;;
도움 준 링크들;;
http://miniwini.com/miniwinis/bbs/index.php?bid=share&m=search&mode=read&id=295&p=1&keyword=빈&scale=1&op=and&idx=2
http://html.nhndesign.com/blog/?p=86
↓ 방법2의 소스 코드 (div 코드 부분이 수정할 때는 보이는데 올리고 나니깐 안 보이네요. 참고해주세요.)
#outlogin_eond_gateway_wrap {width:332px;height:266px;border:0px solid black;margin:0px;padding:0px;}
.top {background-image: url(./bg_edge_top.png);height:2px;}
.login_box {border-left:1px solid #EBEBEB;border-right:1px solid #EBEBEB;float:left;background-image: url(./bg_vertical_line.png);width:330px;height:182px;_width:332px;}
.bottom {clear:both:width:332px;height:80px;}
.none {font-size:1px; font-family:verdana; line-height:1%;}
</style>
<div id=outlogin_eond_gateway_wrap>
<div class="top none"></div>
<div class="login_box none"></div>
<div class="bottom none">< img src=loginform_bottom.png> </div>
</div>
↓ 하다만 방법1의 소스 코드 (div 코드 부분이 수정할 때는 보이는데 올리고 나니깐 안 보이네요. 참고해주세요.)
<style>
#outlogin_eond_gateway_wrap {width:404px;height:266px;border:0px solid black;margin:0px;padding:0px;}
.lt {float:left;background-image: url(./bg_edge_lt.png);width:2px;height:2px;margin:0px;padding:0px;}
.t {float:left;Background-color:FDFDFD;width:400px;height:2px;margin:0px;padding:0px;border-top:1px solid EBEBEB;}
.rt {float:left;background-image: url(./bg_edge_rt.png);width:2px;height:2px;margin:0px;padding:0px;}
.l {float:left;background-image: url(./bg_vertical_line.png);width:2px;height:262px;border-left:1px solid EBEBEB;margin:0px;padding:0px;}
.login_box {float:left;background-image: url(./bg_vertical_line.png);width:400px;height:262px;margin:0px;padding:0px;}
.r {float:left;background-image: url(./bg_vertical_line.png);width:2px;height:262px;border-right:1px solid EBEBEB;margin:0px;padding:0px;}
.lb {float:left;background-image: url(./bg_edge_lb.png);width:2px;height:2px;margin:0px;padding:0px;}
.b {float:left;Background-color:F1F1F1;width:400px;height:2px;border-bottom:1px solid EBEBEB;margin:0px;padding:0px;}
.rb {float:left;background-image: url(./bg_edge_rb.png);width:2px;height:2px;margin:0px;padding:0px;}
</style>
<div id=outlogin_eond_gateway_wrap>
<div>
<div class=lt></div><div class=t></div><div class=rt></div>
</div>
<div>
<div style="display:none;clear:both;height:0px;margin:0px;padding:0;"></div>
<div>
<div class=l></div><div class=login_box></div><div class=r></div>
</div>
<div style="display:none;clear:both;height:0px;margin:0px;padding:0;"></div>
<div>
<div class=lb></div><div class=b></div><div class=rb></div>
</div>
</div>
댓글 0
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
관리자모드 | 제로보드 스킨적용문제..... [2] | 2008.12.19 by 느까끼 |
채국만348 | 폼메일을 무료로 다운받아 사용하고 싶은데요 제로보드에 있나요? [1] | 2008.12.19 by 느까끼 |
zolli | xe로 업데이트시 문제발생... ㅠㅠ [5] | 2008.12.19 by zolli |
뮤땅 |
알려주세요 ㅠㅠ
[4]
![]() | 2008.12.19 by 뮤땅 |
ohtt | 홈 첫 화면에 게시물 보이게 하려면 ㅡ [1] | 2008.12.19 by 느까끼 |
박노열 |
페이지 줄간격은 어디에서 조절해야 하나요.
[3]
![]() | 2008.12.19 by 박노열 |
호루스 | 기존 홈페이지 업데이트... [5] | 2008.12.19 by 느까끼 |
광수생각2 | 모듈 동작 중단 해결책 [3] | 2008.12.19 by 느까끼 |
김창환855 | 로그인에러 [14] | 2008.12.19 by 백성찬 |
늘같이 | 1.1.2 로 업그레이드 하고 관리자 모둘의 첨부파일 관리에... | |
어울림소리 | xe 업그레이드 후에 게시판 글이 보이지 않는 현상 발생..ㅠ.ㅠ [3] | 2008.12.20 by 백성찬 |
뮤땅 |
알려주시면 감사하겠습니다 ㅠㅠ
[3]
![]() | 2008.12.20 by 백성찬 |
aflatoxin |
게시판 상단에 이미지 추가하기 질문입니다.
[5]
![]() | 2008.12.20 by hanalim |
정낙훈(xynex) |
이 라운드박스는 어떻게 코딩하면 좋을까요?
![]() | |
산골아찌 | 온라인 시험문제만들기 [1] | 2008.12.20 by 네오랑 |
영쾅킴 | 제로보드의 사진첩?? [2] | 2008.12.20 by Nzeus |
김경배479 |
설치시 DB에러
[1]
![]() | 2008.12.20 by 비나무 |
XE초보 |
위젯 스킨 수정 문의드립니다.
[1]
![]() | 2008.12.20 by 비나무 |
데미안k | 제로보드에서 파일 다운로드 할때 사람인지 확인하는 기능 없나요? [1] | 2008.12.20 by 비나무 |
꿀과메기 |
질문있습니다!!ㅋㅋ
[1]
![]() | 2008.12.20 by 비나무 |