묻고답하기
xe_official 기본 레이아웃의 content 부분을 변경하고 싶습니다.
2008.03.26 10:50
아래에 첨부된 이미지처럼 본문{$content}[게시판삽입] 들어가는 부분을
2개의 파트로 나눠 사용해 보고 싶은데
능력부족으로 부득히 고수님의 도움을 받고자 합니다.
/zbxe/layouts/xe_official/layout.html
/zbxe/layouts/xe_official/css/default.css파일을 어떻게 고쳐야 하는지요?
댓글 9
-
UNOPIA
2008.03.26 16:30
-
googlexe
2008.03.26 19:35
UNOPIA님~
우선 답변주셔서 진심으로 감사드립니다.
설명해주신것처럼 따라해보았는데 너무 초보라서 그런지
왼쪽메뉴부분과 contents부분이 바짝 달라붙는 결과가 생기더군요.
추가선언부분을
예를들어 columnRight1로 이름을 붙이고
columnRight 넓이를 600px으로
columnRight1 넓이를 170px으로 했을경우에 아래처럼 소스를 적용하였더니
메뉴부분과 간격이 너무 달라붙는 결과가 나타나더군요.
/* Site Layout - Column Right */
#columnRight { width:600px; float:left; overflow:hidden;}
#visualArea { width:600px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:10px; margin-right:10px;}
#content { width:100%; overflow:hidden;}/* Site Layout - Column Right1 */
#columnRight1 { width:170px; float:left; overflow:hidden;}
#visualArea { width:170px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:10px; margin-right:10px;}
#content1 { width:100%; overflow:hidden;}
위 소스를 보시고 잘못된부분을 수정하여 주시면 고맙겠습니다. -
UNOPIA
2008.03.26 23:17
#content { width:100%; overflow:hidden;}
100%를 95나 90정도로 해보세요. -
googlexe
2008.03.27 05:55
고맙습니다^^
답변주신 내용대로
#content { width:100%; overflow:hidden;} → #content { width:90%; overflow:hidden;}
#content { width:100%; overflow:hidden;} → #content { width:95%; overflow:hidden;}
90%와 95%로 각각 변경하여 테스트해보았으나
결과는 전혀 변화가 없습니다.
죄송스럽지만 혹시 UNOPIA님께서 직접 테스트를 해보시고 답글을 주신것이라면
제가 혹시나 소스를 잘못 적용 한 것인지요? -
UNOPIA
2008.03.27 09:28
죄송해요..해보지않고 그냥 말씀드려서..저도 초보라..
제가 해보니깐 이부분을 수정하면 되네요.
/* Site Layout - Column Right */
#columnRight { width:600px; float:left; overflow:hidden;}
#visualArea { width:600px; height:200px; background:#f5f5f5; margin-bottom:2.5em; position:relative; left:10px; margin-right:10px;}
#content { width:100%; overflow:hidden;}
이미 그 위에서 전체 사이즈를 지정하였기 때문에 이부분을 수정하고 float를 가운데로 맞추시면 될것같아요.
div랑 테이블이랑 개념 혼동을 하여서..어렵네요..^^ -
goolexe
2008.03.27 11:40
답변주신 소스내용은 이미 제가 두번재 댓글에서 언급하었던 내용이며
메뉴부분과 간격이 너무 달라붙는 결과가 나타났던 소스였었습니다.
이미 제가 올려서 문제가 되었던 소스내용을
답변으로 주시니 무슨 말씀이신지 이해하기가 곤란합니다..gif)
-
UNOPIA
2008.03.27 13:06
600을 590이나 580정도로 해보세요.. 라는 뜻이었습니다. 알맞게 수정하시라고.. 라는 뜻입니다. ^^ -
googlexe
2008.03.27 14:35
UNOPIA님!
답변주신 소스 내용만으로는
메뉴부분과 게시판 사이의 간격은 아무래도 해결이 되질못할듯 싶네요.
css에 해박하신 고수님들께서 위에 올린 질문글을 보시고 댓글로 해결책을 제시해 주신다면
다른 여러 회원분들에게도 도움이 될것이라 기대해봅니다.
아무튼 장시간 답변주셔서 감사드립니다.^^ -
Dustwo
2008.04.02 20:25
margin-left 속성을 줘보세요.
왼쪽 공간을 얼마만큼 띄우라는 것인데,
#columnRight { margin-left:5px;
이런형식으로.
해보진 않았지만 원리상으로 예상하자면
defualt.css 파일에 아랫 부분이 게시판 공간을 선언하는 구문입니다.
/* 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;}
770px으로 되어 있죠 이부분은 650정도로 줄이고
원하시는 내용을 삽입할 공간을 추가로 선언하는 것입니다.
그리고 선언하신 것은 layout.html에서 지정해 줘야 하구요.
추가된 공간안에 원하는시는 내용을 직접 추가하시면 될껍니다..
layout.html부분은
<div id="columnRight">
<!-- 컨텐츠 시작 -->
{$content}
</div>
이것이 게시판 영역을 불러온 것이구요 .
<div id="추가선언NAME">
내용
</div>
추가된 영역은 추가 선언한 id를 넣으시면 될껍니다.
저도 해본건 아니라서.. 제 질문에 답변기다리다 함 적어 봤습니다. 지송..