묻고답하기
@중앙정렬@ 1차메뉴 + 서브메뉴 중앙정렬 질문드립니다.
2009.05.03 13:03
사용레이아웃 - 모르지오 레이아웃
질문사항 - 고객센터 > 서브메뉴 3개가 뒤로 밀려서 보여지지 않고 있습니다.
1차메뉴 와 따라다니는 서브메뉴 의 정렬을 가운데로 설정해서 문제를 해결될 것 같은 생각에
float:center; 로 하니 위아래 계단식으로 깨져버리네요~! 어느 부분을 어떻게 수정해 줘야되나요?
- CSS
/* main 1차 메뉴 */
#gnb {position:absolute; top:120px; left:450px; height:30px; margin-bottom:10px; overflow:hidden; text-align:center; font-weight:bold;}
#gnb li { float:left; list-style:none; background:url(../images/default/bgGnbVr.gif) no-repeat left center; padding-left:0px; position:relative; left:0px; white-space:nowrap; text-align:center; font-weight:bold;}
#gnb li a {font-weight:bold; display:block; float:left; padding:12px 12px 0 12px; height:30px; font:1.0em Tahoma; color:#000; white-space:nowrap; text-decoration:none; text-align:center; font-weight:bold;}
#gnb li a:hover,
#gnb li a:focus { font-weight:bold; color:#fff;}
#gnb li.on a { font-weight:bold; !important; color:#000; background:url(../images/default/bgGnbOn.gif) no-repeat center top; text-align:center;}
/* main 2차 메뉴 */
.gnb_sub { position:absolute; top:90px; left:410px; height:24px; margin-bottom:10px; overflow:hidden; text-align:center }
.gnb_sub li { float:left; list-style:none; background:url(../images/blue/sub_part.gif) no-repeat left center; padding-left:2px; position:relative; left:-2px; white-space:nowrap; text-align:center;}
.gnb_sub li a { display:block; float:left; padding:6px 8px 0 8px; height:18px; color:#000; white-space:nowrap; font:1em Tahoma; text-decoration:none; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; text-align:center}
.gnb_sub li a:hover,
.gnb_sub li a:focus { text-align:center; color:#000; font-weight:normal !important; }
.gnb_sub li.on a, .gnbin li.on a:hover { text-align:center;color:#000; background:url(../images/arrow_3.gif) no-repeat center bottom; font-weight:bold; !important; }
- CSS
-layout.html
<!-- 서브메뉴 왼쪽 or 오른쪽 정렬 -->
<style type="text/css">
#columnMain { float:center; clear:both: width: 980px; padding:5px 5px; overflow:hidden;}
</style>
- layout.html
위와 관련에 문제 해결 방법을 아시거나 참고자료 조언 부탁드립니다 ( _ _ )
댓글 5
-
오르막
2009.05.03 13:45
-
얼쑤좋구나
2009.05.03 14:11
으하하하하핫!!!
오르막님 이 알려주신 xe_official.js 에서 뭐가 뭔지 알지를 못하니... 숫자붙은건 모두 수정해 봤는데,
필요한 움직임이 안나타나고 문제가 더 커졌습니다. 난감하고 어지럽네요 ㅠ_ㅠ 여긴어디;;난누구;;
어떻게 할수가 없어 한번 더 도움 청합니다. ( _ _ ) 이건 정말 막막하네요 ㅎ..
따라다니는 서브메뉴가 1차 메뉴를 기준으로 lift. light 부터 시작하는것이 아니라
1차 메뉴를 기준점으로 가운데에서 좌 우로 퍼지는 정렬 설정!! ㅎㅎ;;
도움 부탁드립니다. ^ ^:;
// 롤오버 2차메뉴 만들기
// Brower
var browserType='';if(navigator.userAgent.indexOf("MSIE") >-1) {
browserType = 'IE';
} else if(navigator.userAgent.indexOf("Firefox") >-1) {
browserType = 'FF';
} else {
browserType = 'OTHER';
}function gnbinToggle(id, gnbblock) {
if(browserType == '+ 'FF') {
gnbinToggleFF(id, gnbblock);
} else if (browserType == 'OTHER' ) {
gnbinToggleFF(id, gnbblock);
} else {
gnbinToggleIE(id, gnbblock);
}
}// Local Navigation Toggle
function gnbinToggleIE(id, gnbblock) {for(num=0; num<gnb_count; num++) {
document.getElementById('gnb'+num).style.display='none'; // 2차 메뉴
document.getElementById('gnbli'+num).className = null; // 1차 메뉴
}var sub_1 = document.getElementById('gnbli'+id); // 1 차메뉴
var sub_2 = document.getElementById('gnb'+id); // 2 차메뉴
var bodyWrap = document.getElementById('bodyWrap'); // 컨텐츠 가로폭
document.getElementById('gnb'+id).style.display = 'block';
gnbblock.className = "on";var sub_2_left =sub_1.offsetLeft - 2;
// 2차메뉴 크기에 따른 위치 조절
if (sub_2_left < 0)
sub_2_left = 0;
else if( (sub_2_left + sub_2.offsetWidth) > bodyWrap.offsetWidth )
sub_2_left=(bodyWrap.offsetWidth - sub_2.offsetWidth);
sub_2.style.marginLeft = sub_2_left + '+ 'px';
}// Local Navigation Toggle
function gnbinToggleFF(id, gnbblock) {for(var num=0; num<gnb_count; num++) {
document.getElementById('gnb'+num).style.display='none'; // 2차 메뉴
document.getElementById('gnbli'+num).className = null; // 1차 메뉴
}var sub_1 = document.getElementById('gnbli'+id); // 1 차메뉴
var sub_2 = document.getElementById('gnb'+id); // 2 차메뉴
var bodyWrap = document.getElementById('bodyWrap'+ '); // 컨텐츠 가로폭
document.getElementById('gnb'+id).style.display = '';
gnbblock.className = "on";var sub_2_left =sub_1.offsetLeft - 2 ;
// 2차메뉴 크기에 따른 위치 조절
if (sub_2_left < 0)
sub_2_left = 0;
else if( (sub_2_left + sub_2.offsetWidth) > bodyWrap.offsetWidth )
sub_2_left=(bodyWrap.offsetWidth - sub_2.offsetWidth);
sub_2.style.marginLeft = sub_2_left + 'px';
}function reset_menu()
{
var sub_1 = document.getElementById('gnbli'+gnb_count_now); // 1 차메뉴
var sub_2 = document.getElementById('gnb'+gnb_count_now); // 2 차메뉴
var bodyWrap = document.getElementById('bodyWrap'); // 컨텐츠 가로폭
var sub_2_left =sub_1.offsetLeft-2;// 넓이가 0미만일경우 0
if (sub_2_left < 0)
sub_2_left = 0;
else if( (sub_2_left + sub_2.offsetWidth) > bodyWrap.offsetWidth )
sub_2_left=(bodyWrap.offsetWidth - sub_2.offsetWidth);
sub_2.style.marginLeft = sub_2_left + 'px';
} -
얼쑤좋구나
2009.05.03 15:01
해결이 안나서 상단의 위치 자체를 바꿔 버렸습니다.
-
오르막
2009.05.03 20:10
var bodyWrap = document.getElementById('bodyWrap'); // 컨텐츠 가로폭 을 고정해 보세요 2차메뉴가 최대 우측으로 갈수 있는 픽셀로 홈펭지 바디폭이 980이면 960으로 고정하여 bodyWrap.offsetWidth 를 960px로 바꿔보세요.
그러면 2차메뉴가 오늘쪽 960px을 넘어가지 않고 나타날 것 같습니다. -
얼쑤좋구나
2009.05.04 18:34
오르막 님이 알려주신 방법을 써봤습니다.
메뉴에 효과는 확실한데, 본문 전체가 넓이를 줄인 만큼 이동을 하네요!! 아자!! 했다가 어라? ㅎㅎ
/* main 2차 메뉴 */
.gnb_sub { position:relative ; top:90px; left:410px; height:24px; margin-bottom:10px; overflow:hidden; text-align:center }
.gnb_sub li { float:left; list-style:none; background:url(../images/blue/sub_part.gif) no-repeat left center; padding-left:2px; position:relative; left:-2px; white-space:nowrap; text-align:center;}
.gnb_sub li a { display:block; float:left; padding:6px 8px 0 8px; height:18px; color:#000; white-space:nowrap; font:1em Tahoma; text-decoration:none; font-family:"돋움", Dotum, "굴림", Gulim, AppleGothic, Sans-serif; text-align:center}
.gnb_sub li a:hover,
.gnb_sub li a:focus { text-align:center; color:#000; font-weight:normal !important; }
.gnb_sub li.on a, .gnbin li.on a:hover { text-align:center;color:#000; background:url(../images/arrow_3.gif) no-repeat center bottom; font-weight:bold; !important; }2차 메뉴의 relative 로 바꾸어 해결 보았습니다. 도움 주셔서 감사합니다.
css로 2차 메뉴 시작위치만 지정합니다.
따라다니는 가운데 정렬을 하는 것은 사용하는 레이아웃 js폴더에 xe_official.js 에 있는 롤오버 2차메뉴 만들기 스크립트가 있습니다. 여기에서 2차 메뉴가 나타날 범위를 지정할수 있습니다. 여기에서 조정해야 숨어있는 메뉴가 나타날수 있습니다.