mbg1346 - mjworks. 레이아웃스킨중에 문하우스에 사용중인 드랍메뉴 이미지

첨부파일	등록일	파일크기	다운 수
images.zip	2008.07.28	7.5KB	75

Extra Form
적용여부	적용

M

MoMo 2008.07.28 16:54

#comment_206859

안녕하세요 팔공산님, 잘 사용합니다.
감사합니다.우측 이미지링크 탐나네요.
방법을 모르겟네요 욕심많죠?
시원한여름 보내세요.

참 한가지만 여쭙께요 제홈에 상단에 여백이 생기는데 왜그런지 모르겟습니다.
어디서 고쳐야 하는지 좀 알려 주실수 잇는지요? 감사합니다.

팔공산 2008.07.28 17:21 글쓴이

#comment_206873

MoMo 님에게 달린 댓글

모모님 우측이미지링크는 이미지위젯안에 있는 cloud스킨을 약간 개조한 것입니다.

그리고 상단여백 문제를 이야기 하셨는데 지금 상태에서 님의 홈페이지만 보고서 대답해 드릴 수 있는 이야기라곤
css에서 여백을 조정하시라는 말 밖에 드릴게 없네요.
최소한 해당 css파일이나, 좀 덧붙이자면 latout.html파일 정도는 보아야 답을 드릴 수 있을 것 같군요.

M

MoMo 2008.07.28 20:44

#comment_206896

common.css 파일입니다

