메뉴와 검색창을 감싸는 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; 으로 먼저 넣어보시고요.
어느정도 수정해야 할지 확인후 한번더 수정값을 넣어서 자리잡게 하시면 됩니다.
댓글 2
메뉴와 검색창을 감싸는 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; 으로 먼저 넣어보시고요.
어느정도 수정해야 할지 확인후 한번더 수정값을 넣어서 자리잡게 하시면 됩니다.