위에서 보면 빨간색 columnLeft 부분의 설정이 상호 일치해야 하며, 파란색 columnRight 부분의 설정이 상호 일치해야 합니다.
말로 풀어서 설명을 드리자면 Content Body 라는 폭980px의 큰 테이블안에 좌측(columnLeft)에 폭770px 크기의 작은 테이블을 만들어 컨텐츠( {$content})를 배치하고. 우측(columnRight)에 폭200px 크기의 작은 테이블을 만들어 우측 삽입코드를 넣는다는 말입니다.
여기서 980 > 770+200 으로 여유를 두는 이유는 좌측테이블과 우측테이블의 간격을 조절하기 위해서 margin을 주었기 때문입니다.
그럼 제가 고쳐 드리기 전에는 어떤 형태 였나하면요. layout.html에서 columnLeft여야 하는 부분이 columnRight로 적혀 있어서 css와 상호 설정이 잘못되어 있어구요, columnRight이 부분은 mainright로 되어 있었는데 css에 그 부분이 설정은 되어 있었지만 옳게 되어 있지를 않았습니다. 그리고 float:left; float:right; 이 부분도 설정이 잘 못 되어 둘다 right로 되어 있었던 것 같군요. 큰테이블에서 작은테이블을 왼쪽에 배치할려면 float:left; 오른쪽에 배치할려면 float:right; 로 설정을 해야합니다.
참고로 columnLeft, columnRight 이부분은 소스 작성자가 임의로 준 설정의 이름입니다. 즉 작성자가 마음대로 이름을 줘도 됩니다. 그러나 { 내용 } 이 부분은 테이블(Div, table)의 설정을 결정하는 명령어 입니다. 이건 작성자가 임의로 할 수 있는 부분이 아니라 정확한 명령어를 알아서 작성해 주어야 제대로 틀이 만들어 집니다. 이 명령어들은 Zbxe소스들 안에 수 없이 많이 들어 있습니다. 궁금하실때 마다 검색을 하시어 용도를 알아서 메모해 두시면 많은 도음이 될 것입니다.
질문에 대한 충분한 답변이 되었는지를 모르겠네요. 열심히 들여다 보면 조만간에 화면이 그려지실 것 입니다. 당구 처음 배울때 천장이 당구다이 같이 보이 듯이요...
바람소님 이제 홈에서도 뵙네요. 반갑습니다.
님의 홈을 아까 보고 xe_jso_sub 를 손 봐 드렸는데요,
제가 본 결과를 간단히 설명드리면,
layout.html과 css사이의 설정이 잘못되어 있어서 그렇더군요.
<div id="contentBody">
<div id="columnLeft">
<!-- 컨텐츠 시작 -->
- 중간생략 -
{$content}
<!-- 컨텐츠 끝 -->
</div>
<div id="columnRight">
<!-- 우측 삽입코드 시작 -->
- 중간 생략 -
<!-- 우측 삽입코드 끝 -->
</div>
</div>
/* Site Layout - Content Body */
#contentBody { position:relative; width:980px; padding-bottom:10px; overflow:hidden; background:url(../images/default/bgContentBody.gif) repeat-y left top; border-bottom:1px outset #00ff00;}
/* Site Layout - Column Left */
#columnLeft { position:relative; width:770px; float:left; margin-right:5px; border:1px solid #8b8989;}
#columnLeft .mask { width:780px; height:5px; background:#ffffff; display:block; clear:both;}
/* Site Layout - Column Right */
#columnRight { width:200px; float:right; overflow:hidden;}
#visualArea { width:200px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:-15px; margin-right:-15px;}
#content { width:100%; overflow:hidden;}
위에서 보면
빨간색 columnLeft 부분의 설정이 상호 일치해야 하며,
파란색 columnRight 부분의 설정이 상호 일치해야 합니다.
말로 풀어서 설명을 드리자면
Content Body 라는 폭980px의 큰 테이블안에
좌측(columnLeft)에 폭770px 크기의 작은 테이블을 만들어 컨텐츠( {$content})를 배치하고.
우측(columnRight)에 폭200px 크기의 작은 테이블을 만들어 우측 삽입코드를 넣는다는 말입니다.
여기서 980 > 770+200 으로 여유를 두는 이유는 좌측테이블과 우측테이블의 간격을 조절하기 위해서 margin을 주었기 때문입니다.
그럼 제가 고쳐 드리기 전에는 어떤 형태 였나하면요.
layout.html에서 columnLeft여야 하는 부분이 columnRight로 적혀 있어서 css와 상호 설정이 잘못되어 있어구요,
columnRight이 부분은 mainright로 되어 있었는데 css에 그 부분이 설정은 되어 있었지만 옳게 되어 있지를 않았습니다.
그리고 float:left; float:right; 이 부분도 설정이 잘 못 되어 둘다 right로 되어 있었던 것 같군요.
큰테이블에서 작은테이블을 왼쪽에 배치할려면 float:left; 오른쪽에 배치할려면 float:right; 로 설정을 해야합니다.
참고로 columnLeft, columnRight 이부분은 소스 작성자가 임의로 준 설정의 이름입니다. 즉 작성자가 마음대로 이름을 줘도 됩니다.
그러나 { 내용 } 이 부분은 테이블(Div, table)의 설정을 결정하는 명령어 입니다. 이건 작성자가 임의로 할 수 있는 부분이 아니라 정확한 명령어를 알아서 작성해 주어야 제대로 틀이 만들어 집니다.
이 명령어들은 Zbxe소스들 안에 수 없이 많이 들어 있습니다.
궁금하실때 마다 검색을 하시어 용도를 알아서 메모해 두시면 많은 도음이 될 것입니다.
질문에 대한 충분한 답변이 되었는지를 모르겠네요.
열심히 들여다 보면 조만간에 화면이 그려지실 것 입니다.
당구 처음 배울때 천장이 당구다이 같이 보이 듯이요...
그럼 너무 빠지지 마시고 적당히 쉬어가면서 하세요.