돋보기 버튼 위치 변경 질문드립니다.

돋보기 버튼 위치 변경 질문드립니다.

QA

돋보기 버튼 위치 변경 질문드립니다.

답변 3

본문

아래 게시글에 검색 박스 높이는 답변주셔서 다행히 해결되었는데 높이가 해결되니

기존 멀쩡하던 돋보기 버튼이 아래와 같이 밑으로 내려갔습니다.

 

돋보기를 박스 높이로 올라오게 하는 방법이 없을까요? 오랫동안 확인했는데 꼼짝도 안하네요ㅠ

간단한것 같긴한데 이제 입문한지 1주일밖에 안되서 너무 왕초보라 배울게 많아서 시간이

오래 걸리네요. 답변 가능하시면 조언 부탁드리겠습니다.

 

그리고 검색어 입력 부분이 중앙에 위치하도록 하려면 어디를 수정해야 할까요?

참고로 기존에는 돋보기가 박스 오른쪽 끝 중앙에 있었는데  input stype height값을 추가하니

돋보기가 내려갔습니다. 잘못한걸까요?

 

2109240500_1574527665.6302.jpg

------------hearder.css 내용-------------------------------------------

.search{
margin-top:0.75rem;

 

------- hearder.php 내용  -------------------------

<li class="basic-nav-parent">
 <form class='search' name="fsearchbox" method="get" action="/bbs/search.php" onsubmit="return fsearchbox_submit(this);">
                    <div class="input-group">
                        <input type="hidden" name="sfl" value="wr_subject||wr_content">
                        <input type="hidden" name="sop" value="and">
                        <label for="sch_stx" class="sr-only">검색어<strong class="sr-only"> 필수</strong></label>
                        <input style="height:1.5rem" type="text" name="stx" id="sch_stx" class="modal-search-field" size="10" maxlength="10" placeholder="검색어 입력">
      <div class="input-group-btn">   
                        <button type="submit" class="btn"><i class="fa fa-search" aria-hidden="true"></i></button>
     
                        </div>
                    </div>
                </form>


 </li>    

-----------------------------------------------------------------------------------------

이 질문에 댓글 쓰기 :

답변 3

.search{
margin-top:0.75rem;

이 부분을 없애거나 줄이면 될것 같기도 한데

요소가 정확하지 않으니 사이트 주소가 필요할것 같습니당!

나에요나냐님 답변 고맙습니다. .search부분을  없애면 아래와 같이 박스가 위에 딱 붙어 버려서

사용한겁니다ㅠㅠ 그리고<input style="height:1.5rem" <--- 안넣으면 박스가 너무 커서 보기가

안 좋아서 줄였던거구요.

산넘어 산이네요. 박스크기 줄이는걸 그냥해야 포기해야 할까요?ㅠㅠ

그리고 크롬에서는 검색어 입력이 잘보이는데 익스플로어에서는 아래처럼 짤리네요. 쉬운게 없네요...

2109240500_1574530088.4089.jpg

CSS는 반영 수정의 무한 반복이라고 배웠습니다만..... ㅎㅎ

역시나 .search 부분이 문제였네요 ㅠ
.search 내 CSS 내용 margin-top: 1.4rem; < 요거 삭제하시고

<input style="height:1.5rem"  이 부분에

class = modal-search-field  < 요거 있을거에요 이거는 모달에 대해서 쓰는것 같으니
class = modal-search-field temp < temp 이름은 맘대로 변경해주시고

css 파일에서 .temp{margin-top : 1.4rem} 이거 추가하시고
.input-group-btn 요건 검색버튼 div의 class 선택자이니
원하는 만큼 margin-top 값 주시면 될듯 합니당 ㅎ

그리고 margin 이나 padding 값은 웬만하면 px 단위로 하는게 좋다고 들었어요
저도 경험이 아주 많은 편은 아니라서 오류를 보지는 못했지만 배우긴 그렇게 배웠네요 ㅎ

안되시면 재질문..... ㅎㅎ

나에요 나나님 덕분에 시원하게 해결되었습니다 ㅎㅎ

저도 처음에 modal-search 이놈이 수상해서 의심을 하고 있다가 바꿀 방법을 몰라서 해매고 있었는네 그냥 없애고 새로 만들면 되는거였군요 ㅎㅎ 

제가 원하는 위치로 이동시키고 검색아이콘도 위치조절하고 배경도 투명하게 만들었습니다.

감사합니다. 꾸벅.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 7
© SIRSOFT
현재 페이지 제일 처음으로