테이블 중앙정렬 질문입니다

테이블 중앙정렬 질문입니다

QA

테이블 중앙정렬 질문입니다

본문

그누보드5 기반으로 만들어진 아보카도 에디션을 통해 개인홈페이지를 만들고자 해서 제작중입니다.

 

31807538_1605432626.0982.png

 

이런 식으로 테이블을 짜서 가운데 테두리 쳐진 상자 부분에 글이 나오는 노프레임 홈을 계획했습니다. 표를 세로로 세 칸 되게 만들어서 맨 윗칸에는 이미지, 가운데 셀에는 배경이미지, 맨 아래 셀에는 이미지를 써서 흔하게 하는 노프레임 방식으로 테이블 코드도 짰었는데

 

(head와 tail 파일에 각각 이렇게 들어가있습니다)

31807538_1605433250.5158.png

31807538_1605433305.7496.png

 

 

이런식으로 써놨더니

 

 31807538_1605432818.5605.png

 

홈페이지에서는 이렇게 테이블이 중앙정렬이 되지가 않더라구요..테이블 안에 게시판이 들어가게 하고 싶었는데 중앙정렬이 되지 않았고 심지어 가로로는 또 반복되어서 나옵니다ㅜㅜ

 

이 코드를 작성한 것 중 head(주소는 일부러 가린겁니다.)는 이렇게 되어있구요

 


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가 
include_once(G5_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php'); 
/*********** Logo Data ************/
$logo = get_logo('pc');
$m_logo = get_logo('mo');
$logo_data = "";
if(!$logo && !$m_logo)$logo_data=$config['cf_title'];
else{
if($logo)        $logo_data .= "<img src='".$logo."' ";
if($m_logo)        $logo_data .= "class='only-pc' /><img src='".$m_logo."' class='not-pc'";
if($logo_data)    $logo_data.= " />";
}
/*********************************/
$main_link=get_main_link();
?>
<!-- 헤더 영역 -->
<header id="header">
    <div class="fix-layout">
        <!-- 로고 영역 : PC 로고 / 모바일 로고 동시 출력 - 디자인 사용을 체크하지 않을 시, 제대로 출력되지 않을 수 있습니다. -->
        <!-- 관리자 기능을 사용하지 않고 로고를 넣고 싶을 시, < ? = $ log_data ? > 항목을 제거 하고 <img> 태그를 넣으세요. -->
        <?if($config['cf_logo_use']!='N'){?>
        <h1 id="logo">
            <a href="<?=$main_link?>">
                <?=$logo_data?>
            </a>
        </h1>
        <?}?>
        <!-- 로고를 삭제하고 싶을 경우 위의 <h1 ... </h1> 부분을 삭제하시면 됩니다 -->
        <!-- 모바일 모드에서 메뉴를 열고 닫기 할 수 있는 버튼 -->
        <a href="#gnb_wrapper" id="gnb_control_box">
            <img src="<?=G5_IMG_URL?>/ico_menu_control_pannel.png" alt="메뉴열고닫기" />
        </a>
        <script>
        $('#gnb_control_box').on('click', function() {
            $('body').toggleClass('open-gnb');
            return false;
        });
        </script>
        <!-- 모바일 메뉴 열고 닫기 버튼 종료 -->
        <div id="gnb_wrapper">
            <?
            if($config['cf_menu_content']){
            $menu_co=explode(",",$config['cf_menu_content']);
            $menu_content = get_site_content($menu_co[1]);
            echo '<div id="gnb">'.$menu_content.'</div>';
            }else{
        /**************************************************************
        ----------------------------메뉴 영역 시작----------------------------
        * 원하실 경우 하단의 <div id="gnb"> ....  </div> 부분을 수정/삭제 해주세요.
        **************************************************************/?> 
            
            <div id="gnb">
                <ul id="no_design_gnb">
                <?
                
             $sql = " select *
                            from {$g5['menu_table']}
                            where me_use = '1'
                              and length(me_code) = '2'
                            order by me_order*1, me_id ";
                $result = sql_query($sql, false); 
                $count=sql_fetch($sql);
                $menu_datas = array();
            if($count['me_id']){ $sql = " select *
                            from {$g5['menu_table']}
                            where me_use = '1'
                              and length(me_code) = '2'
                            order by me_order*1, me_id ";
                $result = sql_query($sql, false); 
                $menu_datas = array();
                for ($i=0; $row=sql_fetch_array($result); $i++) {
                    $menu_datas[$i] = $row;
                    $sql2 = " select *
                                from {$g5['menu_table']}
                                where me_use = '1'
                                  and length(me_code) = '4'
                                  and substring(me_code, 1, 2) = '{$row['me_code']}'
                                order by me_order*1, me_id ";
                    $result2 = sql_query($sql2);
                    for ($k=0; $row2=sql_fetch_array($result2); $k++) {
                        $menu_datas[$i]['sub'][$k] = $row2;
                    }
                }
                $i = 0;
                foreach( $menu_datas as $row ){
                    if( empty($row) ) continue; 
                    $color=$de['menu_text']['cs_value'];
                    $over=$de['menu_text']['cs_etc_2'];
                    if($row['me_color']) $color=$row['me_color'];
                    if($row['me_over']) $over=$row['me_over'];
                    $img_link='';
                    if($row['me_img']){
                        if($row['me_img2']){
                        $img_link="<img src=\"{$row['me_img']}\" onmouseenter=\"this.src='{$row['me_img2']}'\" onmouseleave=\"this.src='{$row['me_img']}'\" alt=\"{$row['me_name']}\">";
                        }
                        else{
                        $img_link='<img src="'.$row['me_img'].'" alt="'.$row['me_name'].'">';
                        }
                    }
                ?>
                <?if($member['mb_level']>=$row['me_level']){?>
                <li class="gnb_1dli <?if($i==0) echo " main";?>" >
                    <a href="<?php echo $row['me_link']?>"  target="_<?=$row['me_target']?>" class="gnb_1da" onMouseOver="this.style.color='<?=$over?>'" onMouseOut="this.style.color='<?=$color?>'" style="color:<?=$color?>;"><?php if($row['me_img']) echo $img_link; else echo $row['me_name']; ?></a>
                    
                </li>
                <?}?>
                <?php
                $i++;
                }   //end foreach $row
            }else{
            
            
            
                $bbs_list=sql_query("select bo_table,bo_subject from {$g5['board_table']} where bo_use_search='1'"); 
                    $bbs_admin=sql_query("select bo_table,bo_subject from {$g5['board_table']} where bo_use_search='0'");
                    for ($i=0;$bbs=sql_fetch_array($bbs_list);$i++){ 
                    ?>
                    <li>
                        <a href="<?=G5_BBS_URL?>/board.php?bo_table=<?=$bbs['bo_table']?>"><?=$bbs['bo_subject']?></a>
                    </li>
                <?}unset($bbs);
                    if($is_admin){
                    for ($i=0;$bbs=sql_fetch_array($bbs_admin);$i++){ 
                    ?>
                    <li>
                        <a href="<?=G5_BBS_URL?>/board.php?bo_table=<?=$bbs['bo_table']?>"><?=$bbs['bo_subject']?></a>
                    </li>
                <?}unset($bbs);}
            }?> 
                </ul>
            </div>
        
            
            <? /**************************************************************
            ----------------------------메뉴 영역 끝----------------------------
            **************************************************************/ }?> 
        </div>
    </div>
</header>
<!-- // 헤더 영역 -->
<section id="body">
<table width="1025" cellpadding="0" cellspacing="0" align="center" height="496">
    <tr>
        <td width="1842"><img src="주소" border="0"></td>
    </tr>
    <tr>
        <td width="1842" height="271" background="주소">
            <p align="center">
    <div class="fix-layout"> 
<hr class="padding" />

 

tail 파일 코드는 이렇게 되어있습니다.

 


<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<hr class="padding" />
<tr>
        <td width="1842"><img src="http://mystious.dothome.co.kr/images/foot3.jpg" border="0"></td>
    </tr>
</table>
</div>
</section>
        <?
if($config['cf_footer_content']){
    $footer_co=explode(",", $config['cf_footer_content']);
$footer_content = get_site_content($footer_co[1]);
echo '<footer id="footer">'.$footer_content.'</footer>';
} else { 
/**************************************************************
----------------------------푸터 영역 시작----------------------------
* 원하실 경우 하단의 <footer ....  </footer> 부분을 수정/삭제 해주세요.
**************************************************************/?>
<footer id="footer" class="txt-center">
        <div id="bgm_box">
<? include(G5_PATH."/template.bgm.php"); ?>
</div>
COPYRIGHT © 2017 by Avocado edited by <a href="https://extrashot.tistory.com/" target="_blank">daehakwan</a>
    </footer>
<?/**************************************************************
----------------------------푸터 영역 끝----------------------------
**************************************************************/}?> 
<a href="#header" id="goto_top" class="scroll-fix">
    <img src="<?=G5_IMG_URL?>/btn_top.png" />
</a>
<script>
$('#goto_top').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 800);
    return false;
});
var h=$("header").outerHeight();
var f=$("footer").outerHeight();
var w=$(window).height();
if(h>=w) h=0;
$("#body").css({"min-height":(w-f-h)+"px"}); 
window.onresize=function(){ 
    h=$("header").outerHeight();
    w=$(window).height();
    if(h>=w) h=0;
    $("#body").css({"min-height":(w-f-h)+"px"}); 
}; //@200926
</script>
 
