http://humank.ivyro.net/

위 주소에서 홈페이지를 만들고 있는데 메인페이지에는 이미지 하나만을 올리기 위해 변화를 많이 가했습니다. (이 글 아래에 css파일과 layout.html파일의 내용을 적었고, 첨부파일로도 올렸습니다)

그런데 두 가지 문제가 생겼습니다.

(1) 모니터 해상도를 크게 하면 이미지가 다 보이지만 만약 1024*768 이나 그보다 작게 하면 이미지의 아래 또는 오른쪽이 잘려서 안보이고 세로와 가로의 스크롤바도 안생깁니다. 아래 css파일의 body부분에서 overflow: scroll; 등을 넣어봤지만 소용이 없습니다. 작은 해상도에서 자동으로 스크롤바가 생겨 이미지를 다 볼 수 있게 하려면 어떻게 해야 하는지요?

(2) 그리고 메인메뉴를 이상하게 더 위로 끌어올릴 수가 없습니다. 

더 위로 올리려면 어떻게 해야 하는지요? 

참고로 이미지 하나만을 올리려고 아래와 같이 레이아웃과 css중 왼쪽 로그인창이나 column right 등 이미지 하나만을 올리는데 방해가 되는 내용을 대폭 삭제했습니다. 첨부파일로도 올렸습니다.

css 파일의 내용 :

@charset "utf-8";

#gnb { margin:0; padding:0; }

#lnb { margin:0; padding:0; }

#lnb ul { margin:0; padding:0; }

body { background:url(../images/white/dream.png) no-repeat top center;}

#bodyWrap { position:relative; width:980px; margin:0 auto;  }

#gnb { position:relative; top:0px; left:0; height:38px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}

#gnb li { list-style:none; float:left; padding-left:2px; position:relative; left:-2px; white-space:nowrap;}

#gnb li a { display:block; float:left; padding:13px 15px 0 15px; height:25px; font-weight:bold; color:#ffffff; white-space:nowrap; text-decoration:none; }

#gnb li a:hover,

#gnb li a:focus { color:#ffffff;}

#gnb li.on a { font-weight:bold; color:#ffffff; }

#contentBody { position:relative; width:980px; padding-bottom:30px; }

레이아웃 파일은 다음과 같습니다. 역시 불필요한 부분을 제거한 상태입니다.

<!--// js 파일 import -->

<!--%import("js/xe_official.js")-->

<!--// 레이아웃과 연동될 css 파일 import -->

<!--@if($layout_info->colorset == "white")-->

    <!--%import("css/white.css")-->

<!--@elseif($layout_info->colorset == "black")-->

    <!--%import("css/black.css")-->

<!--@else-->

    <!--%import("css/default.css")-->

<!--@end-->

<!--@if($layout_info->background_image)-->

<style type="text/css">

    body {  background:#FFFFFF url({getUrl()undefinedundefined}{$layout_info->background_image}) repeat-x left top; }

</style>

<!--@end-->

<!--@if(!$layout_info->colorset)-->

    {@$layout_info->colorset = "default"}

<!--@end-->

<div id="bodyWrap">

    <div id="header">

        <h1><!--@if($layout_info->logo_image)--><a href="{$layout_info->index_url}"><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /></a><!--@else-->&nbsp;<!--@end--></h1>

        <!-- GNB -->

        <ul id="gnb">

            <!-- main_menu 1차 시작 -->

            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->

                <!--@if($val['selected'])-->

                    {@ $menu_1st = $val }

                <!--@end-->

                <li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>

            <!--@endif--><!--@endforeach-->

        </ul>

    </div>

    <div id="contentBody">

            <!-- 컨텐츠 시작 -->

            {$content}

    </div>

    <ul id="footer">

        <!--@foreach($bottom_menu->list as $key => $val)-->

        <li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>

        <!--@endforeach-->

    </ul>

</div>

이상입니다.