Ajax Toolkit for ASP.NET で遊ぶのはこれが初めてです。私は非常に素晴らしいコントロールである TabContainer を使用しています。AJAX ツールキットの Web サイトの説明に従ったところ、いくつかのスタイリングの問題を除いて、すべてうまく機能しました。TabContainer には次の CSS スタイルがあります。タブに問題があります。タブ自体のタイトルやヘッダー以外に、小さなアイコンや画像を追加したい。やったのですが、今はテキストが下がって完全に表示されていないので、読者はそれを読むことができません. それで、それを修正するのを手伝ってくれませんか？
CSS スタイル:
/* CSS Style of the Ajax TabContainer */
.ajax__myTab .ajax__tab_header { font-family: verdana; font-size: 16px; border-bottom: solid 2px #aaaaaa }
.ajax__myTab .ajax__tab_outer { padding-right: 2px; height: 20px; background-color: #C0C0C0; margin-right: 1px; border-right: solid 2px #666666; border-top: solid 1px #999999 }
.ajax__myTab .ajax__tab_inner { padding-left: 3px; background-color: #C0C0C0; }
.ajax__myTab .ajax__tab_tab { height: 13px; padding: 4px; margin: 0; }
.ajax__myTab .ajax__tab_hover .ajax__tab_outer { background-color: #cccccc }
.ajax__myTab .ajax__tab_hover .ajax__tab_inner { background-color: #cccccc }
.ajax__myTab .ajax__tab_hover .ajax__tab_tab { background-color:Green; }
.ajax__myTab .ajax__tab_active .ajax__tab_outer { background-color: #fff; border-left: solid 1px #999999; }
.ajax__myTab .ajax__tab_active .ajax__tab_inner { background-color:#fff; }
.ajax__myTab .ajax__tab_active .ajax__tab_tab { }
.ajax__myTab .ajax__tab_body { font-family: verdana; font-size: 11pt; border: 2px solid #999999; padding: 6px; background-color: #ffffff; }
所持ポイントが少ないためスナップショットをアップロードできませんでした。
アップデート：
ASP.NET コードは次のとおりです。
<%--TabContainer Control--%>
<ajaxToolkit:TabContainer ID="LibraryTabs" runat="server" CssClass="ajax__myTab" OnDemand="true" AutoPostBack="false"
TabStripPlacement="Top" ScrollBars="None" UseVerticalStripPlacement="false">
<ajaxToolkit:TabPanel ID="ImagesGallery" runat="server" HeaderText="Images Gallery">
<HeaderTemplate><img src="images/New/image.png" style="height: 21px; width: 23px" /> Images Gallery</HeaderTemplate>
<ContentTemplate>
<p>
<strong><img src="images/New/image.png" style="height: 21px; width: 23px" /> Images Gallery: </strong> <br />
Here's a list of some images of safety events that take place inside the company. Besides that, there are some images of
some safety equipments or signs. If the image is not obvious to you, please save it on your PC and then open it to see it in its
original size.
</p>
<!-- Images Gallery -->
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper">
</div>
<div class="ad-controls">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/safety images/fire protection.jpg">
<img src="images/safety images/thumbs/fire protection.jpg" title="Fire Protection Training Course" class="image0">
</a>
</li>
<li>
<a href="images/safety images/safety equipment.jpg">
<img src="images/safety images/thumbs/safety equipment.jpg" title="One of the safety equipments" class="image0">
</a>
</li>
<li>
<a href="images/safety images/lp poster.jpg">
<img src="images/safety images/thumbs/lp poster.jpg" title="Safety Poster" class="image0">
</a>
</li>
<li>
<a href="images/safety images/lp poster 2.jpg">
<img src="images/safety images/thumbs/lp poster 2.jpg" title="Safety Poster" class="image0">
</a>
</li>
<li>
<a href="images/safety images/lp poster 3.jpg">
<img src="images/safety images/thumbs/lp poster 3.jpg" title="Safety Poster" class="image0">
</a>
</li>
<li>
<a href="images/safety images/lp poster 4.jpg">
<img src="images/safety images/thumbs/lp poster 4.jpg" title="Safety Poster" class="image0">
</a>
</li>
<li>
<a href="images/safety images/worker.jpg">
<img src="images/safety images/thumbs/worker.jpg" title="Safety at workplace" class="image0">
</a>
</li>
<li>
<a href="images/safety images/safety sign.jpg">
<img src="images/safety images/thumbs/safety sign.jpg" title="One of the safety signs" class="image0">
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- End of Images Gallery -->
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Images Gallery">
<HeaderTemplate>Video Gallery</HeaderTemplate>
<ContentTemplate>
<p>
<strong><img src="images/New/video.png" style="height: 21px; width: 23px" /> Video Gallery: </strong> <br />
Here's a list of safety videos that show you the effects of driving out of the speed limit and so on.
<center><b> Coming Soon </b></center>
</p>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
更新 2: また、AjaxToolkit:TabPanel 内に Height と Width を含めようとしましたが、うまくいきませんでした。本当に奇妙で、私には理解できませんでした。
