묻고답하기
꼭 부탁 합니다............
2008.09.15 03:35
안녕하세요...
도움 바랍니다.
ZBXE 공식 사이트 레이아웃 ver 0.1 (xe_official) 을 보면
대략 
이렇게 좌우로 나위어 졌죠...이것을 
이렇게 좌, 중간,우측 이렇게 만들었습니다.
이하는 CSS하고 layout.html 에서 수정한것인데...맞는가 봐주세요...=.=;;;
CSS
워낙소스:
/* Site Layout - Content Body */
#contentBody { position:relative; width:980px; padding-bottom:30px; overflow:hidden; background:url(../images/white/bgContentBody.gif) repeat-y left top; border-bottom:1px solid #dddddd;}
/* Site Layout - Column Left */
#columnLeft { position:relative; width:201px; float:left;}
#columnLeft .mask { width:201px; height:5px; background:#ffffff; display:block;}
생략
/* Site Layout - Column Right */
#columnRight { width:770px; float:right; overflow:hidden;}
#visualArea { width:770px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:-15px; margin-right:-15px;}
#content { width:100%; overflow:hidden;}
수정후소스:
/* Site Layout - Content Body */
#contentBody { position:relative; width:980px; padding-bottom:30px; overflow:hidden; background:url(../images/white/bgContentBody.gif) repeat-y left top; border-bottom:1px solid #dddddd;}
/* Site Layout - Column Left */
#columnLeft { position:relative; width:201px; float:left;}
#columnLeft .mask { width:201px; height:5px; background:#ffffff; display:block;}
생략
/* Site Layout - Column Right */
#columnRight {position:relative; top:0px; left:10px; width:590px; float:Left; overflow:hidden;}
#visualArea { width:590px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:-15px; margin-right:-15px;}
#content { width:100%; overflow:hidden;}
/* Site Layout - Column Right2 */
#columnRight2 { overflow:hidden; width:170px; float:right;}
#columnRight2 .mask { width:170px; height:5px; background:#ffffff; display:block;}
※파란색 부분이 수정하거나 추가한 소스 입니다.
layout.html 는
<div id="columnRight">
</div>
아래에
<div id="columnRight2">
</div>
을 추가 하였습니다.
고수님들 어디 부족된점이거나...이상한점 있으면 지적해주세요....
일단 지금 상태처럼 수정할것은 수정하고 추가할것은 추가하니 좌측, 중간,우측 이렇게 잘나오긴 합니다.
그런데....#columnRight {position:relative; top:0px; left:10px; width:590px; float:Left; overflow:hidden;}에서position:relative; top:0px; left:10px;
을 넣으면,,,현재위치 출력이 표시 되지 않습니다. 빼버리면...중간의 게시판이 좌측에 떡~~~붙어버리고요...워낙은 좌측하고 우측 사이에
10정도의 간격이 있어야하는데....
휴......설명충분하게 하느라고 하였는데....잘되였는지....하여튼 아시는 분이 계시면 잘 부탁 드립니다.
현재위치 출력위젯은 http://www.zeroboard.com/zbxe_pds_prog_widget/16309758사용하였습니다.
이상 잘 부탁 드립니다......... 꾸벅~