<script src="<?php echo G5_JS_URL ?>/_custom.js"></script>
 
<?php
include_once(G5_PATH."/tail.sub.php");
?>

 

혹시 style.css 파일도 필요할까 싶어 같이 둡니다


@charset "utf-8";
body    { line-height: 1.5em; font-size: 12px; font-family: 'Nanum Gothic'; }
caption    { display: none; }
html.single:before    {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
/*html.single > body    {
    z-index: 1;
}*/
button    { font-size: 12px; font-family: 'Nanum Gothic'; }
/*#body    { padding-bottom: 200px; }*/
.form-input    { display: block; line-height: 30px; }
input[type="file"]    { padding-left: 0 !important; }
.form-input,
input[type="text"],
input[type="password"],
input[type="file"],
select    { box-sizing: border-box; height: 30px; border-width: 1px; border-style: solid; padding: 0 10px; max-width: 100%; font-size: 12px; }
.form-input,
input[type="text"].full,
input[type="password"].full,
input[type="file"].full,
select.full    { width: 100%; }
textarea    {
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    padding: 5px;
    width: 100%;
    min-height: 50px;
    font-size: 12px;
}

.ajax-list-box    {
    height: 100px;
    overflow-y: auto;
    margin-top: 10px;
    padding: 5px;
}
.ajax-list-box ul,
.ajax-list-box li    { display: block; margin: 0; padding: 0; position: relative; }
.ajax-list-box li    { margin-bottom: 5px; }
.ajax-list-box li a    {
    display: block;
    position: relative;
    padding: 10px 0 10px 70px;
    min-height: 40px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 13px;
}
.ajax-list-box li a .ui-thumb        { position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; line-height: 40px; overflow: hidden; text-align: center; }
.ajax-list-box li a .ui-thumb img    { max-width: 100%; }
.ajax-list-box .no-data                { line-height: 50px; text-align: center; margin-top: 10px; }

hr.line    {
    display: block;
    position: relative;
    clear: both;
    margin: 10px 0;
    border: none;
    padding: 0;
    height: 1px;
}
hr.padding    {
    display: block;
    clear: both;
    margin: 0;
    padding: 0;
    border: none;
    height: 30px;
}
hr.padding.small    {
    height: 5px;
}
.co_container .co_content a, .more_open_close {color:inherit;}
#bo_v_img img    {
    height: auto  !important;
}

