또 질문드립니다. > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

또 질문드립니다. 정보

HTML 또 질문드립니다.

본문

웹표준 코딩에서 키피라이터 이미지 처리 문제 문의합니다.

테이블할 때에는 괜찮은데..

웹표준 코딩된 것을 테이블 처리하듯 상,하단 구분 후에 설정 저장 후 테스트하니 하단의 카피라이터 이미지는 현재 고정 위치가 되어버렸네요.

게시판은 글쓰기할 세로크기가 유동적으로(특히 리스트 상태나 글 볼 때) 변화기에 테이블로 할 경우는 자동으로 하단의 카피라이터 이미지가 밑으로 내려갔는데 웹표준 코딩의 div 는 그게 아니더군요.ㅡㅡ;

리스트나, 글씨기 할 때나 글 볼 때에 세로로 크기가 커질 때마다 하단의 카피라이터를 밑으로 내려가게할려면 어떻게하나요?

이것저것해보아도 잘 안되네요.

고수님들 답변주세요.

아래는 웹페이지 소스 입니다.

-------------------------- 소스 나갑니다. ------------------------------------

[상단 파일]

<?
include_once("./_common.php");
include_once("$g4[path]/subhead.sub.php");
$g4['title'] = "";
?>

<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 */