질문/조언질답게시판
Extra Form
CMS XpressEngine

20191117_045840.jpg

 

메뉴바 크기를 검은선 까지만 오게 하고

 

메뉴바 위에 있는 검색창을 빨간네모 위치로 오게 하고 싶습니다

 

방법 있을까요?

 

 

  • ?
    네 해당 css를 수정하시면됩니다
  • ? ?
    ^^

    메뉴와 검색창을 감싸는 div를 만들고
    이 div의 클라스명을 A라고 하면
    A는 우측에 검색창만큼의 여백(padding)을 만듭니다.
    얼핏보기에 한 200정도 되어 보이니
    .A{padding-right:200px;position:relative;}
    라고 먼저 만들고요.

    이게 메뉴와 검색창을 감싸는 공간을 만들었으니 메뉴부터 넣어보죠.

    보통 일반적인 메뉴 처리 방식은

    각 메뉴의 li나 a에 padding처리를 해서 좌우 여백을 일정하게 두거나
    전체 메뉴의 갯수를 파악해서 5개면 각 li의 넓이를 20% 하거나
    6개면 li의 넓이를 16.66666 인가 처리할겁니다. 이건 나중에 산수해 보시면 되고요.
    하여튼 이렇게 처리를 하는 방법이 있습니다.

    지금 경우 앞의 방식으로는 저 공간에 넣기 힘듭니다.
    이유는 간단합니다. 브라우져 마다 그리고 사용자마나 가지고 있는 폰트가 다르고 브라우져 마다 자간의 넓이가 다르게 나오기 때문에 정확한 값을 못찾기 때문이죠.

    지금과 같은 경우는 후자를 이용해서 넓이값을 정하고 text-align:center로 처리해서 디자인을 잡으셔야 합니다.

    검색 같은 경우는 넓이값 넣고 position:absolute;right:0;top:0; 으로 먼저 넣어보시고요.
    어느정도 수정해야 할지 확인후 한번더 수정값을 넣어서 자리잡게 하시면 됩니다.