검색창 위치를 바꾸고 싶습니다.

검색창 위치를 바꾸고 싶습니다.

QA

검색창 위치를 바꾸고 싶습니다.

본문

사이트에 검색창이 화면 중앙도 아니고 뫤 왼쪽도 아닌 어정쩡한 위치에 출력되고 있습니다.

3552651534_1589793623.5591.jpg

 

정 중앙이거나 로그인 버튼 앞으로 이동하려면 어디를 수정해야할까요?

 

CSS 소스는 다음과 같습니다.

.hd_sch_wr{float:right;position:relative;left:233px;top:1px;right:0;width:228px;}
#hd_sch h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_sch{border:1px solid #666;background:#353535;border-radius:5px;overflow:hidden}
#hd_sch #sch_stx {padding-left:10px;height:30px;width:195px;border:0;border-right:0;float:left;background:#353535;color:#999;font-size:1.1em}
#hd_sch #sch_submit {height:28px;border:0;background:#353535;color:#999;width:28px;float:left;cursor:pointer;font-size:18px}

 

 

이 질문에 댓글 쓰기 :

답변 2

.hd_sch_wr{float:right;position:relative;left:233px;top:1px;right:0;width:228px;}

 

포지션값이 있으니 float를 넣어도 안먹히는거 아닐까요

 

position:relative;left:233px;top:1px;right:0; 삭제

 

아래 좌표 참고해 작업해 보세요.

https://sir.kr/qa/359510

https://homzzang.com/b/css-256

예전에도 도와주셨었는데 잘 안되네요.. ㅠㅜ
알려주신 링크로 수정할 내용을 찾아 수정해봤는데도 위치가 변하질 않습니다.

혹시해서 상단레이아웃 관련 CSS 소스를 남겨봅니다.

/* 상단 레이아웃 */
#hd {border-top:1px solid #151515}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}

#hd_wrapper {position:relative;margin:0 auto;padding:5px 0;height:100px;zoom:1}
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}

#logo {text-align:center; margin:0; padding: 5px 0 0;position:relative; top:25px}

.hd_sch_wr{float:right;position:relative;left:233px;top:1px;right:0;width:228px;}
#hd_sch h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_sch {border:1px solid #666;background:#353535;border-radius:5px;overflow:hidden}
#hd_sch #sch_stx {padding-left:10px;height:30px;width:195px;border:0;border-right:0;float:left;background:#353535;color:#999;font-size:1.1em}
#hd_sch #sch_submit {height:28px;border:0;background:#353535;color:#999;width:28px;float:left;cursor:pointer;font-size:18px}

#sbn_side{position:absolute;top:20px;right:0}

#tnb {border-bottom:1px solid #222;background:#222;line-height:35px}
#tnb h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#tnb ul {margin:0 auto;zoom:1}
#tnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#tnb li {float:right;border-left:1px solid #222;margin-bottom:-1px;font-size:0.92em}
#tnb div {float:left;border-left:1px solid #222;margin-bottom:-1px;font-size:0.92em}
#tnb a {display:inline-block;padding:0 10px;color:#999;line-height:35px}
#tnb a:focus, #tnb a:hover {color:#ff0000;}

#tnb .tnb_admin a{color:#ff0000;}
#tnb .tnb_left{float:left}
#tnb .tnb_left a{;padding:0 14px}
#tnb .tnb_cart{border-right:1px solid #666;}
#tnb .tnb_community{border-right:1px solid #666}
#tnb .tnb_community i{font-size:15px}
#tnb .tnb_community{background:#e7e7e7;font-weight:bold;}
#tnb .tnb_community:focus, #tnb .tnb_community:hover {color:#333;border-bottom:0}
#tnb .tnb_community a{color:#253dbe;border-bottom:1px solid #e7e7e7}

#hd_qnb{float:right;margin-top:20px}
#hd_qnb:after {display:block;visibility:hidden;clear:both;content:""}
#hd_qnb li{float:left;font-size:1.083em;line-height:15px;position:relative;text-align:center;margin:0 10px}
#hd_qnb li span {display:block;margin-top:5px;font-size:0.92em}
#hd_qnb li a{display:block}
#hd_qnb li i{display:inline-block;width:40px;line-height:40px;border-radius:25px;background:#fff;text-align:center;margin:0;color:#fff}
#hd_qnb .visit .visit-num{display:inline-block;line-height:18px;padding:0 5px;border-radius:10px;background:#f04e00;color:#fff;font-size:10px;position:absolute;top:0;right:0}
#hd_qnb li .fa-question{background:#e83a5f;font-size:20px}
#hd_qnb li .fa-question:hover{background:#e41b45}
#hd_qnb li .fa-comments{background:#82c13f;font-size:16px}
#hd_qnb li .fa-comments:hover{background:#5aa708}
#hd_qnb li .fa-users{background:#f0ba00;font-size:15px}
#hd_qnb li .fa-users:hover{background:#f06f00}
#hd_qnb li .fa-history{background:#8522c4;font-size:15px}
#hd_qnb li .fa-history:hover{background:#6700a9}

/* 메인메뉴 */
#gnb{position:relative;border-top:1px solid rgb(21, 21, 21);border-bottom:1px solid rgb(21, 21, 21);}
#gnb h2{position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb .gnb_wrap{margin:0 auto;position:relative}
#gnb #gnb_1dul {font-size:1.2em;text-align:center;padding: 0;background:#151515;zoom:1;}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb .gnb_1dli{display:inline-block; *display:inline; *zoom:1;line-height:50px;padding:0 25px;position:relative;border-bottom:3px solid #151515;}
#gnb .gnb_1dli:hover{background:#151515;border-bottom:3px solid #ff0000;}

.gnb_1dli .bg{display:inline-block;width:10px;height:10px;overflow:hidden;background:url(../img/gnb_bg2.gif) no-repeat 50% 50%;text-indent:-999px}
.gnb_1da {display:inline-block;/*font-weight:bold;*/font-size: 14pt;color:rgb(153, 153, 153);text-decoration:none;}
.gnb_2dli{border-top:1px solid #666}
.gnb_2dli:first-child{border:0}
.gnb_2dul {display:none;position:absolute;top:50px;min-width:140px;background:#1a30a7;padding: 0;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
-moz-box-shadow:  0 1px 5px rgba(0,0,0,0.1);
box-shadow: 0 1px 5px rgba(0,0,0,0.1);}
.gnb_2da {display:block;padding:0 10px;line-height:40px;color:#c3cbf7;text-align:left;text-decoration:none}
a.gnb_2da:hover{background:#151515;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}

직접 작업해드리고 있진 있습니다.
문제 해결에 최대한 도움 드릴 뿐.....
양해바랍니다.

만약, 저라면 그냥 이렇게 할 듯 해요.

1.
head.php 파일 다운 받아
관련 요소에 모두 border:1px solid red 넣어 레이아웃 파악

2.
아래 좌표 참고해 작업할 대상의 선택자와 스타일위치 파악
https://homzzang.com/b/css-251

3.
옮기고자 하는 요소의 부모요소에 아래 속성 추가
position:relative

4.
옮기고자 하는 요소에 아래 속성 추가
position:relative; top:OOpx; left:OOpx;

5.
안 되겠다 싶을 땐, 관련 CSS 공부 다시....

답변을 작성하시기 전에 로그인 해주세요.
전체 36
QA 내용 검색

회원로그인

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