2012-06-29 4 views
1

다음에서 datetimepicker를 사용하려고합니다 : http://trentrichardson.com/이 jquery datetimepicker가 왜 모양이 어둡습니까?

기능이 작동하는 것 같지만, 끔찍한 것처럼 보입니다. 아무도 내가 왜 그렇게하는지 알아낼 수 있습니까?

브라우저는 파이어 폭스입니다.

헤더가

...

<link rel="stylesheet" type="text/css" href="/css/mainmenu.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="/css/smoothness/jquery-ui-1.8.21.custom.css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="/css/dttimepicker.css" /> 

    <script src="/jscript/jquery-1.7.2.min.js" type="text/javascript"></script> 
    <script src="/jscript/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script> 
    <script src="/jscript/jquery-ui-timepicker-addon.js" type="text/javascript"></script> 

를하고 다음과 같습니다 : 나는 내 MAINMENU의 CSS를 제거 할 때 distorted datetimepicker

및 발견에 는 제대로 표시! 여기 내 MAINMENU의 CSS 파일은 다음과 같습니다

<div class="bvmainmenu"> 
    <ul> 
     <li><a href="/" id="Home">Home</a></li> 
     <li><a id="Reports">Reports</a> 
      <ul> 
       <li><a href="...">....</a></li> 
       <li><a href="...">....</a></li> 
       <li><a href="...">....</a></li> 
      </ul> 
     </li> 
     <li><a id="Managment">Managment</a> 
      <ul> 
       <li><a href=".....">.....</a></li> 
       <li><a>....</a></li> 
      </ul> 
     </li> 
     <li><a id="Admin">Admin</a> 
      <ul> 
       <li><a href="...">....</a></li> 
       <li><a href="....">....</a></li> 
       <li><a href="...">...</a></li> 
       <li><a href="...">...</a></li> 
       <li><a href="...">...</a></li> 
       <li><a href="/">item3</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

메뉴는 자신의 클래스를 가지고 있으며, 여기에 자사의 CSS입니다 :

.bvmainmenu{           /*main bvmainmenu properties*/ 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    font-family:verdana,geneva,arial,helvetica,sans-serif; 
    font-size:14px; 
    font-weight:bold; 
    color:8e8e8e; 
    } 
.bvmainmenu ul{          /*main bvmainmenu items bar*/ 
    background:url(/images/bvmainmenu-bg.gif) top left repeat-x; 
    height:43px; 
    list-style:none; 
    margin:0; 
    padding:0; 
    } 
    .bvmainmenu li{ 
     float:left;        /*main bvmainmenu item positioning*/ 
     padding:0px 8px 0px 8px; 
     } 
    .bvmainmenu li a,span{         /*main bvmainmenu items text properties etc*/ 
     color:#666666; 
     display:block; 
     font-weight:bold; 
     line-height:43px; 
     padding:0px 25px; 
     text-align:center; 
     text-decoration:none; 
     } 
     .bvmainmenu li a:hover{ 
      color:#000000; 
      text-decoration:none; 
     } 
    .bvmainmenu li ul{ 
     background:#e0e0e0; 
     border-left:2px solid #000000; 
     border-right:2px solid #000000; 
     border-bottom:2px solid #000000; 
     display:none; 
     height:auto; 
     filter:alpha(opacity=95); 
     opacity:0.95; 
     position:absolute; 
     width:auto;        /*225px; this will make all drop downs of same width*/ 
     z-index:200; 
     } 
    .bvmainmenu li:hover ul{      /*shows drop down bvmainmenu box on hover*/ 
     display:block; 
     } 
    .bvmainmenu li ul li {        /*drop down bvmainmenu box*/ 
     display:block; 
     float:none; 
     padding:0px; 
     width:auto;        /*225px; this will make all drop downs of same width*/ 
     } 
    .bvmainmenu li ul li a{ 
     display:block; 
     font-size:12px; 
     font-style:normal; 
     padding:0px 5px 0px 5px;   /*top rt bt lf def:0,10,0,15*/ 
     text-align:left; 
     line-height:1.5;      /*added for visual effect, you can use value normal*/ 
     } 
     .bvmainmenu li ul li a:hover{     /*drop down bvmainmenu items*/ 
      background:#949494; 
      color:#000000; 
      opacity:1.0; 
      filter:alpha(opacity=100); 
      } 
    .bvmainmenu p{ 
     clear:left; 
     } 

여기 엉망 어떤 사람이 알 수 있습니까? 이 위젯이 왜 그렇게 우스운가요? 또한 글꼴이 너무 큽니다! 쇼룸 (UI 웹 사이트)에서 반짝 반짝 빛납니다!

xx. 라지브

+1

.bvmainmenu li a, span <- 이것은 정말로 원하는 것입니까? 그 스팬은 넓은 효과가 있습니다 –

+0

위대한! 나는 스팬을 제거하고 이제는 괜찮습니다. 아주 많이. 나는 이것에 하루 또는 이틀을 잃은 CSS에 아주 좋지 않다. – rajeev

답변

1
.bvmainmenu li a,span 

메뉴 클래스 이온 캡슐화되지 SPAN 그

(개정)

당신이 일 수 캠 범위를 캡슐화 할 경우 :

.bvmainmenu li a,.bvmainmenu span 

또는

.bvmainmenu li a span 

달성하고자하는 바에 따라 마지막은 "a"에 영향을주지 않고 .bvmainmenu li a에있는 모든 범위와 일치합니다. 이전 wil은 앵커 (li a)와 .bvmainmenu에있는 모든 범위에 영향을 미칩니다

+0

캡슐화 된 것은 무엇을 의미합니까? html로? 나는 css에서 ", span"부분을 제거하고 작동했다. 회신을 위해 타이. – rajeev

+0

내 말은, 스팬이 .bvmainmenu에 관계없이 페이지의 모든 스팬을 선택한다는 의미입니다. –

관련 문제