#no_design_gnb    { 
    text-align: center; 
} 
.close-header #header    { width: 0px !important; }
.close-header #body        { margin-left: 0 !important; }
.close-header body        { min-width: 0; }
@media all and (max-width: 1000px) {
    .close-header #header    { width: auto !important; }
}
html.single .bgm-player    { display: none !important; }
div.co_content .bgm-player {display: inline-block !important;}
/********************
    TWITTER
*********************/
.timeline-Body                    { border: none; font-size: 12px; }
.timeline-Widget                { background: none; }
.timeline-Body-notification,
.timeline-Tweet-actions,
.timeline-Header                { display: none; }
.timeline-Viewport    { height: 100%; overflow: auto; }
.timeline-TweetList    { display: block; list-style: none; margin: 0; padding: 0; }
.timeline-Tweet        { position: relative; padding: 20px 5px; }
.timeline-Tweet:before    { content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; border-top-width: 1px; border-top-style: dashed; }
.timeline-TweetList li:first-child .timeline-Tweet    { padding-top: 0; }
.TweetAuthor-link    { display: block; position: relative; padding-left: 40px; height: 30px; margin-bottom: 10px; }
.TweetAuthor-avatar    { display: block; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 5px; overflow: hidden; }
.TweetAuthor-screenName        { color: #777; font-size: 11px; }
.timeline-Tweet-metadata        { display: block; position: relative; font-size: 11px; text-align: right; color: #777; padding-right: 10px; }
.timeline-Tweet-metadata a        { color: #777; }
.MediaCard-mediaContainer    { padding-bottom: 20px !important; }
.timeline-LoadMore    { display: none; }
.Emoji    { width: 15px; vertical-align: middle; }
.NaturalImage-image,
.CroppedImage-image    { height: auto !important; }
.u-floatLeft, .u-floatRight    { display: none; }

/**************************************************************
    기본 오브젝트
***************************************************************/
.ui-btn    {
    display: inline-block;
    position: relative;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    vertical-align: middle;
    height: 28px;
    padding: 0 15px;
    box-sizing: border-box;
    cursor: pointer;
}
a.ui-btn    {
    line-height: 26px;
}
.ui-btn.small    {
    height: 25px;
    line-height: 23px;
    font-size: 12px;
}
.ui-btn.full    { width: 100%; }

.ui-btn.admin    {
    background: #8c1e1e;
    color: #fff;
    border-color: #691010;
}
.ui-btn.disable    { opacity: .3; }

.theme-box    {
    display: block;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
}
table { 
    width: 100%;
    padding:0;
    border-spacing:0px;
    border:0;
    border-collapse:collapse;
    table-layout: fixed;
}
th, td    {
    border: none;
}
.theme-form                { table-layout: fixed; }
.theme-form td            { padding: 5px; height: 30px; }
.theme-form th            { padding: 5px 10px; }
.theme-form .frm_info    { display: block; font-size: 12px; padding: 0 0 8px 0; }
.theme-list                { table-layout: fixed; }
.theme-list thead th    { height: 30px; }
.theme-list td            { padding: 5px; height: 30px; }
.theme-list td.no-data    { padding: 5px; text-align: center; line-height: 200px; }
/*@media all and (max-width: 640px) {
    .theme-list,
    .theme-list tbody,
    .theme-list thead,
    .theme-list tr,
    .theme-list td,
    .theme-list th    {
        display: block;
        position: relative;
        height: auto;
    }
    .theme-list thead    { display: none; }
}*/
.frm_info    { display: block; font-size: 12px; padding: 0 0 8px 0; opacity: .7; }

/**************************************************************
    배경음악 이퀄라이저 효과
***************************************************************/
.bgm-player { text-align: center;  }
.bgm-player .title {
    display: inline-block;
    vertical-align: middle;
    font-family: 'aphopis';
    line-height: 30px;
    font-size: 13px;
}
.bgm-player ul     {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    margin-right:15px;
}
.bar-equalizer    {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 90px;
    height: 25px;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    margin-left: 15px;
}
.bar-equalizer i {
    display: block;
    float: left;
    width: 1px;
    margin-right: 2px;
    border-radius: 5px;
    margin-top: 15px;
    transform: translateY(-50%);
    
    transition: height 0.3s linear;
    -webkit-transition: height 0.3s linear;
    -moz-transition: height 0.3s linear;
    -ms-transition: height 0.3s linear;
    -o-transition: height 0.3s linear;
}
.bgm-player li    { display: inline-block; }
.bgm-player li a    {
    display: inline-block;
    vertical-align:middle;
    position: relative;
    width: 12px;
    height: 100%;
    line-height: 27px;
    text-align: left;
    text-indent: -999px;
    overflow: hidden;
}
.bgm-player li a:before    {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-indent: 0;
    text-align: center; 
    font-size: 12px;
}
.bgm-player li a.play:before    { content: "▶"; }
.bgm-player li a.stop:before    { content: "■"; }

/**************************************************************
    Web Size Viewer Control - 반응형 코딩
    -
    모바일 기준 : width 1000px
***************************************************************/
@media all and (min-width:1001px) {
    .only-pc    {  }
    .only-ta    { display: none !important; }
    .only-mo    { display: none !important; }
    .not-pc    { display: none !important; }
    .not-ta    {  }
    .not-mo    {  }
}
@media all and (max-width:1000px) and (min-width: 1001px) {
    .only-pc    { display: none !important; }
    .only-ta    {  }
    .only-mo    { display: none !important; }
    .not-pc    {  }
    .not-ta    { display: none !important; }
    .not-mo    {  }
}
@media all and (max-width: 1000px) {
    .only-pc    { display: none !important; }
    .only-ta    { display: none !important; }
    .only-mo    {  }
    .not-pc    {  }
    .not-ta    {  }
    .not-mo    { display: none !important; }
}

/*******************************************
    모바일 메뉴 스타일 (헤더 설정)
********************************************/
#header .fix-layout    { padding: 0; }
#logo a{display:block;max-width: 225px; margin:0 auto;}
#bgm_box{padding-top:10px;}
#login_box {padding-top:10px;}
#login_box .ui-btn {padding:0 8px;}
#footer{clear:both;}
@media all and (max-width: 1000px) {
    body    { width: 100%; }
    #logo    { padding: 0 10px; z-index:0;float:none;line-height:50px;top: auto; left: auto; transform: translateX(0) translateY(0); position: relative; text-align: center;}
    
    #body    { margin-left: 0px; margin-top: 60px; }
    #header .fix-layout    { padding: 0; height:100%; }
    #header    {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        z-index: 999;
        width: auto;
        height: 50px;
        overflow: visible;
    }
    #gnb_wrapper    {
        position: fixed;
        top: 0;
        right: -280px;
        bottom: 0;
        width: 280px;
        z-index: 999;
        overflow-y: auto;
    }
#no_design_gnb    {
    float:none;display:block;text-align:center;padding-top:70px;
    }
#no_design_gnb li    {
    display: block; 
    line-height:30px;
    margin-bottom:20px;
}
#login_box, #bgm_box {float:none;}
    #gnb_control_box        {
        position: absolute;
        top: 50%;
        margin-top: -20px;
        right: 10px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        text-align: center;
    }
    #gnb_control_box:before    {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
    #gnb_control_box img    {
        display: inline-block;
        max-width: 50%;
        max-height: 50%;
        vertical-align: middle;
        margin-left: -12%;
        opacity: 1;
    }
    #gnb_control_box,
    #gnb_control_box * {
        transition: all 0s ease;
        -webkit-transition: all 0s ease;
        -ms-transition: all 0s ease;
    }
    .open-gnb #gnb_wrapper    { right: 0; }
    .open-gnb #gnb_control_box    {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0;
        width: auto;
        height: auto;
    }
    .open-gnb #gnb_control_box img    { opacity: 0; }
}

