웹마스터 팁

XE를 사용하면서 불편한 것 중 하나가 고정 사이즈입니다.
980px에 본문은 770px로 고정 되어있죠.

그러다 보니 와이드 모니터나 해상도가 높은 모니터를 사용하면 1/3 에서 1/2의 화면은 그냥 하얀 바탕만 보여 버려지는 화면이 됩니다.
브라우저의 창크기가 커지면 본문의 가로 영역도 길어지고 브라우저를 작게하면 같이 작아지면 좋겠죠.

삽질에 삽질을 거듭해 수정을 해봤습니다.

사용한 레이아웃은 XE_Official 레이아웃을 기준으로 사용하였습니다.
버젼은 1.2입니다.
IE6, IE7, 파폭에서 테스트 해봤습니다.
IE8은 사이즈가 좀 고정으로 나오는 것 같습니다. // 다른 사람 PC에서 잠깐 본 정도라;;

1. /xe/layouts/xe_official/css/default.css
#bodyWrap { width:980px; margin:1.5em auto 0 auto; }
-> #bodyWrap { width:99%; margin:10px auto; }    // 크기는 좌우 여백 만들기 위해 99% margin은 상하 10px 좌우 auto로 했습니다.


#header { position:relative; width:980px; height:120px; background:url(../images/default/bgHeader.jpg) no-repeat right top; margin-bottom:10px; z-index:99;}
-> #header { position:relative; width:100%; height:85px; background:url(../images/default/bgHeader2.jpg) no-repeat right top; margin-bottom:10px; z-index:99;}     // header의 width 는100%로 바꾸고 배경이미지는 따로 하나 만들었습니다.



#contentBody { position:relative; width:980px; padding-bottom:30px; overflow:hidden; background:url(../images/default/bgContentBody.gif) repeat-y left top; border-bottom:1px solid #dddddd;}
->#contentBody {width:100%; padding-bottom:30px; overflow:hidden; background:#FFFFFF;}
 // width는 100% 배경은 그냥 단색으로 했습니다.


#columnRight { width:770px; float:right; overflow:hidden;}
-> #columnRight {margin:10px 10px 10px 210px; overflow:hidden;}
// width는 설정하지 않았고  margin 왼쪽 margin을 210을 줬습니다. 왼쪽 로그인 폼 + 왼쪽 메뉴의 사이즈가 201px이라 210px을 마진을 줬습니다.

===============================================================================
요기까지 하시면 기본 레이아웃 에서는 정상적으로표시가 됩니다.
다만 IE6 에서 게시판 사용시 게시판의 header 아래 부분이 밑으로밀리는 현상이 있어 추가 수정을 하였습니다.

2. /xe/modules/board/skins/xe_board/css/common.css
.boardInformation { width100%; clear:both; margin:5px 0 2px 0; overflow:hidden; color:#666666;}
->.boardInformation { width:99%; margin:5px 0 2px 0; overflow:hidden; color:#666666;}


.boardRead { margin:10px  0 10px 0; }
->.boardRead {width:99%; margin:10px  0 10px 0; }

.boardList { width:100%; border:1px solid #e0e1db; border-top:none; overflow:hidden; }
->.boardList { width:99%; border:1px solid #e0e1db; border-top:none; overflow:hidden; }

상단부분과 내용보기, 내용리스트의 길이를 99%로 수정해주니 제대로 올라가더군요.

아무튼 MS는 IE6,7,8 이 왜 다 설정이 다른건지 미치겠네요 ㅡㅡ;;

IE6,7과 FF만 테스트 해본 내용입니다.
(코더가 아니라 레이어로 코딩하기 힘드네요ㅠ .ㅠ)


// 추가   :
WIKI와 ISSUETRACKER도 board 모듈처럼 별도로 css를 수정해야 되는 것 같습니다.

근데 나는 왜  ... 왜 추가 앞에 //로  주석처리를 하는거지 ㅡㅡ??

제목 글쓴이 날짜
XE CDN 서비스 중단에 대응하는 CDN 주소 변경법 (자신의 CDN서버로) [2] Stellar 2013.11.08
XE 1.7.3.X 메뉴얼 [2] 도라미 2013.11.08
관리자만 글 등록이 되고, 일반 유저는 글 등록버튼을 누르면 아무런 반응이 없을 때. [1] whitemind 2013.11.07
페이지로딩시 메모리 부족이란 오류메시지가 뜰때... 똑디 2013.11.07
xe 1.7에서 이미지프로세스 상단 깨지는것~ [2] 착한악마 2013.11.07
에디터가 활성화 되지 않을시... [1] 똑디 2013.11.06
게시판 가로사이즈 조절과 가운데 정렬 [1] Filmfx 2013.11.02
회원가입 확장모듈 사용중 캡챠 실패시 재동의 안하기 말똥이 2013.10.31
회원가입 확장모듈, 환영쪽지를 끄면 메일이 안날아가는 문제수정. Xiso 2013.10.31
XE1.7 사이트맵에서 권한설정시 특정그룹을 선택해 등록하면 권한이 등록 안 되는 버그 수정법 (추가) sejin7940 2013.10.30
익명 게시판을 사용중일때 이미지 썸내일표시. 말똥이 2013.10.27
xpresseditor에 한글 글꼴 추가 [2] YJSoft 2013.10.25
기본 URL 설정 팁 [4] EvangelineA.K.Macdowell 2013.10.25
.htaccess 파일 관련 팁(웹 사이트 퍼포먼스 향상 및 트래픽 절감 효과) [21] file 서시빈목 2013.10.22
스케치북 1.7.2.1 게시판 닉네임 짤림 오류 임시 수정법 귀머거리하늘 2013.10.21
스케치북 1.7.2.1 게시판 상단 내용 오류 수정 방법 귀머거리하늘 2013.10.21
.htaccess 에서 캐시 설정(?) [1] socialskyo 2013.10.20
통합게시판 만들기 [30] Lansi 2013.10.20
확장 컴포넌트 아이콘 출력 하기 [2] file 귀머거리하늘 2013.10.18
[주옥시리즈] 내글 모니터링, 작성글 앞으로 뺴기 [6] socialskyo 2013.10.18