테스트 사이트 - 개발 중인 베타 버전입니다

또 질문드립니다.

웹표준 코딩에서 키피라이터 이미지 처리 문제 문의합니다.
 
테이블할 때에는 괜찮은데..
 
웹표준 코딩된 것을 테이블 처리하듯 상,하단 구분 후에 설정 저장 후 테스트하니 하단의 카피라이터 이미지는 현재 고정 위치가 되어버렸네요.
 
게시판은 글쓰기할 세로크기가 유동적으로(특히 리스트 상태나 글 볼 때) 변화기에 테이블로 할 경우는 자동으로 하단의 카피라이터 이미지가 밑으로 내려갔는데 웹표준 코딩의 div 는 그게 아니더군요.ㅡㅡ;
 
 리스트나, 글씨기 할 때나 글 볼 때에 세로로 크기가 커질 때마다 하단의 카피라이터를 밑으로 내려가게할려면 어떻게하나요?
 
이것저것해보아도 잘 안되네요.
 
고수님들 답변주세요.
 
아래는 웹페이지 소스 입니다.
 
-------------------------- 소스 나갑니다. ------------------------------------
 
[상단 파일]
 
<?
include_once("./_common.php");
include_once("$g4[path]/subhead.sub.php");
$g4['title'] = "";
?>
 
<div id="container">
    <!-- 헤더 부분--->
  <div id="header">
  <div id="gnb_box">
   <div id="gnb_logo"><br/><img src="<?=$g4['path']?>/images/logo.png" width="280" height="107"  class="png24" alt="시크릿로고"/></div>
    <div id="gnb_rightsetbox">                     
                     <div id="gnb_space"></div>
                        
       <? include_once("$g4[path]/topmenu.php"); ?>
    <div id="gnb_nav"><script>flash_p('<?=$g4['path']?>/swf/menu.swf', 614, 80);</script></div>
   </div>
  </div>   
   </div>
  <div id="subtop">
  <script>flash_p('<?=$g4['path']?>/swf/subtopflash.swf', 997, 231);</script>
  </div>
  <!--서브 레이아웃 부분--->
  <div id="left_05">
 <div id="left_menu"><script>flash_p('<?=$g4['path']?>/swf/left_menu05.swf', 213, 390);</script></div>  
  </div>
  <div id="subcontent">
   <div id="subcontent-area">
    <div id="nav"><img src="<?=$g4['path']?>/images/nav_05.gif"></div>   
    <div id="subcontens">
 
 [하단파일]
 
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// 사용자 화면 우측과 하단을 담당하는 페이지입니다.
// 우측, 하단 화면을 꾸미려면 이 파일을 수정합니다.
?>
 <!-- 카피라이트 시작 -->

  </div>
 </div> 
  </div>
 
<div id="footer"><img src="<?=$g4['path']?>/images/copy.gif" width="1000" height="55" alt="카피라이터"/></div>
</div>

<!-- 카피라이트 끝 -->
<?
include_once("$g4[path]/tail.sub.php");
?>
 ---------------------------------------css 소스 ----------------------------------
 
@charset "utf-8";
/* CSS Document */

html, body {
  height: 100%;
    /**margin,padding설정은 화면에 container를 가득채웠을때,스크롤바를 제거하기 위함(기본은 여백잡힘)*/
    margin: 0px;
    padding: 0px;
 background-image: url(images/bg.jpg);background-repeat: no-repeat;background-repeat :repeat-x;
 
 
}

div,dl,dt,dd,ol.p,h1,h2,h3,h4,h5,h6,form {margin: 0px;padding: 0px;}
img {border:0;vertical-align:top;}
ul {list-style:none;padding:0;margin:0;}
ul,ol.dl{list-style:none}
.png24 {tmp:expression(setPng24(this));}

 
/* 레이아웃 큰박스 속성 */
#container {
   width: 1000px;
    /*html과 body에 height 100%를 주었음으로, 여기도 100%가능*/
    height: 100%;
    /*박스의 중앙정렬*/
    margin: auto;
 text-align : left;
 }
