묻고답하기

홈페이지를 새롭게 시작하고 있습니다.

노트북 및 데스트 탑으로 화면을 볼 경우 레이아웃이 잘 잡혀있는데요, 모바일에서 pc 버전으로 보면 중간(콘텐츠) 및 오른쪽(공간)이 상단 메뉴를 가려 버립니다.

 

테그 또는 소스에서 조금만 건들면 될 것 같은데 모바일 레이아웃에 맞추면 컴퓨터로 봤을 때 너무 내려와 있고, 컴퓨터로 레이아웃을 맞추면 모바일에서 메뉴가 무척이나 내려오세요 OTL

 

 

고수님들 도와주세요!!

 

사이트 : http://travellerroad.com

 

레이아웃 css

 

/* Site Layout - Body Wrap */
body { background:#ffffff; margin:0; padding:0; font-family:굴림; Dotum; position:relative; }
#bodyWrap { position:relative; width:970px;  z-index:1200;margin:0 auto; padding:0em 0 0 0; *padding:1.0em 0 1.0em 0;}

#logo { position:absolute; float:left; padding:10px 0 0 0; margin:0; }
#logo h1 { padding:0; margin:0; }

/* Site Layout - Header
#header { position:relative; width:980px; height:90px; border-top:10px solid #ffffff; background:url(../images/white/bgHeader.png) no-repeat right bottom; margin-top:0; margin-bottom:0; z-index:99;}
#header h1 { position:absolute; top:0; left:0px; margin:0; } */

/* Site Layout - Top */
#wrap_top { margin:0; padding:0; background:url(../img/bg_top.gif) repeat-x; }
#container_top { width:970px; height:40px; margin:0 auto; position:relative; z-index:1200;   }
#search_box { float:right; padding:1px; background:url(../img/search_box.gif) no-repeat; width:153px; height:23px; margin-top:7px; margin-right:-2px;}
#search_text_box { float:left; padding:4px 0 0 0;}
#search_button_box { float:right; padding:3px 7px 0 0 ;}
.search_textbox { height:18px; padding:0px 4px; margin:-2px 0 0 1px; width:110px; border:0; color:#999;}
.search_submit { height:18px; padding:2px; margin:2px;}

#top_gnb { float:right; padding-top:10px; margin:0; }

#top_gnb ul { float:right; padding:0; margin:0; text-align:right; }
#top_gnb li {display:inline; list-style:none; margin-right:1px; color:#000; font:10px "Trebuchet MS", Tahoma; white-space:nowrap; vertical-align:top; text-decoration:none;}
#top_gnb li strong {color:#7694D0; font-family:Gulim;}
#top_gnb li a {color:#000;letter-spacing:0px; text-decoration:none;}
#top_gnb li a:hover {display:inline; color:#2B61CD; text-decoration:none; }
#top_gnb .new {position:absolute; display:block; width:23px; height:14px; top:66px; right:450px; z-index:101;}


/* Site Layout -  Menu */
/* Menu */
#gnb {float:right; top:20px; height:55px; margin:65px 0 0 0; padding:0 0 0 0px; }
#gnb ul,
#gnb li { float:left; list-style:none;  position:relative font:13px Gulim; }
#gnb li .addon_menu_new { display: block; left:95px; *left:42px;}
#gnb li a { display:block; float:left;  width:115px; height:44px;  padding:13px 0 0 0;  color:#222; text-align:center;  text-decoration:none; }
#gnb li a:hover {font-weight:bold; color:#2B61CD; }
#gnb li.on a {font-weight:bold; color:#2B61CD; height:44px; padding:11px 0 0 0; }

#lnb { margin:0; padding:5px 0 0 0;}
#lnb li { list-style:none; margin:0; padding:2px 0 5px 15px; }
#lnb li a { font:12px Malgun Gothic; margin:0; padding:0 5px 7px 3px; width:123px; display:block; border-bottom:1px dotted #dedede; position:relative; z-index:99; text-decoration:none; background:url(../images/white/bulletLnb.gif) no-repeat right;}
#lnb li a:hover ,
#lnb li a:focus { color:#0072BC; margin:0; background:url(../images/white/bulletLnbOn.gif) no-repeat right;}
#lnb li.on a { margin:0; font-family:Malgun Gothic; font-weight:normal; color:#0072BC; background:url(../images/white/bulletLnbOn.gif) no-repeat right;}
#lnb li.on a:hover,
#lnb li.on a:focus { margin:0; font-weight:normal;}
#lnb li ul { display:block; position:relative; margin:0; width:87px; padding:0 4px 0 0; position:relative; overflow:hidden;}
#lnb li.on ul { display:block;}
#lnb li ul li { padding:0; margin:0; position:relative; top:-1px; border-bottom:1px dotted #dedede; }
#lnb li ul li a { padding:5px 5px 5px 15px; margin:0; width:87px; color:#818181 !important; border:none; background:none !important; border:none !important; background:url(../images/white/bulletLnbUl.gif) no-repeat 73px center!important;}
#lnb li ul li a:hover,
#lnb li ul li a:focus { font-weight:normal !important; color:#0072BC !important; background:url(../images/white/bulletLnbUlOn.gif) no-repeat 73px center!important; }
#lnb li.on ul li.on a { color:#0072BC !important; font-weight:normal !important; background:url(../images/white/bulletLnbUlOn.gif) no-repeat 73px center!important;}

/* Site Layout - Content Body */
#contentBody { position:relative; border:0; width:980px; margin:0; padding:0; overflow:hidden; }

/* Site Layout - Column Left */
#columnLeft { position:absolute; float:left; margin-top:152px; padding:0; width:120px; border:1px solid #e1e1e1; overflow:hidden;}
#columnLeft .leftbox { width:120px; clear:both; }
#columnLeft .leftbox_top { position:relative; width:120px; height:50px; padding-top:25px; color:#fff; font:14px Malgun Gothic; font-weight:bold; overflow:hidden; background-color:#595959;  text-align:center;}
#columnLeft .leftbox_bottom { position:relative; width:120px;}
#columnLeft .mask {padding-top:5px; }

/* Site Layout - Column Center */
#columnCenter { float:left; overflow:hidden;  margin-left:130px; margin-top:11px; padding-top:0; }
#columnCenter .bg {overflow:hidden; margin:0; width:610px; text-align:left; }
#columnCenter .content {overflow:hidden; margin:15px 0px 0px 0px;  }
#contentCenter_top { position:relative; width:610px; height:10px; _margin-top:10px;  padding:0; text-align:center; overflow:hidden;}
#contentCenter_bottom { position:relative; width:610px; height:10px; padding:0; text-align:center; overflow:hidden;}
#content { width:100%; overflow:hidden;}

/* Site Layout - Column Right */
#columnRight { float:left; width:210px; margin:35px 0 20px 10px; border:1px solid #e1e1e1; }
#columnRight .right {width:210px; }
#columnRight .right_top { position:relative; width:210px; height:10px; margin:0; padding:0; }
#columnRight .right_bottom { position:relative; width:210px; height:10px; margin:0; padding:0; }
#columnRight .profile {width:210px; padding:0 10px;}
#columnRight .mask {padding-top:5px; }

/* Site Layout - Bottom */
#wrap_top2 {background-color:#282828; margin-top:0px; overflow:hidden; width:100%;}
#wrap_bottom2 { /*background:url(../img/bg_bottom.gif) repeat-x 0 50px;*/ background-color:#F7F3EF; margin-top:180px; overflow:hidden; width:100%;border-top:1px solid #DFDEDC; }
bottom_gnb {margin:0; position:relative; text-align:center; clear:both; }
#bottom_gnb ul { margin:15px 0 20px 0; padding:0;text-align:center;}
#bottom_gnb li {display:inline; list-style:none; color:#333333; font-family:tahoma; padding:0 2px 0 2px; font-size:1.0em; white-space:nowrap; vertical-align:bottom;}
#bottom_gnb li strong {color:#B4B4B4; font-weight:normal; font-size:.95em; font-family:tahoma; padding:0;}
#bottom_gnb li a {color:#737373;letter-spacing:0px; text-decoration:none;}
#bottom_gnb li a:hover {display:inline; color:#2b61cd; text-decoration:none; }

/* ModalWindow */
.jqmOverlay { background-color:#000; }
#loginWindow{ display:none; position:absolute; background-color:#f3f3f3; top:10px; left:50%; padding:5px; width:340px; margin-left:-196px; z-index:10000; border:1px solid #d4d4d4; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;  }
.loginWindow.open{ display:block; }
.loginWindow .modalWindow{ display:block; position:fixed; border:0; left:0; top:0; _position:absolute; width:100%; height:100%; background:#fff; opacity:.3; filter:alpha(opacity:70);}
.loginWindow .loginLayer{ position:absolute; width:289px; top:120px; left:50%; padding:30px; border:2px solid #737373; margin:0 0 0 -175px; background:#fff; }
.loginWindow .loginLayer form{ display:none; *zoom:1; margin:0 0 29px 0;}
.loginWindow .loginLayer form:after{ content:""; display:block; clear:both;}
.loginWindow .loginLayer form legend{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden;}
.loginWindow .loginLayer fieldset{ border:0; margin:0; padding:0;}
.loginWindow .loginLayer.loginTypeA form.typeA,
.loginWindow .loginLayer.loginTypeB form.typeB{ display:block;}
.loginWindow .loginLayer dl{ margin:0; padding:0 0 1px 0;}
.loginWindow .loginLayer dt{ font-size:12px; font-weight:bold; color:#868d95; margin:0 0 2px 0;}
.loginWindow .loginLayer dd{ margin:0 0 21px 0;}
.loginWindow .loginLayer .inputText{ width:269px; height:31px; padding:6px 9px 0 9px; border:1px solid #ddd; font:20px Tahoma; color:#333;}
.loginWindow .loginLayer .inputText:focus{ background-color:#fbfbfb;}
.loginWindow .loginLayer .inputCheck{ margin:0 3px 0 0; width:13px; height:13px; vertical-align:middle;}
.loginWindow .loginLayer.loginTypeA .inputText{ background-image:url(../images/white/bgLoginText.gif); background-repeat:no-repeat; background-position:right top;}
.loginWindow .loginLayer .keep{ margin:0; float:left; font-size:12px; line-height:normal; white-space:nowrap;}
.loginWindow .loginLayer .keep label{ color:#555;}
.loginWindow .loginLayer .loginButton,
.loginWindow .loginLayer .loginButton input{ position:relative; border:0; color:#fff; font-size:12px; font-weight:bold; display:inline-block; height:36px; line-height:36px; background-color:transparent; background-image:url(../images/white/buttonLoginAction.gif); background-repeat:no-repeat; overflow:visible;}
.loginWindow .loginLayer .loginButton{ float:right; background-position:0 0; right:11px;}
.loginWindow .loginLayer .loginButton input{ left:11px; background-position:right 0; padding:0 30px 0 45px; cursor:pointer;}
.loginWindow .loginLayer .help{ margin:0 -30px -30px -30px; padding:14px 0; list-style:none; text-align:center; background:#fafafa; border-top:1px solid #f2f2f2;}
.loginWindow .loginLayer .help li{ display:inline; font-size:12px; line-height:11px; padding:0 0 0 5px;}
.loginWindow .loginLayer .help li.join{ font-weight:bold; }
.loginWindow .loginLayer .help li.find{ border-left:1px solid #b3b3b3;}
.loginWindow .loginLayer .help li.typeA,
.loginWindow .loginLayer .help li.typeB{ display:none; border-left:1px solid #b3b3b3;}
.loginWindow .loginLayer.loginTypeA .help li.typeA,
.loginWindow .loginLayer.loginTypeB .help li.typeB{ display:inline;}
.loginWindow .loginLayer .help li a{ text-decoration:none; color:#555;}
.loginWindow .loginLayer .help li a:hover{text-decoration:none; color:#0072BC;},
.loginWindow .loginLayer .help li a:active,
.loginWindow .loginLayer .help li a:focus{ text-decoration:underline;}
.loginWindow .loginLayer .close{ position:absolute; cursor:pointer; border:0; padding:0; top:0; right:0; width:27px; height:27px; background:transparent url(../images/white/buttonCloseX.gif) no-repeat center center;}
.loginWindow .loginLayer .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;}


/* White Skin - End */

 

레이아웃 설정 테그

 

<!-- 로그인 및 상단메뉴 -->
   <div id="wrap_top">
 <div id="container_top">
<div id="search_box">
   <form action="{getUrl()}" method="post" id="isSearch">
    <!--@if($vid)-->
    <input type="hidden" name="vid" value="{$vid}" />
    <!--@end-->
    <input type="hidden" name="mid" value="{$mid}" />
    <input type="hidden" name="act" value="IS" />
    <input type="hidden" name="search_target" value="title_content" />
    <div id="search_text_box"><input name="is_keyword" title="keyword" type="text" size="19" class="search_textbox" /></div>
    <div id="search_button_box"><input type="image" onclick="javascript:;" src="img/btn_search.gif" alt="{$lang->cmd_search}" class="submit"/></div>
   </form>
  </div>
    <div id="top_gnb">
        <ul>
          <!--@if($logged_info)-->
           <li><is_admin=="Y")-->http://www.lduhtrp.net/or80c37w1-LRPOPSRRLNMURTMOP" alt="" border="0"/></a></div>
           </div>

 

  

   <div id="contentBody">

           <div id="columnCenter">

           <div id="contentCenter_top"></div>

           <div class="bg">

           <div class="content">
             {$content}
           </div>

           </div>
           <div id="contentCenter_bottom"></div>

           <img src="./images/white/blank.gif" alt="" class="mask" />
</div>
<div id="columnRight">

           <div class="rightbox_top"></div>
           <div class="rightbox">
          
           <!-- 우즉 위젯 시작 -->

           <!-- 우즉 위젯 끝 -->
            </div>

            <center>우측 위젯</center>
                      </div>


</div></div>
           <!-- 하단 메뉴 -->
           <div id="wrap_bottom2">
           <center>하단 메뉴 설정</center> </div>

글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
mychul5 1.5.0.8버젼의 파일박스의 용도 [1] 2011.11.09 by 감로수
몽키매직 메뉴추출에서 마지막 bar 없애는 방법  
한용길 구문에러 메시지 뜹니다. 무슨뜻인가요? [1] 2011.11.09
서은석985 게시판 분류 사용시 메뉴에러 file  
Huckleberry Finn 회원가입 시 오류가 뜨는데 어떻게 처리하죠? [1] file 2011.11.09 by 송동우
어쭈구리メ mid 포워더가 잘안되는데요..  
냥냥공주 외부페이지 등록 후 모바일에서 보여지는 해상도 차이[송동우님 도와주세요]  
준돌이 소셜XE 말인데요.  
nzeo초보 게시판 목록에서 목록에 나타나는 글자 수를 제한하려면 어떻게 하면 되나요?  
티오짱 회원가입을 클릭해도 회원가입폼이 안나오네요  
nzeo초보 일반회원도 로그인하면 회원정보보기 메뉴에 '관리'가 뜨는데 관리자에게만 나타나게 하려면요?  
digi Textyle Hub 설정이 변경되지 않는데....  
유메피아 댓글창에 있는 내용이 댓글창을 벗어납니다. file  
서울여우 이미지 삽입 / xe 1.1.0 버전 파일은 어디서 다운 받나요? file  
digi Content 위젯 사용시 제목+내용 항목이 나타나지않네요?  
키스미베이베 메뉴클릭시 팝업창띄우기  
자유로이 외부 이미지 썸네일 생성이 안됩니다. [1] 2011.11.08 by 오뚝이
서은석985 게시판 분류 클릭시 메뉴 에러 file  
리든 아오 .. 미치겄내  
김형준509 Unknown column 'is_secret' in 'field list' [1] 2011.11.08 by bluebear
히이릯 배경 색 지정 file  
은하항공 blogApi 짧은 주소 사용 불가시 어떻게 해야 될까요? [1] 2011.11.08 by 백성찬
Nov25 게시판이 테이블 밖으로 튀어나와요;; [1] 2011.11.08 by 날개!
아즈고스트 고수님들 테그좀 살펴봐주세요!! (__) file  
나는새 회원가입 스킨 문의드립니다^^  
0지존0 페이지 위젯 추가후 에러... file  
미래파 faceoff 레이아웃 조절이안됩니다. file  
윤씨 모듈 설치 후 백지화  
투비원 ㅜㅜ..도와주세요 [2] 2011.11.08 by 투비원
neifirst XE 1.5.0.8 업데이트 이후 생긴 문제들 [1] 2011.11.08 by 툴툴스