서브 가로메뉴 사용중에 서브메뉴가 가운데 정렬되지 않습니다. 채택완료
김태웅
9년 전
조회 4,004
위에는 1920x1080 모니터의 화면 절반에 모니터를 띄었을 때 나타나는 서브메뉴입니다.
http://sir.kr/data/editor/1606/0f466c99ad1ebf0ba3eae51b461bbbff_1464870201_0678.jpg" title="0f466c99ad1ebf0ba3eae51b461bbbff_1464870201_0678.jpg">
이건 전체화면으로 실행했을 때 서브메뉴입니다.
화면 크기에 따라 바뀌면안되는데 바뀌네요.
PHP 내의 자바 스크립트
</p><p><script type="text/javascript">
$(document).ready(function(){
$('.subMenuBox ul li.selBoard a:visited').css('color', 'black');
$('.subMenuBox').css('left',($('#Mmenu').width()-$('#topmenu').width())/2).width($('#topmenu').width());
$('#topmenu .wrap').Mmenu({ ok1: 0 });
$("#topmenu").find(".selGroup").find('.subMenuBox').show();
$("nav#topmenu a").mouseenter(function() {
if($("div#subBox").css("display") != "block"){
$("div#subBox").slideDown();
}
});
$("nav#topmenu").mouseleave(function() {
$("div#subBox").hide();
});
});
CSS
</p><p>#topmenu .wrap div.subMenuBox{display:none;float:center;position:absolute;left:0;top:43px; height:30px;margin:0;padding:0;filter:alpha(opacity=70);opacity:0.7;background:url(./bg_sub.jpg) repeat-x 0 0;border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;}
#topmenu .wrap div.subMenuBox ul{margin:0;<b>padding-left:450px;</b>background:url(./bg_sub.jpg) repeat-x 0 0;}
#topmenu .wrap div.subMenuBox ul li{margin:0;padding:0;background:url(./bg_sub.jpg) repeat-x 0 0;}
#topmenu .wrap div.subMenuBox ul li {height:30px;}</p><p>
원래는 화면 왼쪽에 붙어있었습니다.
풀화면이든 절반 화면이든
그래서 굵게 표시한 padding-left:450px; 를 추가했는데 화면 크기가 변화할때마다 위치가 바뀌네요.
어떻게하면 화면 크기가 변화해도 그 위치에 가만히 있게 할 수 있을까요
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인
#topmenu .wrap {position:relative;height:73px;overflow:visible;width:970px;margin:0 auto;} /* 가운데 정렬: width:970px; margin:0 auto; */
#topmenu .wrap ul{position:relative;list-style:none;margin:0;padding:0;}
#topmenu .wrap ul:after{content:""; display:block; float:none; clear:both;}
#topmenu .wrap ul li{float:left;list-style:none;margin:0;padding:0;height:43px;}
#topmenu .wrap ul li.selGroup {font-style:black;}
#topmenu .wrap ul li.active{color:#000;background:#1c8d6f;border-radius:3px 3px 3px 3px;}
#topmenu .wrap ul li a{height:37px; display:block;cursor:pointer;text-decoration:none;padding:0 25px 5px 20px;color:#ffffff;font:normal 14px nanumgothic, dotum;letter-spacing:0px;display:inline-block;line-height:43px; font-weight:bold;} /* 1차메뉴 진하게 */
#topmenu .wrap ul li a:hover{color:#000;}
#topmenu .wrap ul li.active a {color:#000;}
#topmenu .wrap div.subMenuBox{display:none;float:center;position:absolute;left:0;top:43px; height:30px;margin:0;padding:0;filter:alpha(opacity=70);opacity:0.7;background:url(./bg_sub.jpg) repeat-x 0 0;border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;}
#topmenu .wrap div.subMenuBox ul{margin:0;background:url(./bg_sub.jpg) repeat-x 0 0;}
#topmenu .wrap div.subMenuBox ul.selBoard{}
#topmenu .wrap div.subMenuBox ul li{margin:0;padding:0;background:url(./bg_sub.jpg) repeat-x 0 0;}
#topmenu .wrap div.subMenuBox ul li {height:30px;}
#topmenu .wrap div.subMenuBox ul li.selBoard a:visited {color:black;}
#topmenu .wrap div.subMenuBox ul li a{margin:0;padding:0 12px;font:11px;letter-spacing:-1px;color:#1c8d6f;height:30px;line-height:32px;display:inline-block;}
#topmenu .wrap div.subMenuBox ul li a.over a{color:#1c8d6f;}
#topmenu .wrap div.subMenuBox ul li over.a{color:#1c8d6f;}
#topmenu .wrap div.subMenuBox ul li a:hover{color:#1c8d6f;}
#topmenu .wrap div.subMenuBox ul li a.active,#topmenu .wrap div.subMenuBox ul li a:active{color:black;} /* 클릭 했을때 */
#topmenu .wrap div.subMenuBox ul li.on a{text-decoration:underline;}#
css 전체 소스인데 어딜 수정해야할까요