상단 로고 및 검색창 정렬 좀 부탁드립니다.

상단 로고 및 검색창 정렬 좀 부탁드립니다.

QA

상단 로고 및 검색창 정렬 좀 부탁드립니다.

본문

css 로 되어 있어서 ㅡ.ㅡ;;;;

배경 : 그누엑스이 빌더 설치사용 중

상단 왼편에 로고 가 있구요  오른쪽편에 검색창이 있습니다.

------------------------------------------------------
1. 원하는 스타일 :  좌우로 서로 다른 로고 배치 /  중앙에 검색창 배치  입니다.


해당 소스는 아래....

<div class="gnb">
<dl class="logo clear">
<dt> <!-- 로고 나타나는 -->
<a href="<?php echo G5_URL ?>"><img src="<?php echo XE_THEME_SKIN_IMG_URL ?>/main_top_logo.jpg" alt="<?php echo $config['cf_title'] ?>"></a>
</dt>
<dd> <!-- 검색창 나타나는 -->
<fieldset id="all_search">
<form name="fsearchbox" method="get" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);">
<input type="hidden" name="sfl" value="wr_subject||wr_content">
<input type="hidden" name="sop" value="and">
<div class="search_box"><input class="search_input" name="stx" type="text" maxlength="20"></div>
<div class="search_btn"><input type="image" src="<?php echo XE_THEME_SKIN_IMG_URL ?>/search_btn.png" width="89" height="40"></div>
</form>
<script>
function fsearchbox_submit(f)
{
if (f.stx.value.length < 2) {
alert("검색어는 두글자 이상 입력하십시오.");
f.stx.select();
f.stx.focus();
return false;
}

// 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
var cnt = 0;
for (var i=0; i<f.stx.value.length; i++) {
if (f.stx.value.charAt(i) == ' ')
cnt++;
}

if (cnt > 1) {
alert("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다.");
f.stx.select();
f.stx.focus();
return false;
}

return true;
}
</script>
</fieldset>
</dd>
</dl><!-- #logo -->
</div><!-- #gnb -->





CSS 파일 발췌부분


#header .logo {height:80px}
#header .logo dt {float:left;padding-top:10px}
#header .logo dd {float:right;padding-top:25px}
/* #header .logo dd {float:right;padding-top:25px} */

#all_search {position:relative;width:335px;height:40px;}
#all_search .search_box {float:left;width:246px;height:40px;margin:0;text-align:left;background:url("../img/search_bg.png") no-repeat left top}
#all_search .search_btn {float:left;width:89px;height:40px;margin:0}
#all_search .search_input {width:220px;height:20px;text-align:left;vertical-align:middle;background:transparent;font-size:13px;font-weight:bold;line-height:20px;color:#666;margin:10px 0 0 20px;border:0}

이 질문에 댓글 쓰기 :

답변 1

css에서 오른쪽 로고는 가령...

#header .logo dr {float:right;padding-top:10px}
로 입력하면 될 듯 합니다.

head.php에서 로고 부분 소스를 복사해서... 검색창 소스 아래에 넣고... 'dt'로 감싼 부분을 'dr'로 바꾸고요.

그리고... 검색창 부분은...
#all_search {position:relative;width:335px;height:40px;}
에서 width를 조정하면 되겠네요.

로고에서 float 속성이 둘 다 가능할지 모르겠네요. 초보라...
안되면 오른쪽 로고도 position:relative을 사용해보십시오.
답변을 작성하시기 전에 로그인 해주세요.
전체 123,900
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT