퀵메뉴가 현재위치가 가로창크기를 줄이면 페이지에 고정 되어 있지 않고 창크기에 따라 움직입니다.
본문
퀵메뉴가 창크기를 줄이면 가려서 안보여야 되고 상페라인옆에 딱 고정해야 하는데
제가 지금 포지션을
<div style='position: relative;'>
<div id='quick' style='position:absolute; z-index: 2; top: 0; left: 50px; margin: 0px; width: 100px; ' >
퀵메뉴 <br />
레이어
레이어
</div>
</div>
이렇게 줘도 ...
혹은 테이블안에
<table width="1000" height="0" border="0" cellspacing="0" cellpadding="0">
<tr align="left">
<td width="1000"><div id='quick' style='position: relative; z-index: 2; top: 0; left: 50px; margin: 0px; width: 100px; height: auto; height: 1px;' >
<tr align="left">
<td width="1000"><div id='quick' style='position: relative; z-index: 2; top: 0; left: 50px; margin: 0px; width: 100px; height: auto; height: 1px;' >
퀵메뉴 <br />
레이어
레이어
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
줘도 지금 어떻게 줘도 고정되지가 않고 페이지 가로스크롤 바에 고정되어 움직여집니다.
당최 계속해서 구글에 퀵메뉴 소스를 계속 이것저것 응용하고 있는데 당최 답이 나오지 않습니다.
가르침 부탁 드립니다. ㅠ.ㅠ
답변 3
아래 코드를 웹페이지에 붙여보시면 해결 되실 껍니다.
var resize_quick = {
action : function() {
var max_width = 1180;
var center_img_width = 1003;
$("#quick").css({"left" : ($("body").width() - center_img_width) / 2 - 50 });
}
}
$(document).ready(function(e) {
resize_quick.action();
$(window).resize(function(e) {
resize_quick.action();
});
});
하지만, 이 방법은 원활한 해결 방법은 아닙니다.
레이아웃을 다시 잡고, 컨텐츠 영역을 position:relative; 로 잡아 중심을 세우고,
position:absolute 로 상대적인 위치를 잡는 것이 가장 좋은 방법입니다만, 다시 코딩하시는 것에 대한 부담으로
위와 같이 javascript 로 처리하는 방법을 제안한 것이므로 시간이 되신다면
다시 코딩하시는 것이 좋을 것 같습니다 :-)
됩니다. 잘작동합니다.^^. 감사합니다.
헌데 제가 궁금한게...
<div style="position:relative;">
<div style="position:absolute;">
퀵메뉴바 내용
</div>
</div>
이렇게 div로 포지션을 쌍으로 잡아주면
어떤 위치에도 고정 되는게 맞는데...
우쨰보면 딱 위치가 고정된것 처럼 보이나 창사이즈를 조절하면 거기에 따라 움직였거든요..
원래 이소스가 요런 문제가 있는건가요? 아니면
<table><tr><td>여기에다가 div 코드를 적고 테이블을 닫아 주어야 하나요?
흐음.. 우엣든 정말 감사합니다^^
아미꼬님. http://jsfiddle.net/fPRds/ 를 간단하게 짜 보았습니다.
한번 보시면, 무슨 이야기인지 쉽게 아실 수 있으리라 여겨집니다 :-)
고맙습니다~
참고로, 부모 엘리먼트의 height 값 때문에, 강제로 불필요한 div 을 써서, clear 해 주었는데
이건 그냥 대충 짠 거구요~ :after 를 사용하여 float 를 감싼 부모가 자식 height 를 쓰는 방법이
가장 좋습니다 :-)
우선, css 나 기타 등등을 수정하지 않고 해결할 수 있는 방법은 아래 방법이 있겠네요^^
아래에서 max_width 값을 수정해 주시면 될 것 같습니다.
애래 코드만, 붙여넣으면 원하시는 결과를 얻으실 수 있을 것 같습니다.
var resize_quick = {
action : function() {
var max_width = 1180;
var center_img_width = 1003;
if( $("body").width() <= max_width ) {
$("#quick").css({"left" : ($("body").width() - center_img_width) / 2 - 50 });
} else {
$("#quick").css({"left" : 50 });
}
}
}
$(document).ready(function(e) {
resize_quick.action();
$(window).resize(function(e) {
resize_quick.action();
});
});
소스를 그대로 붙여 넣었습니다. 헌데 어머나 세상에.. 저주소로 가보시면 창크기 최소폭은 고정되있는데 창 가로크기가 일정크기를 넘어서면 또 크기에 따라 움직이고 있습니다. .ㅜ.ㅜ. 원래 저소라면 제대로 됫겠지만 제가 또 뭘 잘못 준건가 심히 고민이 되지 않을 수가 없습니다.
아.. 아미꼬님은 아예 한 위치에 고정되는 것을 원하시는군요.
저는 특정 사이즈 이하일 경우에만 고정된 것으로 파악했었습니다.
잠시만 기다려 주시면, 쉬운 해결 방법을 가지고 오겠습니다 :-)
답변을 작성하시기 전에 로그인 해주세요.