http://trentrichardson.com/からdatetimepickerを使用しようとしています。
機能は機能しているようですが、見た目はひどいです。写真を参照してください。誰かが私がなぜそうなのかを知るのを手伝ってもらえますか？
ブラウザはFirefoxです。
ヘッダーには...
<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>
そしてそれはこのように見えます：
そして気づいたことに、メインメニューのCSSを削除すると、正しく表示されます!!! これが私のメインメニューの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>
menuには独自のクラスがあり、ここにその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サイト）ではとてもピカピカに見えます!!
どうも。ラジーブ