흠...왜 테이블 레이아웃이 깨질까요? > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

흠...왜 테이블 레이아웃이 깨질까요? 정보

흠...왜 테이블 레이아웃이 깨질까요?

본문

우선 [첫번째 첨부파일] 보시면

head 왼쪽 로그인이 정렬되어있는거 보이시죠??

근데 게시판 클릭해서 게시물을 보면

[두번째 첨부파일]

head 왼쪽 로그인과 그 아래 설문조사나 그런것들이 내려가버립니다 자동으로

그래서 상단이 비어있어요

대조 해서 좀 봐주세요

오류 주소는 : www.cecnz.com  입니다
  • 복사

댓글 전체

head와 index를 나눌때 테이블의 넓이를 어떻게 하셨는지요??

헤드와 인덱스 둘다 XX%로 하시거나 둘다 980px로 맞추어 보시길 바랍니다.

헤드는 980px 픽셀로 되어있고 인덱스는 XX%로 되어있으면 이렇게 됩니다.

ps:이게 아니라면 헤드에서 왼쪽메뉴가 시작되는 테이블에도 중앙정렬을 시켜주세요
아~ 감사합니다~
근데 헤드는 1004
인덱스도 1004로 했는데도 그대로네요......

왼쪽메뉴가 시작되는 테이블도 중앙정렬 center 되어있는것 같구요
헤드

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

include_once("$g4[path]/head.sub.php");
include_once("$g4[path]/lib/outlogin.lib.php");
include_once("$g4[path]/lib/poll.lib.php");
include_once("$g4[path]/lib/visit.lib.php");
include_once("$g4[path]/lib/connect.lib.php");
include_once("$g4[path]/lib/popular.lib.php");

//print_r2(get_defined_constants());

// 사용자 화면 상단과 좌측을 담당하는 페이지입니다.
// 상단, 좌측 화면을 꾸미려면 이 파일을 수정합니다.

$table_width = 1004;
?>

<!-- 상단 배경 시작 -->
<!-- 상단 배경 끝 -->

<!-- 상단 로고 및 버튼 시작 -->
    <!-- 로고 -->
    <td><a href="<?=$g4['path']?>/"></a>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="996" height="283">
        <param name="movie" value="<?=$g4[path]?>/banner/cecnz.swf">
        <param name="quality" value="high" />
        <embed src="<?=$g4[path]?>/banner/menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="996" height="283"></embed>
            </object></td>
</tr>
</table>
<!-- 상단 로고 및 버튼 끝 -->
<div style='height:18px;'></div>
<table width="<?=$table_width?>" cellspacing="0" cellpadding="0">
<tr>
    <td width=0></td>
<!-- 검색 시작 -->
<!-- 검색 끝 -->
    <!-- 왼쪽 메뉴 -->
<div align="center"></div>
    <td width=220 valign=center>
        <div align="center">
          <?=outlogin("basic"); // 외부 로그인 ?>
         
        </div>
        <div style='height:10px;'></div>

        <div align="center">
          <?=poll("poll2"); // 설문조사 ?>
         
        </div>

        <div style='height:10px;'></div>

        <div align="center">
        <img src="<?=$g4[path]?>/banner/qa.gif"><img src="<?=$g4[path]?>/banner/faq.gif">
        <img src="<?=$g4[path]?>/banner/nz.gif"><img src="<?=$g4[path]?>/banner/currency.gif">
        </div>

        <div style='height:10px;'></div>

        <div align="center">
          <?=visit("new"); // 방문자수 ?>
         
        </div>
        <div style='height:10px;'></div>

        <div align="center">
          <?=connect("new"); // 현재 접속자수 ?>
  </div></td>
    <td width=18></td>
    <!-- 중간 -->
    <td width=683 valign=top>
인덱스

<?
include_once("./_common.php");
include_once("$g4[path]/lib/latest.lib.php");

$g4['title'] = "";
include_once("./_head.php");
?>