/**************************************************************
    탭 설정
***************************************************************/
#tab_list    {
    display: block;
    position: relative;
    overflow: hidden;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}
#tab_list li    {
    display: block;
    position: relative;
    float: left;
}
#tab_list li a    {
    display: block;
    position: relative;
    border-bottom-width: 0;
}
#tab_list li + li a    {
    border-left-width: 0px;
}

/**************************************************************
    페이지 설정
***************************************************************/
.pg_wrap    {
    display: block;
    position: relative;
    text-align: center;
    padding: 20px 0;
}
.pg_wrap .pg_page    {
    display: inline-block;
    position: relative;
    height: 30px;
    line-height: 28px;
    min-width: 30px;
    box-sizing: border-box;
    padding: 0 5px;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
    border-width: 1px;
    border-style: solid;
}
.pg_wrap .pg_control    {
    overflow: hidden;
    text-align: left;
    text-indent: -999px;
}
.pg_wrap .pg_control:before    { 
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-indent: 0;
    text-align: center;
    font-size: 14px;
}
.pg_wrap .pg_start, .pg_wrap .pg_end {min-width:42px;}
.pg_wrap .pg_start:before    { content: "처음"; }
.pg_wrap .pg_end:before        { content: "맨끝"; }
.pg_wrap .pg_prev:before    { content: "이전"; }
.pg_wrap .pg_next:before    { content: "다음"; }

