2012-04-03 2 views
0

나는 중급 수준의 웹 디자이너로, 내 테마를 만드는 WordPress 사이트를 다시 작성했습니다.WordPress의 jQuery StickyPanel 문제

jQuery StickyPanel을 구현하여 페이지 상단의 최상위 메뉴 막대를 유지했습니다. 메뉴 막대를 margin-top : 1px에두면 잘 작동하지만 분명히 공간 픽셀이 나타납니다.

sticky 메뉴를 margin-top : 0px에두면 제대로 작동하지만 페이지 상단에 다시있을 때 분리되지 않아 전체로 스크롤 할 수 없습니다 100 %.

사이트가 현재 생방송입니다. 두 가지의 더 나은 옵션 인 마진을 1px로 설정했지만, 이상적으로는 그 픽셀을 사라지게해야합니다.

테스트 .html 페이지를 만들면 정상적으로 작동합니다. header.php 또는 내가 말할 수있는 한 WordPress에서 일어나는 일입니다.하지만 제가 말했듯이, 나는 중급입니다. 내 검색과 시행 착오는 아직 해결책을 찾지 못했습니다.

웹 사이트는 www.therayandthero.com

끈적 끈적한 패널 내 CSS 코드의

#menu { 
    margin: 0 auto; 
    margin-top: 1px; 
    text-align: center; 
    height: 23px; 
    padding: 4px 4px 4px 4px; 
    box-shadow: 2px 1px 1px rgba(0,0,0,0.1);} 

#menu.fixed { 
    position: fixed; 
    width: 99%; 
    background-color: black; 
    color: #e5e6d9; 
    z-index: 9999; 
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2); 
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2); 
box-shadow:1px -1px 2px rgba(0,0,0,0.2);} 

내 구현이 따를 header.php에 있으며, 다음과 같습니다

<div id="top"></div> 
<div id="menu" class="sticky"> 
<div id="toplogo"><a href="http://www.therayandthero.com"><img  src="http://www.therayandthero.com/wp-content/themes/randrtwopointoh/images/rrsill_off.png"  class="rollover"></a></div> 
<div id="toptext"><h1><a href="mailto:[email protected]">CONTACT</a></h1></div>  <div id="toptext2"><h1><a href="#caro">CATEGORIES</a></h1></div> 
<div id="search-box"><?php get_search_form(); ?></div> 
</div> 
<div id="wrapper"> <!-- wrapper --> 
<div id="topad">... 

이 작업을 수행하는 데 필요한 코드가 더 필요한지 잘 모르겠습니다. 알려 주시면 알려 주시면 필요한 항목을 기꺼이 알려 드리겠습니다.

미리 도움을 주셔서 감사합니다.

+0

스택 오버플로는 영어 Q & A 사이트입니다. 자신을 언급 할 때 "I"를 대문자로 만드십시오. ** ** ** 대신에 ** i **를 써야 할 때가 결코 없습니다. – meagar

답변

0

당신의 웹 사이트는 valide되지 않습니다 : http://validator.w3.org/check?uri=http%3A%2F%2Fwww.therayandthero.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2

이것은 문제가되지 않지만 일부 태그를 가까이하지 않는 경우, 자바 스크립트와 CSS가 작동하지 않을 수 있습니다. 많은 문제를 찾고 싶다면 firefox의 webkit이나 firebug에서 css/html inspector를 사용하십시오.