http://www.xpressengine.com/18799632

 

새로 만드는 홈피에서 좌측 메뉴 부분에 쭈욱~~~ 노란색 띠를 넣어둬야 해서요

 

저번에는 테이블태그로 어쩔 수 없이 했는데

 

DIV 안에서 해결 할 수 있는 방법이 있을 것 같아... 찾아보던 중

 

질답게시판에 이걸 찾고 해보는 중인데요...

 

 

오늘 하루 종일 해봐도 안됩니다 ㅠㅠㅠ

 

플롯 속성을 둔 하위 DIV를 품고 있는 모체 DIV 에 높이를 정확히 지정해두지 않으면... 백그라운드가 안 깔리던데요...

 

높이를 지정하면, 컨텐츠 높이가 가변이니... 어떻게 할 수가 없어지고...

 

 

이거, 헛다리 짚었나 해서... 함 물어봅니다.

 

 

되는 건가요? 혹시 이런 방법으로 불가능 하다면......

 

오늘 하루 종일 전 삽질했습니다 ㅠㅠㅠㅠㅠㅠㅠ

 

 

다시 테이블 태그를 써야하는 ....... 건가... ㅠ

 

 

 

 

 

 

 

 

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

자바 스크립트를 이래저래 쓰면 우측에 특정 레이어와 좌측의 레이어 높이를 통일시키겠지만...

레이아웃에 자바스크립트를 복잡하게 해두면 왠지 깔끔하지 못하죠..;;;

저 같은 경우에 어떻게 해결했냐면요.

(설명을 말로하자니 너무 복잡해서 소스로 적어볼게요.)

<!-- layout.html 파일 -->

<div id="contentBody">

  <div class="LeftSide"> <!-- 왼쪽 사이드 쪽 레이어입니다. -->

  왼쪽 사이드 내용

  </div>

  <div class="RightBody"> <!-- 오른쪽 본문 부분 레이어이죠... -->

   오른쪽 본문내용

  </div>

</div>

<!-- layout.html 파일 끝 -->

<!-- default.css CSS파일 시작 -->

....생략

body { margin:0; padding:0; background-color:#ffffff; }

#contentBody { width:870px; margin:0 auto 0 auto; background:url(../images/default/leftside_bg.gif) repeat-y left; }

#contentBody .LeftSide { float:left; width:170px; margin-right:20px; }

#contentBody. RightBody { float:right; width:680px; }

....생략

<!-- default.css CSS파일 소스끝 -->

뭐 대충 이런식으로 짜서했는데요. 위에 CSS 소스보시면 #contentBody 레이어 부분에 배경이미지를 세로로 반복되게 주었죠.

오른쪽의 본문내용이 높이가 커지든.. 왼쪽에 사이드가 높이가 더 커지든간에 가장 높은 레이어에 만큼

두 레이어를 포함하고 있는 #contentBody의 높이가 늘어나면서 그에 맞게 배경이미지도 적용됩니다.

이때 왼쪽 사이드 부분 폭넓이가 170px 라고 선언했죠.

그래서 저는 배경이미지 가로폭을 170px 로 하고 세로는 1px 로 해서 세로로 반복배경 되도록 처리 한거구요.

내용이 좀 복잡한거 같은데 이해가 가실런지 .... 몇번 읽어보면 무슨 말인지 이해 갈거에요.

솔직히 이런 방법 말고는 복잡하디 복잡한 자바스크립트로 도배를 해야해서 ㅎㅎㅎ

고작 요만한 글 적는데 시간이 이만큼이나 흘렀네 헉....