In this article we will discuss how to put images in tab control and how to provide space between tabs. The selected tab will have more height.





Tab with image and more spaces between tabs

Let's create tab like above image.

Step 1: Add tabcontainer with three tabpanels in an aspx page. Add ajax__tab_custom CssClass in the tabcontainer.

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" CssClass="ajax__tab_custom">
      <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
            <HeaderTemplate>
               <div>
                  <table>
                     <tr>
                        <td>
                           <img src="images/aero.jpg" width="80px" height="60px" />
                        </td>
                     </tr>
                     <tr>
                        <td>
                           Flight Booking
                        </td>
                     </tr>
                  </table>
               </div>
            </HeaderTemplate>
            <ContentTemplate>
               <div>
                  <!-- Add your controls -->
               </div>
            </ContentTemplate>
       </ajaxToolkit:TabPanel>
      <ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
         <HeaderTemplate>
         <div>
            <table>
               <tr>
                  <td>
                     <img src="images/train.gif" width="80px" height="60px" />
                  </td>
               </tr>
               <tr>
                  <td>
                     Train Booking
                  </td>
               </tr>
            </table>
         </div>
         </HeaderTemplate>
         <ContentTemplate>
            <div>
                  <!-- Add your controls -->
            </div>
         </ContentTemplate>
      </ajaxToolkit:TabPanel>
      <ajaxToolkit:TabPanel ID="TabPanel3" runat="server">
      <HeaderTemplate>
         <table>
            <tr>
               <td>
                  <img src="images/cruise.jpg" width="80px" height="60px" />
               </td>
            </tr>
            <tr>
               <td>
                  Cruise Booking
               </td>
            </tr>
         </table>
      </HeaderTemplate>
      <ContentTemplate>
         <div>
            <!-- Add your controls -->
         </div>
      </ContentTemplate>
   </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>


Step 2: Create a tab.css. Add below style content in the tab.css .

.ajax__tab_custom .ajax__tab_header
{
      font-family:arial,helvetica,clean,sans-serif;
      font-size:small;
      border-bottom:solid 5px Maroon;
}

.ajax__tab_custom .ajax__tab_body
{
      font-family:verdana,tahoma,helvetica;
      font-size:10pt;
      padding:0.25em 0.5em;
      background-color:White;
      border:solid 1px #808080;
      border-top-width:0px;
}

The space between the tab can be set by modifying margin in .ajax__tab_custom .ajax__tab_header .ajax__tab_outer.
In the above css it is 0.36,  change it and the space between two tabs will change.

The height of the selected tabe can be changed by modifying height in  .ajax__tab_custom .ajax__tab_active .ajax__tab_outer. In the above css it is 100px, change it and the height of the selected tab will change.



Live Demo