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

또 질문드립니다.

웹표준 코딩에서 키피라이터 이미지 처리 문제 문의합니다.
 
테이블할 때에는 괜찮은데..
 
웹표준 코딩된 것을 테이블 처리하듯 상,하단 구분 후에 설정 저장 후 테스트하니 하단의 카피라이터 이미지는 현재 고정 위치가 되어버렸네요.
 
게시판은 글쓰기할 세로크기가 유동적으로(특히 리스트 상태나 글 볼 때) 변화기에 테이블로 할 경우는 자동으로 하단의 카피라이터 이미지가 밑으로 내려갔는데 웹표준 코딩의 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개

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

게시글 목록

번호 제목
2097
2095
2082
2071
2048
2046
2042
2022
2017
2001
1999
1996
1994
1989
1988
1982
1975
1971
1970
1964
1961
1958
1954
1951
1947
1944
1941
1938
1929
1926