/**************************************************************
    쪽지함 설정
***************************************************************/
.ui-chatting-memo        {
    position: relative;
    margin: 10px 0;
    padding: 10px 0;
}
.ui-chatting-memo .ui-message    {
    position: relative;
    padding: 10px 0 10px 80px;
}
.ui-chatting-memo .ui-message .ui-thumb        {
    position: absolute;
    top: 10px;
    left: 0;
    width: 70px;
    overflow: hidden;
}
.ui-chatting-memo .ui-message .info            {
    position: absolute;
    top: 10px;
    right: 10px;
}
.ui-chatting-memo .ui-message .ico-new        {
    display: inline-block;
    font-size: 11px;
    width: 15px;
    height: 15px;
    border-radius: 2px;
    background: #cb0000;
    text-align: center;
    line-height: 14px;
    font-style: normal;
    margin-left: 10px;
    color: #fff;
}
.ui-chatting-memo .ui-message .ico-total    {
    display: inline-block;
    font-size: 11px;
    width: 15px;
    height: 15px;
    border-radius: 2px;
    text-align: center;
    line-height: 14px;
    font-style: normal;
    margin-left: 5px;
    padding: 0;
}
.ui-chatting-memo .ui-message .text            {
    padding: 10px;
    line-height: 1.6em;
    margin: 10px 0;
    overflow: hidden;
    min-height: 50px;
}
.ui-chatting-memo .ui-message .text a        {
    display: block;
    position: relative;
    min-height: 50px;
}
.ui-chatting-memo .ui-message .text.mine        { opacity: .8; }
.ui-chatting-memo .ui-message .info strong        { font-weight: normal; }
.ui-list-control        { text-align: right; }
@media all and (max-width: 480px) {
    .ui-chatting-memo .ui-message                { padding-left: 60px; padding-right: 0; }
    .ui-chatting-memo .ui-message .ui-thumb        { width: 50px; left: 0; }
    .ui-chatting-memo .ui-message .ico-total    { display: none; }
    .ui-chatting-memo .ui-message .total-text    { display: none; }
    .ui-chatting-memo .ui-message .pc            { display: none; }
    .ui-chatting-memo .ui-message .mo            { display: inline; }
}