@charset "utf-8";
/* 
공통적으로 적용되는 스타일 
상단의 1차메뉴와 우측 서브메뉴의 설정은 각각의 CSS파일에서 설정
*/
body, div, ul, ol, li, p, h1, a {margin:0; padding:0;}
img {border:none;}
#bodyWrap { margin:0 auto; width:990px; position:relative; padding:0 10px; background:url(../images/mainmenu_bg.png) left top repeat-x #1a1a1a; }
/* Header - 로고, 1차메뉴, 로그정보, 추가메뉴, 검색폼 */
#headerWrap { width:990px; height:160px; overflow:hidden;}
#logo { position:absolute; left:0px; top:0px; height:160px; width:200px; overflow:hidden;}
#menuBoxWrap { padding:65px 0 0 190px; float:left; position:relative;}
#menuBox {width:620px; height:95px; list-style:none; }
#headerRight { float:right; width:170px; background:url(../images/extranav_bg.png) left top repeat-x; overflow:hidden;}
#headerRight ul { margin:5px 0; padding:5px 0 5px 10px; float:left; list-style:none; height:100px; overflow:hidden;}
#headerRight ul li {list-style:none; height:25px;}
#headerRight ul li a 
{ height:25px; color:#666666; font:9px Tahoma, Arial, "맑은고딕", "돋움"; padding:5px 10px; text-decoration:none; background:url(../images/nav_bull.gif) left 5px no-repeat; }
#headerRight ul li a:focus, #headerRight ul li a:hover { text-decoration:underline; color:#999999;}
#Log { width:75px}
#extraMenu { width:74px; border-left:#1a1a1a 1px solid;}
#searchBox  {background:url(../images/search_bg.png) left top; width:150px; padding:11px 10px 0 10px; height:30px; overflow:hidden; float:left;}
#searchBox .searchKeyword 
{width:90px; height:13px; float:left; color:#999999; background:#535353; border:solid 1px #5e5e5e; font:11px Tahoma, Arial, "맑은고딕", "돋움"; padding:2px 3px 1px 3px;}
#searchBox .searchButton { float:right; position:relative;}

#gnb { position:absolute; left:242px; top:85px; overflow:hidden; white-space:nowrap; }
#gnb li { float:left; list-style:none; position:relative; white-space:nowrap;}
#gnb li a { display:block; float:left; padding:12px 0px 0px 0px; width:82px; height:32px; color:#ffffff; white-space:nowrap; text-align:center; font-size:1.2em; font-weight:bold; text-decoration:none; }
#gnb li a:hover, 
#gnb li a:focus { color:#66CC00; background:url(../images/bgGnbOn.gif) no-repeat center top; }
#gnb li.on a { font-weight:bold; color:#fff; background:url(../images/bgGnbOn.gif) no-repeat center top;} 
.gnb_sub { position:absolute; left:242px; top:125px;  height:43px; overflow:hidden; white-space:nowrap;  }
.gnb_sub li { float:left; list-style:none; background:url(../images/sub_part.png) repeat-x left center; padding-left:0px; position:relative;  white-space:nowrap;}
.gnb_sub li a { display:block; float:left; padding:15px 13px 0 13px; height:30px; color:#a98a60; white-space:nowrap; text-decoration:none; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif;}
.gnb_sub li a:hover,
.gnb_sub li a:focus { color:white; background:url(../images/sub_on.png) repeat-x left top; }
.gnb_sub li.on a, .gnbin li.on a:hover {  color:white; background:url(../images/sub_top.gif) no-repeat center ; }

/* Content - 컨텐츠출력부, 우측메뉴 */
#contentWrap {width:990px; position:relative; overflow:hidden;}
#leftColumn { width:800px; float:left; padding:10px 0 10px 10px; position:relative; background:url(../images/content_top.png) left top no-repeat #FFFFFF; overflow:hidden;}
#contentBtom { position:absolute; left:0px; bottom:0px; width:10px; height:10px; background:url(../images/content_btom.png); overflow:hidden; z-index:999;}
#rightColumn {width:172px; float:right; overflow:hidden;}
.rightDiv {width:150px; padding:5px 10px 5px 12px;}
/* Footer */
#footerWrap {margin:0 auto; margin-bottom:50px; width:1010px; height:90px; position:relative; overflow:hidden;}
#footer {width:990px; height:70px; padding:0 10px; float:left; background: url(../images/footer_bg.png) top; overflow:hidden;}
#footer p {font:9px Tahoma, Arial, "맑은고딕", "돋움"; color:#777777;}
#footer p a {color:#999999; font-weight:bold; text-decoration:none;}
#footer p a:hover, #footer p a:focus { text-decoration:underline;}
#copyright { padding:15px 0 0 10px;}
#check { position:absolute; left:20px; top:40px;}
#rss { position:absolute; right:20px; top:12px;}
#by { text-align:right; position:absolute; right:20px; top:40px;}
#bottom { float:left; width:970px; height:20px; background: url(../images/footer_bg.png) bottom;}
#bottomRound {float:left}

layout.html 파일입니다.

<!-- 공통파일 -->
<!--%import("js/common.js")-->
<!--%import("css/common.css")-->
<!-- 상단메뉴 컬러셋 -->
<!--@if($layout_info->top_menu == "green")-->
    <!--%import("css/green_top.css")-->
<!--@elseif($layout_info->top_menu == "blue")-->
    <!--%import("css/blue_top.css")-->
<!--@else-->
    <!--%import("css/red_top.css")-->
<!--@end-->
<!-- 서브메뉴 컬러셋 -->
<!--@if($layout_info->sub_menu == "green")-->
    <!--%import("css/green_sub.css")-->
<!--@elseif($layout_info->sub_menu == "blue")-->
    <!--%import("css/blue_sub.css")-->
<!--@else-->
    <!--%import("css/red_sub.css")-->
<!--@end-->
<!-- 배경 설정 -->
<style>
<!--@if(!$layout_info->bg_img)-->
body { background:url(./images/bg.png) center top repeat-x #555555 }
<!--@else-->
body { background:url({$layout_info->bg_img}) center top repeat-x {$layout_info->bg_color} }
<!--@end-->
</style>
<!-- /배경 설정 -->
<div id="bodyWrap">
<!-- 헤더 -->
<div id="headerWrap">
<!-- 로고 -->
<h1 id="logo">
<a href="{$layout_info->home_url}"> <!--@if(!$layout_info->logo_img)--><img src="/images/logo.png" alt="logo" class="iePngFix"/><!--@else--><img src="{$layout_info->logo_img}" alt="logo" class="iePngFix"/><!--@end--></a>
</h1>
<!-- /로고 -->
<!-- 상단메뉴 -->
<!--1차메뉴-->
  <ul id="gnb">
            <!-- main_menu 1차 시작 -->
            {@$gnb_count = 0;}
            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
                <!--@if($val['selected'])-->
                    {@ $menu_1st = $val }
                <!--@end-->
                <li id="gnbli{$gnb_count}" <!--@if($val['selected'])-->class="on"<!--@end--> onmouseover="gnbinToggle({$gnb_count}, this)" ><a href="{$val['href']}" onfocus="this.blur()" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>{@$gnb_count++;}
            <!--@end--><!--@end-->
            <!-- main_menu 1차 끝 -->
  </ul>
  <!--//1차메뉴-->
  <script type="text/javascript">
   var gnb_count = {$gnb_count};
  </script>
  <!-- 2차 메뉴 -->
        {@$gnb_count = 0;}
        <!--@foreach($main_menu->list as $mkey => $mval)-->
    <!--@if($mval['text'])-->
          <!-- 왼쪽 2차 메뉴 -->
          <!--@if($mval['selected'])-->
            <ol id="gnb{$gnb_count}" class="gnb_sub" style="display:block;">
     <!--@if(!$mval['list'])--><li></li><!--@end-->
              <!--@foreach($mval['list'] as $key => $val)--><!--@if($val['text'])-->
     <li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" onfocus="this.blur();" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
     </li>
              <!--@end--><!--@end-->
      </ol>
  <script type="text/javascript">
   var gnb_count_now = {$gnb_count};
   reset_menu();
  </script>
          <!--@else-->
            <ol id="gnb{$gnb_count}" class="gnb_sub" style="display:none;">
     <!--@if(!$mval['list'])--><li></li><!--@end-->
              <!--@foreach($mval['list'] as $key => $val)--><!--@if($val['text'])-->
     <li><a href="{$val['href']}" onfocus="this.blur();" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
     </li>
              <!--@end--><!--@end-->
      </ol>
          <!--@end-->
          {@$gnb_count++;}
          <!--@end-->
        <!--@end-->
<!-- /상단메뉴 -->
<div id="headerRight">
<!-- 로그정보 -->
<ul id="Log">
<!--@if(!$is_logged)-->
 <li><a href="{getUrl('act','dispMemberLoginForm')}">Login</a></li>
 <li><a href="{getUrl('mid',$layout_info->target_mid,'act','dispMemberSignUpForm')}">Join</a></li>
<!--@else-->
    <li><a href="{getUrl('act','dispMemberLogout')}">Logout</a></li>
<!--@end-->
            
<!--@if($logged_info->is_admin == 'Y')-->
 <li><a href="{getUrl('','module','admin')}" onclick="window.open(this.href); return false;">Manage</a></li>
 <li><a href="{getUrl('act','dispLayoutAdminEdit','layout_srl',$layout_info->layout_srl)}">Edit</a></li>
 <li><a href="{getUrl('act','dispLayoutAdminModify','layout_srl',$layout_info->layout_srl)}">Modify</a></li>
 <li><a href="{getUrl('act','dispBoardAdminBoardInfo')}">Setup</a></li>
 <!--@else-->
 <li><a href="{geturl('act','dispMemberInfo')}">MyInfo</a></li>
 <li><a href="javascript:bookmarksite('{$layout_info->home_title}','{$layout_info->home_url}')">Bookmark</a></li>
 <li><a href="mailto:{$layout_info->mail}">Contact</a></li>
<!--@end-->
</ul>

<!-- /로그정보 -->
<!-- 추가메뉴 -->
<ul id="extraMenu">
<!--@foreach($extra_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>
<!--@end-->
</ul>
<!-- /추가메뉴 -->
<!-- 검색폼 -->
<div id="searchBox">
<form action="{getUrl()}" method="get">
<div style="visibility:hidden;"><input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" /></div>
<input type="text" name="is_keyword" class="searchKeyword" value="{$is_keyword}"/>
<input type="image" src="/images/search.png" class="searchButton" />
</form>
</div>
<!-- /검색폼 -->
</div>
</div>
<!-- /헤더 -->
<div id="contentWrap">
<div id="contentBtom"></div>
<!-- 컨텐츠출력부 -->
<div id="leftColumn">{$content}</div>
<!-- /컨텐츠출력부 -->
<div id="rightColumn">
<!-- 우측서브메뉴 -->
<!--@if($menu_1st['list'])-->
<div id="lnb_top"> </div>
<ol id="lnb">
<li><div id="subtitle">Submenu</div></li>
                {@ $idx = 1 }
                <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
    <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>
                    <!-- main_menu 3차 시작 -->
                    <!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )-->
     <ul>
                    <!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
      <li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['link']}</a></li>
                    <!--@end--><!--@end-->
     </ul>
                    <!--@end-->
    </li>
                {@$idx++}
                <!--@end--><!--@end-->
   </ol>
 <div id="lnb_btom"><img src="images/none.gif" /> </div>
             <!--@else-->  <!--@end--> 
<!-- /우측서브메뉴 -->
<!-- 위젯삽입 
<div class="title_r"></div>, <div class="rightDiv"></div>를 이용하여 위젯을 넣을 수 있습니다.
-->
<div class="title_r">Widgets</div>
<div class="rightDiv"></div>
<!-- /위젯삽입 -->
</div>
 

</div>
</div>
<!-- 풋터 -->
<div id="footerWrap">
<div id="footer">
<p id="copyright"><!--@if(!$layout_info->copyright)-->Copyright 2008 <b>mjworks</b>. all rights reserved.<!--@else-->{$layout_info->copyright}<!--@end--></p>
<img src="images/check.png" id="check" alt="" class="iePngFix"/>
<!--@if(!$layout_info->rss)-->
<!--@else--><a href="{$layout_info->rss}" target="_blank"><img src="images/rss.png" id="rss" alt="RSS FEED" class="iePngFix"/></a>
<!--@end-->
<p id="by">skin by <a href="http://mjworks.kr" target="_blank">MJWORKS</a><br />Powered by <a href="http://zeroboard.com" target="_blank">ZEROBOARD</a></p>
</div>
 
<img src="images/footer_btom_l.png" id="bottomRound" class="iePngFix" />
<div id="bottom"></div>
<img src="images/footer_btom_r.png" id="bottomRound" class="iePngFix" />
<!-- /풋터 -->
</div>

참고로 zbxe 설치 index.html 파일 입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="{Context::getLangType()}" xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <meta name="keywords" content=""> 
        <meta name="description" content=""> 
        <meta name="author" content=""> 
        <title>모모방송국</title> 
    </head> 
    <frameset rows="0%,100%" cols="*" border="0" framespacing="0"> 
        <frame src="" scrolling="NO" frameborder="NO" name="no"> 
        <frame src="/zbxe/index.php" frameborder="NO" name="main" marginwidth="0" marginheight="0" scrolling="auto"> 
    </frameset> 
    <noframes> 
    </noframes> 
    <body> 
    </body> 
</html>

죄송스럽지만 시간 나시는대로 살펴주시면 감사하겟습니다.

팔공산 2008.07.29 00:12 글쓴이

#comment_206926

css를 보아서는 상단에 여백이 생기지 않아야 하는데...
#bodyWrap { margin:0 auto; width:990px; position:relative; padding:0 10px; background:url(../images/mainmenu_bg.png) left top repeat-x #1a1a1a; }

아마 프레임을 나누어 놓아서 인 것 같습니다.
상단에 내용없는 프레인을 밑으로 내려보세요.

<frameset rows="100%,0%" cols="*" border="0" framespacing="0">
        <frame src="/zbxe/index.php" frameborder="NO" name="main" marginwidth="0" marginheight="0" scrolling="auto">
        <frame src="" scrolling="NO" frameborder="NO" name="no">
    </frameset>

그런데 프레임은 내용도 없는데 왜 나누어 놓았는지???

M

MoMo 2008.08.03 14:19

#comment_207452

안녕하세요 팔공산님

다름이 아니오라

현재 검은색 전체배경색상을..

바꾸려면 어디를 수정해야 하는지요

부탁 드립니다.

팔공산 2008.08.04 09:42 글쓴이

#comment_207555

MoMo 님에게 달린 댓글

모모님 전체배경색상을 바꾸실려면 layout.html.을 열어서 빨간색부분을 원하는 색상으로 바꾸어 주시면 됩니다.


<style>

body { background:url(./images/bg.png) center top repeat-x #555555 }

body { background:url({$layout_info->bg_img}) center top repeat-x {$layout_info->bg_color} }

</style>

M

MoMo 2008.08.04 18:20

#comment_207617

아니요 팔공산님 거기 말고요 메뉴 나오는 바탕화면요
원래 검정색으로 되어 있잖아요? 그곳을 이미지로 교체할려고 하거덩요
아무리 봐도 모르겠네요.팔공산님은 마루바닥처럼 바꾸셧잖아요..거기요
부탁 드립니다.

팔공산 2008.08.04 19:13 글쓴이

#comment_207631

MoMo 님에게 달린 댓글

common.css파일에서 빨간색부분 제거하면 되고요, 이미지로 넣고 싶으시면 mainmenu_bg.png를 교체하시면 됩니다.

#bodyWrap { margin:0px auto; width:990px; position:relative; padding:0 10px; background:url(../images/mainmenu_bg.png) left top repeat-x #1a1a1a; }

그리고 저는 빨간색부분 제거했고요, 레이아웃설정에서 배경이미지를 삽입한 것입니다.

M

MoMo 2008.08.05 18:49

#comment_207793

감사합니다 팔공산님

그런데 이미지만 교체 했는데 되네요..

M

MoMo 2008.08.09 12:24

#comment_208307

안녕하세요 팔공산님
덕분에 홈페이지 거의 완료 되어갑니다.

감사합니다.
한가지만 더 부탁 드릴게요.

회원만 우측마우스 사용할수 있게 하는 소스좀 부탁 드려도 될런지요?

팔공산 2008.08.11 12:25 글쓴이

#comment_208529

MoMo 님에게 달린 댓글

http://www.zeroboard.com/16531176
여기에 있네요. 검색의 생활화......^.^

모

모두인 2008.08.10 16:51

#comment_208448

안녕하세요. 아무리 소스를 봐고 이리해보고 저리해봐도 안되서 도움을 요청합니다.

왼쪽메뉴를 하단메뉴도 나오게 하려고 하는데 그러니까 3단메뉴죠. 소스 보시고
왼쪽메뉴나오는 소스를 어떻게 고쳐야 3단메뉴 카테고리도 추가되는지 알려주세요. 감사합니다.

<!-- sub_menu 2차 시작 -->
 {@$mnum = 1;}
 <!--@foreach($main_menu->list as $mkey => $sub_val)-->
   <!-- 왼쪽 2차 메뉴 -->
 <div id="menu{$mnum}" class="dropmenudiv">
 <!--@if($sub_val['list'])-->
  <div class="menuSubTop"></div>
  <div class="menuSub" onmouseout="document.getElementById('m_menu{$mnum}').className=''" onmouseover="document.getElementById('m_menu{$mnum}').className='active'">
   {@ $idx = 1 }
   <!--@foreach($sub_val['list'] as $key => $val)--><!--@if($val['link'])-->
   <a href="{$val['href']}" <!--@if($val['selected'])-->class="on"<!--@end--> <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a>
   {@$idx++}
   <!--@end--> <!--@end-->
  </div>
  <div class="menuSubBottom"></div>
 <!--@end-->
 </div>
 {@$mnum++;}
 <!--@else-->
 <!--@end-->

수정 삭제 댓글

소

소양강 2008.12.28 17:50

#comment_233087

안녕하세요?
오래만에 들러습니다.
벌써 한해마무리를 해야되는 시점입니다.
다름이 아니고 상단에 드랍메뉴 팀중 소스를 어디에 붙여야되는지...
이미지 파일은 어디에 넣어야 되는지 위에 모모님 처럼 common.css 중간에 붙여넣기 하고 이미지파일 업로드 했는데
제자리에 못넣은는지 드랍메뉴가 안되네요
죄송하지만 자세한 위치좀 알려 주시면 감사하겠습니다.
안녕히 계세요.

팔공산 2008.12.28 18:37 글쓴이

#comment_233097

소양강 님에게 달린 댓글

소양강님 오랜만이네요.
위의 팁만 적용한다고 드랍메뉴가 나타나지는 않습니다.
miworks레이아웃을 사용중이시라면 https://moonhouse.co.kr/zbxe/200764 이 팁을 참고하시고요.
다른 레이아웃에 드랍메뉴를 사용하실려면 https://moonhouse.co.kr/zbxe/155630 팁을 참고하시면 됩니다.

소

소양강 2008.12.28 23:57

#comment_233139

고맙습니다.
건강하시구요
새해에도 복많이 받으세요.

mjworks. 레이아웃스킨중에 문하우스에 사용중인 드랍메뉴 이미지

단축키

Articles