메뉴 구성 중인대 정렬 질문 드림니다.

메뉴 구성 중인대 정렬 질문 드림니다.

QA

메뉴 구성 중인대 정렬 질문 드림니다.

답변 5

본문

a695db349e1f3280bd36bbb113bd5bd9_1433168260_5678.gif

 

 

홈페이지 상단 메뉴 전체 크기는 740px 입니다.

서브 메뉴(2단 메뉴) 노출시 오른쪽이 오버 되어 버리는대

 

상단 메뉴 인 오렌지색 크기 740px 안에 표기 되게 하기 위해서 css 어떻게 수정해야 할까요..?

 

 

==================================================

/* 메인메뉴 -  */
#gnb {position:relative; width:740px; height:30px; background:url('../img/bg_menu.gif') no-repeat;}
#gnb_empty a {text-decoration:underline}
#gnb_1dul {margin:0 auto !important; padding:0; max-width:743px; zoom:1; }
#gnb_1dul:after {display:block;visibility:hidden;clear:both;content:"";}

.gnb_1dli {z-index:10; position:relative; float:left; margin:0 0 0 30px; padding:0 0 0 20px;}   /* 주 매뉴 정렬 */

.gnb_1da {display:inline; margin:0 auto; height:30px; padding:8px 0;color:#fff; font-size:14px; font-weight:bold; line-height:2em; text-decoration:none; } /* 기본설정 */
.gnb_1da:focus, .gnb_1da:hover {text-decoration:none;}/* 주 메뉴 마우스 on 색상 background:#fff*/

.gnb_1dli_air .gnb_1da {color:#fff;}
.gnb_1dli_on .gnb_1da {color:#fff;}/* 주 메뉴에서 하단 메뉴 마우스 on 글,배경 색상 */

.gnb_2dul {display:none; position:absolute; top:30px; width:740px; }/* 2차 메뉴 전체 크기 */
.gnb_2da {display:block; float:left; padding:5px 5px; text-decoration:none;} /*float:left; 매뉴가로출력*/

.gnb_1dli_air .gnb_2da {background-color:#333;color:#fff}
.gnb_1dli_on .gnb_2da {color:#868686}/* 부 메뉴 색상 */

.gnb_2da:focus, .gnb_2da:hover {color:#232323; font-weight:bold; text-decoration:none}/* 2차 메뉴 오버시 배경색 글자색 */
.gnb_1dli_over .gnb_2dul {display:inline-block;left:0;background:#fff}/* 2차메뉴 배경색*/
.gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#666}

#gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em}
#gnb_empty a {text-decoration:underline}​

이 질문에 댓글 쓰기 :

답변 5

잠깐.. 제쪽에 앉혀 보았습니다.

마구 전체화면이 깨졌는데요. 다른 값들이 다르니 발생한 문제로 보이고요.

 

.gnb_2dul {display:none; position:absolute; top:30px; width:740px; }/* 2차 메뉴 전체 크기 */

 

여기에 width:740px 조정하시거나 (줄인다 같은요) 또는

위치를 좌로부터 얼마 이렇게 띄우시면 되지 않을까 싶어요.

흠.. 기본값 구조에서 가로메뉴를 빼실 정도인디? 삐집고 나가는 것을 어이 못 잡으세요!

서브메뉴 출력부를 우측정렬하시는 것도 나쁘지 않더라고요!

 

고맙습니다. 

물론 width 값 역시 조정 해 보고 우측정렬도 해 보았지요..

 

문제는 출력 시작지점이 문제 인대.. 1차 메뉴 바로 아래에서 출력을 시작하니...

1차 메뉴에서 중간 메뉴(ex. 위 이미지상에서 사회서비스 안내)에서 2차 메뉴가 많으면 오른쪽으로 오바 되어 버리는 것 입니다.

 

출력 시작지점을 옮길려면 어떻게 해야 하나요.? 

어떤 선생님 문의 글에 정규식 이야기가 있어.. ㅎㅎ
어딘가 들어가서 구경하다 보니 시간이 ^^
댓글 주신 것도 몰랐습니다!..

.gnb_2dul 영역

float:left;margin:0 0 0 10px; 이런 형태로 시작점을 좌로부터 먹이면 안 될까요?
아니면 반대로..
float:right;margin:0 0 10px 0; 이런 형태로 잡으셔서 위치 잡아도 될 것 같아서요.

저도 해볼께요.. 한 번 해 보시죠?

.gnb_2dul {display:none;position:relative;float:left;margin:0 0 0 10px;width:740px; }/* 2차 메뉴 전체 크기 */

 

이렇게 넣었더니 더더더더더. ^^

 

지금 메뉴.. 아파치님이 올려주신 메뉴에 없나요? 가로메뉴 잔뜩 올려 주셨는데..

하나 골라서 앉히시고 색상만 바꾸시면 더 빠르지 않을까요? 

답변 달아 주신점 감사합니다.

 

그 방법 또한 시도해 보았습니다만.. 원 하는 결과 물이 안나옴니다.

 

어지간한 방법의 시도는 글 올리기 전에 해 보았었지요... 늦은 시간이니 이만...

 

https://sir.co.kr/bbs/board.php?bo_table=g5_skin&wr_id=7695
색깔도 비슷 ^^

 

https://sir.co.kr/bbs/board.php?bo_table=g5_skin&wr_id=7693
좋고..

 

https://sir.co.kr/bbs/board.php?bo_table=g5_skin&wr_id=7676&page=2
이 중 하나면 충분하실 것 같으신데 ㅡㅡ?

 

아이들 중 마음에 드는 모델로 하나 골라서 앉혀 버리세요!

지금 메뉴바는 제쪽 css값과 선생님쪽이 달라서 아마도 제대로 앉히기는 힘들 것 같아서요..

 

고맙습니다!

 

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