/*** 쪽지 보기 내부 리스트 ***/
.ui-chatting-memo #load_talk_prev        {
}
.ui-chatting-memo #load_talk_prev:before    {
}
.ui-chatting-list                        { position: relative; padding: 15px 0; }
.ui-chatting-list .ch-item                { position: relative; padding-left: 75px; margin-bottom: 15px;}
.ui-chatting-list .ch-item .ui-thumb    {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 70px;
    overflow: hidden;
}
.ui-chatting-list .ch-item .detail        { padding: 0; }
.ui-chatting-list .ch-item .info        {
    position: relative;
    text-align: right;
    padding: 5px;
}
.ui-chatting-list .ch-item p            {
    display: inline-block;
    padding: 0 5px;
}
.ui-chatting-list .ch-item .text        {
    min-height: 25px;
    margin: 0;
    padding: 10px;
    line-height: 1.6em;
}
.ui-chatting-list .ch-item.right                { padding-left: 0; padding-right: 70px; }
.ui-chatting-list .ch-item.right .ui-thumb        { left: auto; right: 0; }
.ui-chatting-list .ch-item.right .info            { text-align: left; }
.ui-chatting-list .ch-item.right .detail        { opacity: .8; }
.ui-memo-write                    { position: relative; height: 80px; } 
.ui-memo-write .textarea        { position: relative; width: 100%; height: 100%; }
.ui-memo-write .textarea textarea    { width: 100%; height: 100%; }
.ui-memo-write .win_btn            { margin-top: 5px; }
@media all and (max-width: 640px) {
    .ui-chatting-list .ch-item    { padding: 0 !important; }
    .ui-chatting-list .ch-item .ui-thumb    { display: none; }
}

/****************************************************
    Search Box
****************************************************/
.searc-sub-box    {
    position: relative;
    clear: both;
    padding: 30px 0px;
    max-width:500px;
    float:right;
}
.searc-sub-box:after{content:"";display:block;clear:both;}
.ui-search-box    {
    position: relative;
    padding-left: 100px;
    padding-right: 80px;
    margin-top: 5px;
}
.ui-search-box .sch_category    {
    position: absolute;
    top: 0;
    left: 0;
    width: 95px;
    line-height: 30px;
}
.ui-search-box .sch_button    {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
}
.ui-search-box span    {
    display: block;
    padding: 0 15px;
}
.ui-search-box select,
.ui-search-box input[type="text"],
.ui-search-box button    { display: block; width: 100%; }