#header  {
 float:left;
 width:1000px;
 height: 130px;
 position: relative;
}
#subtop {
 float: left;
 width: 997px;
 height:231px;
 position: relative;
}
/* 회사소개 */
#left_01_01 {
 float: left;
 width: 213px;
 height:760px;
 position: relative;
 }
#left_menu {
 float: left;
 width: 213px; 
 position: absolute;
 left:0px;
 top:-79px;
 z-index:1;
}
/* 조직도 */
#left_01_02 {
 float: left;
 width: 213px;
 height:600px;
 position: relative;
 }
#left_02_01 {
 float: left;
 width: 213px;
 height:2850px;
 position: relative;
 }
 #left_02_02 {
 float: left;
 width: 213px;
 height:930px;
 position: relative;
 }
/* 스텔스 */
 #left_03_01 {
 float: left;
 width: 213px;
 height:1650px;
 position: relative;
 }
 #left_03_02 {
 float: left;
 width: 213px;
 height:350px;
 position: relative;
 }
  #left_04 {
 float: left;
 width: 213px;
 height:1700px;
 position: relative;
 }
 
/* 견적문의 */  --->견적문의 게시판  css 입니다.
  #left_05 {
 float: left;
 width: 213px;
 height: 300px;
 position: relative;
 
 }
#left_menu {
 float: left;
 width: 213px; 
 position: absolute;
 left:0px;
 top:-79px;
 z-index:1;
}
 
#subcontent {
 float:right;
 width: 784px;
 position: relative;
 text-align : left;
}
#subcontent #subcontent-area {
    /*위에 떠있는 header에 가려지는 것을 방지하기 위해서, header의 높이만큼 padding-top값을 부여*/
    padding-top: 3px;
    /*내용이 footer에 겹치는 것을 방지하기 위해서 footer의 높이만큼 padding-bottom값 부여*/
    padding-bottom: 55px;
   }

#footer {

 width: 1000px;
 position: relative;
 clear: both;
 float: left;
}
/* 상단 박스 속성 */
#gnb_box {float:left;width:1000px;height:130px;}
#gnb_logo {float:left;width:386px;height:130px;}
#gnb_rightsetbox {float:left;width:614px;height:130px; position:relative;}
#gnb_topmenu {float:left;  height:27px; margin-top:23px; position:absolute; z-index:5; right:0;}  
#gnb_topmenu li{float:left;}
#gnb_nav {float:left;width:614px;height:80px; position:absolute; z-index:100; top:50px;}
/* 좌측 박스 속성 */
#left_flash {float:left;width:213px;}
/* 우축 박스 속성 */
#subcontents {
 float:left;
 
}
#subcontents #subcontens01 {
 width: 784px;
 height: 765px;
 position: relative;
 text-align : center;
}
#contents #contens02 {
 width: 784px;
 padding-left:14px
 position: relative;
 text-align : center;
}
/* CSS Document */

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

소스!를 올려보시면 더 좋을 거 같습니다.

게시글 목록

번호 제목
16902
16901
16900
16899
16898
16897
16896
16895
16894
16893
16892
16891
16890
16889
16888
16887
16886
16885
16881
16880
16878
16877
16871
16862
16858
16856
30273
30269
16855
16854
16853
16852
16851
16850
16849
16848
16847
16846
16845
16844
16843
16842
16841
16840
30260
16838
16837
16836
16833
16832
16831
16829
30251
16827
16826
16825
16824
16823
16822
16821
16820
16819
16818
16817
16812
16811
16810
16809
16806
30247
16805
16804
16803
16802
16801
16800
16797
16796
4093
16793
16792
16791
16790
16789
16788
16787
16786
16783
4084
16782
16781
16780
16779
16778
16775
16773
30244
16769
16765
16763