ajax選項卡容器CSS顯示不正確

我正在使用AJAX選項卡容器，如下所示。我有一個CSS來格式化標籤面板標題。我在那裏使用了圖像（淺藍色）。現在我想要2件東西： 1.我想擺脫虛線框 2.我希望選定的選項卡變成淡藍色。（我知道，淡藍色的圖像出現在背景中。它只是它不是所選的選項卡來）ajax選項卡容器CSS顯示不正確

tab container

<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" 
        CssClass="ajax__tab_lightblue-theme"> 
        <asp:TabPanel runat="server" HeaderText="My Profile" ID="tbpnlMyProfile"> 
         <HeaderTemplate> 
          My Profile</HeaderTemplate> 
         <ContentTemplate> 
          <table style="width: 100%;"> 
           <tr> 
            <td class="colwid colht"> 
             <strong><a href="#" id="lnkEditMyInfo" class="small-heading">Edit My Info</a> 
             </strong> 
            </td> 
            <td> 
             &nbsp;<asp:Label ID="lblFirstNameMyProfile" runat="server" Text="First Name"></asp:Label> 
            </td> 



.ajax__tab_lightblue-theme .ajax__tab_header 
{ 
font-family:arial,helvetica,clean,sans-serif; 
font-size:small; 
border-bottom:solid 5px #c2e0fd; 
} 
.ajax__tab_lightblue-theme .ajax__tab_header .ajax__tab_outer 
{ 
background-image:url('Images1/lightblue.jpg') #d8d8d8 repeat-x; 
margin:0px 0.16em 0px 0px; 
padding:1px 0px 1px 0px; 
vertical-align:bottom; 
border:solid 1px #a3a3a3; 
border-bottom-width:0px; 
} 
.ajax__tab_lightblue-theme .ajax__tab_header .ajax__tab_tab 
{  
color:#000; 
padding:0.35em 0.75em;  
margin-right:0.01em; 
} 
.ajax__tab_lightblue-theme .ajax__tab_hover .ajax__tab_outer 
{ 
background-image: url('Images1/lightblue.jpg') #bfdaff repeat-x left -1300px; 
} 
.ajax__tab_lightblue-theme .ajax__tab_active .ajax__tab_tab 
{ 
color:#000; 
} 
.ajax__tab_lightblue-theme .ajax__tab_active .ajax__tab_outer 
{ 
background-image:url('Images1/lightblue.jpg') #ffffff repeat-x left -1400px; 
} 
    .ajax__tab_lightblue-theme .ajax__tab_body 
{ 
font-family:verdana,tahoma,helvetica; 
font-size:10pt; 
padding:0.25em 0.5em; 
background-color:#ffffff;  
border:solid 1px #808080; 
border-top-width:0px; 
}

來源

2013-03-19 adityawho

我已經提供了一個答案，但是您應該包含您的地址簿選項卡的CSS，因爲我只能猜測而不看CSS。 – 2013-03-19 14:56:03

虛線框來自輪廓，這是一個瀏覽器特定的功能所有瀏覽器渲染的方式不同。您可以通過添加樣式outline:none;來禁用它。有了這個說法，我不會推薦它，因爲在通過網站進行選擇時，殘疾人依靠這一點。

至於地址簿標籤下的空間。這很可能是一些不需要的填充或餘量。將地址簿的邊距和填充設置爲padding:0;和margin:0;並查看會發生什麼情況。

回答您的評論：

嗯，我沒有看到標記爲「我的檔案」和「地址簿」。所以我認爲這是一些「開箱即用」的ASP.NET東西。但您需要添加的是「我的個人資料」和「通訊錄」鏈接。

因此，假設您生成的HTML是這樣的：

<ul> 
    <li><a href="">My Profile</a></li> 
    <li><a href="">Address Book</a></li> 
</ul>

你將一個類添加到您的元素像這樣：（注意類tabednav）

<ul class="tabednav"> 
    <li><a href="">My Profile</a></li> 
    <li><a href="">Address Book</a></li> 
</ul>

然後將CSS添加到您的樣式表中：

.tabednav li a {outline:none;}

來源

2013-03-19 14:55:19

恰好在這個CSS中，我應該添加大綱：無; ？ – adityawho 2013-03-20 06:18:52

我對您的評論添加了一個答案，希望它足夠清楚。 – 2013-03-20 14:49:34

由於您使用的是AjaxToolKit，因此請在CSS中設置以下內容。

/*Remove the border from the TabStrip*/ 
.ajax__tab_lightblue-theme .ajax__tab_header 
{ 
    border-bottom:none; 
} 

/*Add a border to the active tab*/ 
.ajax__tab_lightblue-theme .ajax__tab_active .ajax__tab_outer 
{ 
    border:solid 5px #c2e0fd; 
}

來源

2013-05-07 18:35:36 Ian

ajax選項卡容器CSS顯示不正確

回答

相關問題