/****************************************************
    Inventory Popup Viewer
****************************************************/
.inven-popup-viewer,
.inven-popup-viewer *        { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; font-family: 'Dotum'; }
.inven-popup-viewer                {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 370px;
    margin-left: -150px;
    margin-top: -185px;
    z-index: 9000;
    padding: 25px 40px;
    box-sizing: border-box;
}
.inven-item-box            { position: relative; margin-right: 25px; padding-left: 25px;  border-right-width: 0px; }
.inven_popup_viewer_close    { display: none; }
.inven-popup-on .inven_popup_viewer_close        { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 8900;  }
.inven_popup_viewer_close a        { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; OVERFLOW: hidden; text-indent: -999px; }
.inven-popup-viewer.default-form .inner-content    { position: relative; height: 100%; }
.inven-popup-viewer.default-form .inner-content .error { position: absolute; top: left: 0; right: 0;  text-align: center; line-height: 100px; font-family: 'Nanum Gothic'; }
.inven-popup-viewer.default-form .inner-content a        {  }
.inven-popup-viewer.default-form .info                { position: relative; text-align: center; padding: 15px 0; }
.inven-popup-viewer.default-form .info .ui-thumb    {  }
.inven-popup-viewer.default-form .info .ui-thumb img    { width: 50px; height: 50px; }
.inven-popup-viewer.default-form .text        { position: relative;  }
.inven-popup-viewer.default-form .text .title    { font-size: 14px; text-align: center; margin-bottom: 10px; padding-bottom: 10px;}
.inven-popup-viewer.default-form .text .title span    { display: none; }
.inven-popup-viewer.default-form .text .item-content-box        { height: 170px; overflow-y: auto; }
.inven-popup-viewer.default-form .text .item-content-box div    { line-height: 1.4em; text-align: center; }
.inven-popup-viewer.default-form .text div.default                {  }
.inven-popup-viewer.default-form .text div.effect                {  padding-top: 15px; }
.inven-popup-viewer.default-form .text div.memo                    {  padding-top: 15px; }
.inven-popup-viewer.default-form .control-box        { clear: both; position: relative; padding: 10px 0 0; text-align: center; }
.inven-popup-viewer.default-form .control-box li    { display: inline-block; }
.inven-popup-viewer.default-form .control-box li a    { display: block;  }
.inven-popup-viewer.default-form .add-item-form                    { position: relative; height: 30%; margin-top: 10px; }
.inven-popup-viewer.default-form .add-item-form .item-info        { position: relative; margin-bottom: 5px; }
.inven-popup-viewer.default-form .add-item-form .item-info label    { display: none; }
.inven-popup-viewer.default-form .add-item-form .item-info span        { display: block; font-size: 11px; padding-top: 8px; }
.inven-popup-viewer.default-form .add-item-form input                { width: 100%; box-sizing: border-box; }
.inven-popup-viewer.default-form .add-item-form .item-input            { position: relative; margin-bottom: 5px; }
.inven-popup-viewer.default-form .add-item-form .ui-style-btn.type4    { position: absolute; right: 87px; bottom: -44px; height: 25px; line-height: 25px; }
.inven-popup-viewer.default-form .send-item-form                        { position: relative; height: 30%; }
.inven-popup-viewer.default-form .send-item-form input,
.inven-popup-viewer.default-form .send-item-form select                    { width: 100%; box-sizing: border-box; }
.inven-popup-viewer.default-form .send-item-form input                    { padding: 0 10px; }
.inven-popup-viewer.default-form .send-item-form .item-input            { position: relative; margin-bottom: 5px; }
.inven-popup-viewer.default-form .send-item-form .ui-style-btn.type4    { position: absolute; right: 87px; bottom: -44px; height: 25px; line-height: 25px; }

