묻고답하기
고수님들 테그좀 살펴봐주세요!! (__)
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">
<!--@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>