<!-- 메인화면 최신글 시작 -->
<table width="1004" cellpadding=0 cellspacing=0><tr><td valign=top>
<?
//  최신글
$sql = " select bo_table, bo_subject from $g4[board_table] order by gr_id, bo_table limit 1 ";
$result = sql_query($sql);
for ($i=0; $row=sql_fetch_array($result); $i++) {
    // 이 함수가 바로 최신글을 추출하는 역할을 합니다.
    // 스킨은 입력하지 않을 경우 관리자 > 환경설정의 최신글 스킨경로를 기본 스킨으로 합니다.

    // 사용방법
    // latest(스킨, 게시판아이디, 출력라인, 글자수);
    echo latest("l_board", $row['bo_table'], 10, 70);
    echo "<p>\n";
}
?>
</td></tr></table>
<!-- 메인화면 최신글 끝 -->

<?
include_once("./_tail.php");
?>
테일

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

// 사용자 화면 우측과 하단을 담당하는 페이지입니다.
// 우측, 하단 화면을 꾸미려면 이 파일을 수정합니다.
?>

</td>
<td width=40></td>
</tr></table>
<!-- 카피라이트 시작 -->
<table width="<?=$table_width?>" border="0" cellspacing="10" cellpadding="10">
<tr>
    <td width="320" valign="top" background="<?=$g4['path']?>/img/copyright.gif"><a href="#g4_head"><img src="<?=$g4['path']?>/img/icon.gif" width="15" height="12" border="0"></a><font color="#848484">Copyright ⓒ www.cecnz.com. All rights reserved.<br>
</font></td>
</tr>
</table>
<!-- 카피라이트 끝 -->

<?
include_once("$g4[path]/tail.sub.php");
?>
헤드에 있는
<!-- 상단 로고 및 버튼 끝 -->
<div style='height:18px;'></div>
<table width="<?=$table_width?>" cellspacing="0" cellpadding="0">  <---여기가 진짜 왼쪽메뉴의 시작으로 보입니다만..여기 테이블에 align="center" 를 넣어보세요~~
헤드에 있는 플래시도

<script>doc_write(flash_movie("<?=$g4['path']?>/플래쉬.swf", "ids", 72, 199, "transparent"));</script>

이 소스로 해서 넣으시는것이 소스도 보기 좋고 그누에서는 더 잘 먹힙니다.
Neverend님 회원정보 공개가 안되네요. 저번에 새로 가입할 때 비공개로 했는데
회원정보 수정을 하려면 시간이 걸리나 보네요.

테이블 정렬 문제 아직 해결이 안됬나보네요..?
쪽지가 안보내져요 오리궁대짝님께로.......
정보수정 누르고 상세정보수정에서
공개하기 체크 하면
비공개 한거 바로 수정할 수 있어요..

그리고 테이블 센터정렬은 말씀해주신대로
해보려고 했는데 그전에 문제점이.......
오리궁대짝님께서 글 남겨주셔서 문제점을 알 수 있었는데
위에 스크린샷 보시면 아시겠지만
게시판 그냥 있을때는 문제가 없는데
게시판 글 클릭해서 내용보기를 하면

좌측 로그인 및 아랫부분들이 다 내려가요
상단 공간이 비어버리구요...... 자동으로....+_+
소스 자체를 생략해서 이글을 쓰지 않았다면 소스에 누락된 것이 보입니다.
그러하여 규칙에도 맞지가 않습니다.
위 소스를 그냥 잠시 봤습니다만...
<td>전이나 </td> 뒤 혹은 <tr>또는 </tr>전후에 <div style='height:10px;'></div> 오는 것은 잘 못 된 것입니다.
<table...> 시작 전이나 </table> 다음에 오는 것이 정상입니다.
참고로 일반적인 본문내용  또는 div태그의 안 또는 밖에 소스가 오기도 합니다만 테이블에서는 td 안 또는  table 밖에 써야합니다.
또한 셀병합이 안된 곳도 보이며 소스가 아예 없는 것도 보입니다.
지금 문제는 전체 세팅이 center로 가느냐 안가느냐 그것은 우선 나중에 해결 하기로 하구요

우선 제가 풀어야 할 문제는 제 홈피에서
www.cecnz.com
그리고 스크린샷 올렸지만
메인에 우선 게시판을 클릭해서 글을 읽으면요
좌측에 헤드 메뉴들이 다 밑으로 내려간다구요 빈 공간이 생겨요.........
테이블 세팅을 잘못한건지 뭔지 모르겠지만 newpia님 말씀처럼
그게 뭔지...... 흐음..........

암튼
[두번째 스크린샷 파일]
head 왼쪽 로그인과 그 아래 설문조사나 그런것들이 내려가버립니다 자동으로
그래서 상단이 비어있어요

이거 좀 봐주세요
저도 초보라 맞을지는 모르겠지만...조심스레 글남겨 봐요.
게시판 글목록리스트일때는 왼쪽 메뉴의 총 세로 길이가 본문의 총세로길이보다 길기때문에 꽉차게 보이는것 같구요.
본문을 클릭해서 볼때는 왼쪽메뉴의 총 세로길이가 본문의 총 세로길이 짧아서 위, 아래 부분의 공간이 생기는게 아닐까 생각입니다.
소스중에
    <!-- 왼쪽 메뉴 -->
<div align="center"></div>
    <td width=220 valign=center>
이 부분을
    <!-- 왼쪽 메뉴 -->
<div align="center"></div>
    <td width=220 valign=top> 로 해보심은 어떨지....

align은 가로 정렬, valign은 세로정렬....

초보의 허접한 답변입니다.
<!-- 상단 로고 및 버튼 끝 -->
<div style='height:18px;'></div>
<table width="1004" cellspacing="0" cellpadding="0">
<tr>
    <td width=0></td>
...

이 테이블 부모 와 자식 테이블에