#goto_top    { position: absolute; right: 10px; bottom: 50px; z-index: 50; /*position:fixed;bottom:50px;right:7%;display:none;width:40px;height:40px;text-align:center;font:40px/45px bold;color:#edd6a2;cursor:pointer; background:white;border-radius:40px;border:1px solid #f2dcaa;z-index:999; */}
@media all and (max-width: 1000px) {
    #goto_top    { bottom: 50px; }
}
#submenu    {
    display: block;
    position: absolute;
    top: 15px;
    left: 15px;
    width: 140px;
    box-sizing: border-box;
    padding: 10px 0;
}
#submenu li    {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
}
#subpage    {
    position: relative;
    margin-left: 180px;
    padding-top: 10px;
}
#subpage section    {
    padding-bottom: 50px;
}
@media all and (max-width: 1000px) { 
    #submenu    {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        padding: 10px;
        text-align: center;
        transform: translateY(0) !important;
    }
    #submenu li    {
        display: inline-block;
        padding: 5px;
        font-size: 12px;
    }
    #subpage    { margin-left: 0; }
}
.page-title            { font-size: 18px; padding: 10px 0 20px; }
.page-title span    { font-size: 14px; opacity: .8; font-weight: 400; }
.sub-title    { font-size: 14px; padding: 0 0 10px; } 
hr.padding    {
    display: block;
    clear: both;
    margin: 0;
    padding: 0;
    border: none;
    height: 30px;
}

.ui-memo-alram-box,
.ui-call-alram-box    {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    text-align: center;
}

.marquee span    {
    display: block;
    position:relative;
    overflow: hidden;
}
.marquee span i:after {
  content:"";
  white-space:nowrap;
  padding-right:50px;
}
 
.marquee span i {
  margin:0;
  padding-left:100%;
  display:inline-block;
  white-space:nowrap;
    -webkit-animation-name:marquee;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:marquee;
    -moz-animation-timing-function:linear;
    -moz-animation-duration:10s;
    -moz-animation-iteration-count:infinite;
    -ms-animation-name:marquee;
    -ms-animation-timing-function:linear;
    -ms-animation-duration:10s;
    -ms-animation-iteration-count:infinite;
    -o-animation-name:marquee;
    -o-animation-timing-function:linear;
    -o-animation-duration:10s;
    -o-animation-iteration-count:infinite;
    animation-name:marquee;
    animation-timing-function:linear;
    animation-duration:10s;
    animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

 

저 테두리 둘러진 상자 부분을 가운데로 보내려면 어떻게 해야하나요ㅜㅜ? 아무리 찾아봐도 너무 막혀서 질문드립니다..

이 질문에 댓글 쓰기 :

답변 5

레이아웃 관련 해서 봤을때는 열고 닫는 태그가 제대로 안되어 있는것 같습니다.



<!-- // 헤더 영역 -->
<section id="body">
<table width="1025" cellpadding="0" cellspacing="0" align="center" height="496">
    <tr>
        <td width="1842"><img src="주소" border="0"></td>
    </tr>
    <tr> <!-- 닫는태그는 어디에 있나요? -->
        <td width="1842" height="271" background="주소"> <!-- 닫는태그는 어디에 있나요? -->
            <p align="center"> <!-- 닫는태그는 어디에 있나요? -->
    <div class="fix-layout"> <!-- 닫는태그는 어디에 있나요? -->
<hr class="padding" />

 
 

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<hr class="padding" />
<tr>
        <td width="1842"><img src="http://mystious.dothome.co.kr/images/foot3.jpg" border="0"></td>
    </tr>
</table>
</div><!-- 어디서 열린건가요? -->
</section>

아 위에 세 개는 닫는 태그를 깜빡했었네요ㅜㅜ head랑 tail이 상하로 연결되는 부분이라 head의  <div class="fix-layout">에서 열리고 tail의 </div>에서 닫히는 걸로 알았는데 아닌가요ㅜㅜ? 그리고 일단 다시 닫아봐도 중앙정렬이 안 되네요..ㅠㅠ

링크를 보여주시면 더 빠르게 해결할 수 있을것같습니다ㅠㅠ

url 주소 남겨주셔야 자세한 원인 파악이 가능하겠네요 ㅠ

해결했습니다^^! head와 tail에 걸쳐서 있던 <table> 코드를 div로 감싸주고, div에 table 클래스를 먹여서 style.css에서 table쪽에


text-align:center;
background: url('상대경로주소') no-repeat;
background-position: center;

이거 삽입해서 해결했습니다! 혹시라도 저처럼 코드 잘 모르시는데..제로보드4 쓰다가 그누보드 넘어왔는데 레이아웃으로 표 썼더니 중앙정렬이 되지 않아 고생하시는 분들 게시면 참고하시라고 댓글 달아놔요!

답변을 작성하시기 전에 로그인 해주세요.
전체 123,117 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT