묻고답하기
검색창 사이즈를 살짝 줄이고 싶어요 ㅠㅠ
2018.12.23 17:14
지금 사용하고 있는 레이아웃 스킨이 xe design team Pure입니다.
http://www.xpressengine.com/?mid=download&package_srl=21302525
완전 개초보가 홈페이지를 검색하면서 만들다보니 힘드네요...ㅋ
질문입니다. 제가 상단메뉴를 7개까지 만들면 아래처럼 이상없는데
+1개를 더 만들면 이렇게 검색창이 밑으로 삐져나옵니다.
검색창 사이즈를 살짝,...Saerch... 에서 e나 r까지만 줄이면 +1개 메뉴 생성하더라도 검색창이 위에 있을거 같은데.
사이즈를 어떻게 줄이는지 모르겠네요...
사이트디자인설정-레이아웃-HTML/CSS에서 뭔가 만지면 될거 같은데 ㅋㅋ 까막눈이라 ㅠ.ㅠ
어디를 어떻게 고치면 되는지 알려주세요~ 부탁드립니다.
<!--%import("css/layout.css")-->
<div class="header">
<div class="gnb">
<div class="menu">
<div class="logo">
<!--@if($layout_info->header_logo_url)-->
<a href="{$layout_info->header_logo_url}">
<!--@else-->
<a href="/">
<!--@end-->
<!--@if($layout_info->header_logo_image)-->
<img src="{$layout_info->header_logo_image}" alt="{$layout_info->header_logo_url}" class="iePngFix" /></a>
<!--@else-->
<img src="img/nologo.png" alt="logo here" class="iePngFix" /></a>
<!--@end-->
</div>
<ul class="list">
{@ $idx = 0}
<li class="name" loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">
{$val1['link']}
</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
</li>
</ul>
{@ $idx++}
</li>
</ul>
<div class="login">
<!--@if(!$is_logged)-->
<ol>
<li><a href="{getUrl('act','dispMemberSignUpForm')}">회원가입</a></li>
<li class="signin"><a href="#" onclick="jQuery('#loginWindow').css('display','block');" accesskey="L">로그인</a></li>
</ol>
<!--@else-->
<ol>
<li><a href="{getUrl('act','dispMemberInfo')}">회원정보</a></li>
<li cond="$grant->manager"><a href="{getUrl('','module','admin')}" target="_blank">관리</a></li>
<li class="signin"><a href="{getUrl('act','dispMemberLogout')}">로그아웃</a></li>
</ol>
<!--@end-->
</div>
<div class="xdt_search">
<form action="{getUrl()}" method="post" class="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" />
<input name="is_keyword" type="text" id="search_input" class="inputText" title="Search..." value="Search..." onblur="if (this.value.length==0) {this.value='Search...'}" onfocus="if(this.value==this.title)this.value='';return false;" />
<input type="image" src="img/search.png" alt="{$lang->cmd_search}" class="submit subButton" />
</form>
</div>
</div>
</div>
</div>
<div class="line">
</div>
<div class="body">
<!--@if($layout_info->body_style=="A")-->
<div class="article_2">
{$content}
</div>
<div class="aside">
<!--@if($layout_info->aside_ads)-->
<div class="ads">
{$layout_info->aside_ads}
</div>
<!--@end-->
<!--@if($layout_info->widget_a)-->
<div class="widget">
<p>{$layout_info->widget_a_title}</p>
{$layout_info->widget_a}
</div>
<!--@end-->
<!--@if($layout_info->widget_b)-->
<div class="widget">
<p>{$layout_info->widget_b_title}</p>
{$layout_info->widget_b}
</div>
<!--@end-->
</div>
<!--@else-->
<div class="article_1">
{$content}
</div>
<!--@end-->
</div>
<div class="footer">
<ul class="menu">
<li loop="$footer_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></li>
</ul>
<p class="copy">
{$layout_info->footer_copy}
</p>
</div>
<!--@if(!$is_logged)-->
{@ $member_config = MemberModel::getMemberConfig(); }
<!--%import("./filter/login.xml")-->
<!--@if($member_config->enable_openid=='Y')--><!--%import("./filter/openid_login.xml")--><!--@end-->
<!-- loginWindow -->
<div id="loginWindow" class="loginWindow">
<!-- class="loginWindow" | class="loginWindow open" -->
<span class="modalWindow"></span>
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
<p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
<div id="loginLayer" class="loginLayer loginTypeA">
<!-- class="loginLayer loginTypeA" | class="loginLayer loginTypeB" -->
<button type="button" class="close" onclick="document.getElementById('loginWindow').style.display='none'" accesskey="X"><span>Close Login Layer</span></button>
<form action="" method="post" class="typeA" id="commonLogin" ruleset="@login" >
<input type="hidden" name="success_return_url" value="{getRequestUriByServerEnviroment()}" />
<input type="hidden" name="act" value="procMemberLogin" />
<fieldset>
<legend>XE Login</legend>
<dl>
<dt><label for="uid">로그인</label></dt>
<dd><input name="user_id" type="text" class="inputuid" id="uid" /></dd>
<dd><input name="password" type="password" class="inputupw" id="upw" /><span class="loginButton"><input type="submit" value="{$lang->cmd_login}" /></span></dd>
</dl>
<p class="keep">
<input name="keep_signed" type="checkbox" id="keepA" value="Y" class="inputCheck" onclick="if(this.checked) return confirm('{$lang->about_keep_signed}');"/>
<label for="keepA">{$lang->keep_signed}</label>
</p>
</fieldset>
</form>
<div class="help">
<ol>
<li><a href="{getUrl('act','dispMemberSignUpForm')}">회원가입</a></li>
<li><a href="{getUrl('act','dispMemberFindAccount')}">아이디,비밀번호 찾기</a></li>
<li><a href="{getUrl('act','dispMemberResendAuthMail')}">인증 메일 재발송</a></li>
</ol>
</div>
<button type="button" class="close" onclick="document.getElementById('loginWindow').style.display='none'" accesskey="X"><span>Close Login Layer</span></button>
</div>
</div>
<!-- /loginWindow -->
<!--@end-->
css 부분을 수정하셔야 문제가 해결될겁니다. 위치는
해당 레이아웃의 /layouts/xdt_pure/css/layout.css 로 가신 다음에
43라인부터 72리안까지 내용중에
/*search*/
.header .gnb .menu .xdt_search {
width:160px;
height:23px;
border:1px solid #dedede;
border-radius:5px;
background:#fff;
float:right;
margin:6px 5px;
z-index:10;
}
.header .gnb .menu .xdt_search .isSearch {
position:relative;
float:left;
height:23px;
border-radius:5px;
}
.header .gnb .menu .xdt_search .isSearch .inputText {
position:relative;
width:120px;
height:15px;
float:left;
color:#ccc;
outline:0 none;
border:0;
vertical-align:middle;
margin:0;
padding:4px 8px;
border-radius:5px;
}
에서 각 빨간색인 160과 120을 줄이시면 사이즈가 줄어들겁니다.