묻고답하기

고수님들 테그좀 살펴봐주세요!! (__)

2011.11.08 16:40

아즈고스트

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

노트북 및 데스트 탑으로 화면을 볼 경우 레이아웃이 잘 잡혀있는데요, 모바일에서 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">
    
    <input type="hidden" name="vid" value="{$vid}" />
    
    <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>
          
           <li><is_admin=="Y")-->http://www.lduhtrp.net/or80c37w1-LRPOPSRRLNMURTMOP" alt="" border="0"/></a></div>
           </div>

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

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

</div>

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

SC20111108-161827.jpeg [File Size:68.2KB/Download:27]

이 게시물을

글쓴이	제목	최종 글
XE	공지 글 쓰기,삭제 운영방식 변경 공지 [16]	2019.03.05 _by 남기남
은하항공	blogApi 짧은 주소 사용 불가시 어떻게 해야 될까요? [1]	2011.11.08 _by 백성찬
Nov25	게시판이 테이블 밖으로 튀어나와요;; [1]	2011.11.08 _by 날개!
아즈고스트	고수님들 테그좀 살펴봐주세요!! (__)
나는새	회원가입 스킨 문의드립니다^^
0지존0	페이지 위젯 추가후 에러...
미래파	faceoff 레이아웃 조절이안됩니다.
윤씨	모듈 설치 후 백지화
투비원	ㅜㅜ..도와주세요 [2]	2011.11.08 _by 투비원
neifirst	XE 1.5.0.8 업데이트 이후 생긴 문제들 [1]	2011.11.08 _by 툴툴스
나는새	회원가입시 약관을 추가하고 싶습니다 [1]	2011.11.08 _by 툴툴스
김정은818	티스토리에서 XE 1.5.0.8로 이전 시 게시글만 옮겨지지 않아요. [1]	2011.11.08 _by 툴툴스
샤르냥	이것 저것 질문좀 하겠습니다. [1]	2011.11.08 _by 툴툴스
박현근	1.3.0에서 1.5 코어 업그레이드 계획 중입니다만... [1]	2011.11.08 _by 툴툴스
stwat34	가짜회원 문제.. [1]	2011.11.08 _by 툴툴스
니케아	게시판에서 SNS 링크 없애는 방법 부탁드릴께요 [4]	2011.11.08 _by 니케아
NA답답이	회원가입,정보수정시 특정 레이아웃 지정 관련 [1]	2011.11.08 _by NA답답이
구글링기피증	스킨 수정시.. 설정 창이나 로그인창은 어떻게 수정 하나요..?
영원하리라~	xe.1.5.0.8. 에서 게시판 파일첨부 창이 안뜹니다. [2]	2011.11.08 _by 키아레인
코팅최	403 에러
이주연743	1.5.0.8 로 업데이트(쉬운설치에서) 눌렀더니 "error"
몽키매직	apmsetup 에서 작업한 파일을 웹호스팅에 옮기려는데요 [2]	2011.11.08 _by 순수의시절
이동식디스크	제로보드XE 1.5에서 동시접속자수 늘리기
jeonkjc	Fatal error: Call to a member function getNextPage() on a non-object in /home/hkpchurc/public_html/classes/template/TemplateHandler.class.php(220) : eval()'d code on line 57
막샷달인	.htaccess 파일이 문제를 일으킵니다 [1]	2011.11.08 _by 코팅최
magosu	조금수정해서 사용할려하는데...하는방법좀 알려주시면 감사하겠습니다. [1]	2011.11.07 _by kantsoft
바론	제로보드XE에 대한 초보의 질문입니다. [1]	2011.11.07 _by kantsoft
ymkkk	기본에디터에 리스트 출력하는 부분(<ul>,<li>) 코드 위치가 어디있나요 ㅠㅠ
mychul5	xe 1.5.0.8 다운로드시 어떤 파일을 설치해야 하나요 [1]	2011.11.07 _by 에릭리카드
yuninsik	제로보드4의 게시물과 회원정보를 xe로 이전할려면 어떻게 해야하나요? [1]	2011.11.07 _by 에릭리카드
홈페이지123	안녕하세요. 실명인증에 대해서 질문드립니다.

태그 쓰기

묻고답하기

고수님들 테그좀 살펴봐주세요!! (__)

댓글 0

About

Get involved

Blog

Download

Support

Showcase