선을 넣어서(border="1') 어떤 <td에 valign='top'을 줘야 하는지 살펴 보세요.
<td width="220" valign="center">

여기를 valign="top" 으로 주세요..

파이어버그로 확인해보니..
사이드 메뉴쪽 TD가 valign="center" 로 되어 있네요..

참고로 아래 소스 첫줄 입니다.
아래 소스는 네버엔드님 홈피에서 긁어 온것입니다.
=========================
<td width="220" valign="center">
        <div align="center">
         
<script src="../js/capslock.js" type="text/javascript"/><div style="display: none; position: absolute;" id="capslock_info"><img src="../img/capslock.gif"/></div>
<script type="text/javascript">
// 엠파스 로긴 참고
var bReset = true;
function chkReset(f)
{
    if (bReset) { if ( f.mb_id.value == '아이디' ) f.mb_id.value = ''; bReset = false; }
    document.getElementById("pw1").style.display = "none";
    document.getElementById("pw2").style.display = "";
}
</script>


<!-- 로그인 전 외부로그인 시작 -->
<form style="margin: 0px;" autocomplete="off" onsubmit="return fhead_submit(this);" method="post" name="fhead">
<input type="hidden" value="%2Fbbs%2Fboard.php%3Fbo_table%3Dboard%26wr_id%3D1" name="url"/>
<div style="width: 220px;">
    <div style="clear: both;"><img height="42" width="220" src="../skin/outlogin/basic/img/login_top.gif"/></div>
    <div style="background: rgb(248, 248, 248) none repeat scroll 0% 0%; clear: both; float: left; width: 5px; height: 115px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"/>
    <div style="width: 210px; float: left; margin-top: 10px;">
        <table cellspacing="0" cellpadding="0" border="0" width="210">
        <tbody><tr>
            <td width="141">
                <table cellspacing="0" cellpadding="0" border="0" width="141">
                <tbody><tr>
                    <td height="23" width="35"><img height="23" width="35" src="../skin/outlogin/basic/img/login_id.gif"/></td>
                    <td height="23" align="center" width="106" colspan="2"><input type="text" onfocus="chkReset(this.form);" onmouseover="chkReset(this.form);" value="아이디" itemname="아이디" required="" maxlength="20" size="12" class="ed" name="mb_id" style="background-image: url(../js/wrest.gif); background-position: right top; background-repeat: no-repeat;"/></td>
                </tr>
                <tr>
                    <td height="23" width="35"><img height="23" width="35" src="../skin/outlogin/basic/img/login_pw.gif"/></td>
                    <td height="23" align="center" width="106" colspan="2" id="pw1" style="display: none;"><input type="text" onfocus="chkReset(this.form);" onmouseover="chkReset(this.form);" value="패스워드" itemname="패스워드" required="" maxlength="20" size="12" class="ed" style="background-image: url(../js/wrest.gif); background-position: right top; background-repeat: no-repeat;"/></td>
                    <td height="23" align="center" width="106" colspan="2" style="" id="pw2"><input type="password" onkeypress="check_capslock(event, 'outlogin_mb_password');" onfocus="chkReset(this.form);" onmouseover="chkReset(this.form);" itemname="패스워드" maxlength="20" size="12" class="ed" id="outlogin_mb_password" name="mb_password"/></td>
                </tr>
                </tbody></table>
            </td>
            <td height="46" align="center" width="69" rowspan="2"><input height="46" width="52" type="image" src="../skin/outlogin/basic/img/login_button.gif"/></td>
        </tr>
        </tbody></table>
        <div style="padding: 2px 0pt 0pt 42px; clear: both;">
            <div style="float: left;"><input type="checkbox" onclick="if (this.checked) { if (confirm('자동로그인을 사용하시면 다음부터 회원아이디와 패스워드를 입력하실 필요가 없습니다.\n\n\공공장소에서는 개인정보가 유출될 수 있으니 사용을 자제하여 주십시오.\n\n자동로그인을 사용하시겠습니까?')) { this.checked = true; } else { this.checked = false; } }" value="1" name="auto_login"/></div>
            <div style="float: left; padding-left: 5px;"><img height="28" width="46" src="../skin/outlogin/basic/img/login_auto.gif"/></div>
        </div>
        <div style="padding: 0pt 0pt 0pt 42px; clear: both;">
            <a href="javascript:win_password_forget();"><img height="20" border="0" width="90" src="../skin/outlogin/basic/img/login_pw_find_button.gif"/></a>
            <a href="../bbs/register.php"><img height="20" border="0" width="69" src="../skin/outlogin/basic/img/login_join_button.gif"/></a>
        </div>
    </div>
    <div style="background: rgb(248, 248, 248) none repeat scroll 0% 0%; float: left; width: 5px; height: 115px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"/>
    <div style="clear: both;"><img height="14" width="220" src="../skin/outlogin/basic/img/login_down.gif"/></div>
</div>
</form>

<script language="JavaScript">
function fhead_submit(f)
{
    if (!f.mb_id.value) {
        alert("회원아이디를 입력하십시오.");
        f.mb_id.focus();
        return false;
    }

    if (document.getElementById('pw2').style.display!='none' && !f.mb_password.value) {
        alert("패스워드를 입력하십시오.");
        f.mb_password.focus();
        return false;
    }

    f.action = '../bbs/login_check.php';   
    return true;
}
</script>
<!-- 로그인 전 외부로그인 끝 -->
         
        </div>
        <div style="height: 10px;"/>

        <div align="center">
         
<table cellspacing="0" cellpadding="0" border="0" width="220">
<form target="winPoll" onsubmit="return fpoll_submit(this);" action="../bbs/poll_update.php" method="post" name="fpoll"/>
<input type="hidden" value="1" name="po_id"/>
<input type="hidden" value="poll2" name="skin_dir"/>
<tbody><tr>
    <td height="7" width="7"><img width="7" src="../skin/poll/poll2/img/bg_tl.gif"/></td>
    <td background="../skin/poll/poll2/img/bg_t.gif"/>
    <td width="6"><img width="6" src="../skin/poll/poll2/img/bg_tr.gif"/></td>
</tr>
<tr>
    <td background="../skin/poll/poll2/img/bg_ml.gif"/>
    <td>
        <table cellspacing="0" cellpadding="0" border="0" width="100%">
        <tbody><tr><td height="5" colspan="5"/></tr>
        <tr>
            <td width="5"/>
            <td align="center" colspan="3">
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                <tbody><tr>
                    <td width="5"><img src="../skin/poll/poll2/img/bg_mcl.gif"/></td>
                    <td background="../skin/poll/poll2/img/bg_mc.gif" align="center"><img src="../skin/poll/poll2/img/title.gif"/></td>
                    <td width="4"><img src="../skin/poll/poll2/img/bg_mcr.gif"/></td>
                </tr></tbody></table></td>
            <td width="5"/>
        </tr>
        <tr><td height="10" colspan="4"/></tr>
        <tr>
            <td/>
            <td align="center" width="25"><img height="13" width="12" src="../skin/poll/poll2/img/q.gif"/></td>
            <td height="20" style="text-align: justify;"><font color="#848484">CEC ACADAMY는?</font>
                            </td>
            <td/>
        </tr>
        <tr><td height="5" colspan="4"/></tr>

        <tr>
            <td/>
            <td colspan="2">
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tbody><tr>
                    <td align="center" width="25"><img height="13" width="12" src="../skin/poll/poll2/img/a.gif"/></td>
                    <td height="25" align="center" width="30"><input type="radio" value="1" name="gb_poll"/></td>
                    <td width=""><font color="#848484">테스트 1번</font></td>
                </tr>
                                <tr>
                    <td align="center" width="25">&#160;</td>
                    <td height="25" align="center" width="30"><input type="radio" value="2" name="gb_poll"/></td>
                    <td width=""><font color="#848484">테스트 2번</font></td>
                </tr>
                                <tr>
                    <td align="center" width="25">&#160;</td>
                    <td height="25" align="center" width="30"><input type="radio" value="3" name="gb_poll"/></td>
                    <td width=""><font color="#848484">테스트 3번</font></td>
                </tr>
                                <tr>
                    <td align="center" width="25">&#160;</td>
                    <td height="25" align="center" width="30"><input type="radio" value="4" name="gb_poll"/></td>
                    <td width=""><font color="#848484">테스트 4번</font></td>
                </tr>
                                <tr>
                    <td align="center" width="25">&#160;</td>
                    <td height="25" align="center" width="30"><input type="radio" value="5" name="gb_poll"/></td>
                    <td width=""><font color="#848484">테스트 5번</font></td>
                </tr>
                                </tbody></table></td>
        </tr>
        <tr><td height="5" colspan="4"/></tr>
        <tr>
            <td/>
            <td align="center" colspan="2">
                <input height="25" border="0" width="70" type="image" src="../skin/poll/poll2/img/poll_button.gif"/>
                <a onclick="poll_result('1');" href="javascript:;"><img height="25" border="0" width="70" src="../skin/poll/poll2/img/poll_view.gif"/></a></td>
            <td/>
        </tr>
        <tr><td height="5" colspan="5"/></tr>
        </tbody></table></td>
    <td background="../skin/poll/poll2/img/bg_mr.gif"/>
</tr>
<tr>
    <td height="7"><img width="7" src="../skin/poll/poll2/img/bg_bl.gif"/></td>
    <td background="../skin/poll/poll2/img/bg_b.gif"/>
    <td><img width="6" src="../skin/poll/poll2/img/bg_br.gif"/></td>
</tr>

</tbody></table>

<script language="JavaScript">
function fpoll_submit(f)
{
    var chk = false;
    for (i=0; i<f.gb_poll.length;i ++) {
        if (f.gb_poll[i].checked == true) {
            chk = f.gb_poll[i].value;
            break;
        }
    }

   
    if (!chk) {
        alert("항목을 선택하세요");
        return false;
    }

    win_poll();
    return true;
}

function poll_result(po_id)
{
   
    win_poll("../bbs/poll_result.php?po_id="+po_id+"&skin_dir="+document.fpoll.skin_dir.value);
}
</script>
         
        </div>

        <div style="height: 10px;"/>

        <div align="center">
        <img src="../banner/qa.gif"/><img src="../banner/faq.gif"/>
        <img src="../banner/nz.gif"/><img src="../banner/currency.gif"/>
        </div>

        <div style="height: 10px;"/>

        <div align="center">
          <table height="50" cellspacing="0" cellpadding="0" border="0" background="../skin/visit/new/img/bg.png" width="200">
    <tbody><tr>
        <td width="200" valign="middle">
            <table height="37" cellspacing="0" cellpadding="0" border="0" width="200">
                <tbody><tr>
                    <td height="18" width="200" valign="bottom"><span style="font-size: 9pt;"><font face="굴림" color="white">&#160;&#160;&#160;오늘 : &#160;24&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;어제 : 40</font></span></td>
                </tr>
                <tr>
                    <td height="2" width="200"/>
                </tr>

                <tr>
                    <td height="19" width="0" valign="bottom"><span style="font-size: 9pt;"><font face="굴림" color="white">&#160;&#160;&#160;전체 : &#160;94</font></span>&#160;</td>
                </tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table>



<!-- <table id="Table_01" width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="0" height="19">
<img src="../skin/visit/new/img/counterbox_01.gif" width="200" height="19" alt="" border="0" vspace="0" hspace="0"></td>
</tr>
<tr>
        <td height="49" background="../skin/visit/new/img/counterbox_02.gif" width="0">
                        <table width="94%" border="0" cellspacing="0" cellpadding="0" align="right">
                            <tr>
                                <td width="50%">
                                    <p><span style="font-size:9pt;"><font color="#333333">어제 : </font><font color="#666666">40</font></span><br>
</p>
                                </td>
                                <td width="50%">
                                    <p><span style="font-size:9pt;"><font color="#333333">오늘 :</font> <font color="#666666">24</font></span><font color="#666666"><br></font></p>
                                </td>
                            </tr>
                            <tr>
                                <td width="50%" height="11">
                                    <p><span style="font-size:9pt;"><font color="#333333">최대 :</font> <font color="#666666">40</font></span><br></p>
                                </td>
                                <td width="50%" height="11">
                                    <p><span style="font-size:9pt;"><font color="#333333">전체 : </font><font color="#666666">94</font></span></p>
                                </td>
                            </tr>
                        </table>
        </td>
</tr>
<tr>
<td width="0" height="4">
<img src="../skin/visit/new/img/counterbox_04.gif" width="200" height="4" alt="" border="0" vspace="0" hspace="0"></td>
</tr>
</table> -->         
        </div>
        <div style="height: 10px;"/>

        <div align="center">
         
<table cellspacing="0" cellpadding="0" border="0" width="180">
<tbody><tr>
    <td height="40" background="../skin/connect/new/img/visit_bg.gif" width="180">
        <table cellspacing="0" cellpadding="0" border="0" width="180">
        <tbody><tr>
            <td align="right" width="20"><img height="14" width="14" src="../skin/connect/new/img/icon.gif"/></td>
            <td width="170">&#160;&#160;<a href="../bbs/current_connect.php"><strong>현재접속자</strong> : 1 (회원 0)</a></td>
        </tr>
        </tbody></table></td>
</tr>
</tbody></table>
  </div></td>
드디어 해결했습니다!!!!!!!!!

<!-- 왼쪽 메뉴 -->
<div align="center"></div>
    <td width=220 valign=top>

여기서 valign=center를 top으로 바꿨더니 빈공간 안생기네요!!!!

모두 감사드립니다 (--)(__)
© SIRSOFT
현재 페이지 제일 처음으로