<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.UI.WebControls" Assembly="DotNetNuke.WebControls" %>
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="TabStripAlignment.aspx.vb" Inherits="DotNetNuke.WebControls.Test.TabStripAlignment"%>
<%@ Register TagPrefix="code" TagName="view" Src="..\usercontrols\codeview.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <title>TabStripAlignment</title>
        <LINK href="../ClientAPI.css" type="text/css" rel="stylesheet"></LINK>
        <LINK href="TabStripAlignment.aspx.css" type="text/css" rel="stylesheet"></LINK>
    </HEAD>
    <body>
        <form id="Form1" method="post" runat="server">
            <P class="sampledescription">
                This sample demonstrates how you can position the tabs on the tabstrip.
                The TabAlignment property allows for four settings (Top, Left, Right, Bottom).
                However, there are actually only two ways to render the html.  Either the Tabs will
                render first (Top, Left) or the content will render first (Right, Bottom).
                In order to render the tabs vertically, CSS will need to be applied to the labels.
                In a similar manner, the tabs as a whole and and the content area can be considered
                to be a grouping that renders horizontally or vertically.  With the tabs on the
                top or bottom, this would be considered vertical, with the tabs on the left or right
                this would be considered horizontal.  In order apply our css to these groupings
                two more CSS properties (CssContentContainer and CssTabContainer) have been introduced.
            </P>
            <table cellSpacing="0" cellPadding="0" border="1" width="800px">
                <tr vAlign="top">
                    <td colspan="2">
                        <dnn:dnntabstrip id="MyDNNTabStrip" runat="server" DefaultContainerCssClass="tabcontainer" DefaultLabel-CssClass="tablabel"
                            TabStripScriptPath="../js/" SelectedIndex="0" TabRenderMode="All" CssContentContainer="tabcontentcontainer"
                            CssTabContainer="tablabelcontainer" DefaultLabel-CssClassHover="tablabelhover"
                            DefaultLabel-CssClassSelected="tablabelselected" >
                            <dnn:DNNTab Label-Text="tab 1" ID="tab1">
                            Tab 1
                            </dnn:DNNTab>
                            <dnn:DNNTab Label-Text="tab 2" ID="tab2">
                            Tab 2
                            </dnn:DNNTab>
                        </dnn:dnntabstrip>
                    </td>
                </tr>
                <tr>
                    <td class="ControlDesc">TabAlignment</td>
                    <td width="100%">
                        <asp:DropDownList ID="ddlTabAlignment" Runat="server" AutoPostBack="True">
                            <asp:ListItem Selected="True" Value="Top">Top</asp:ListItem>
                            <asp:ListItem Value="Left">Left</asp:ListItem>
                            <asp:ListItem Value="Right">Right</asp:ListItem>
                            <asp:ListItem Value="Bottom">Bottom</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
            </table>
            <code:view id="cv" runat="server" 
                ImageUrl="~/images/icon_html.gif`~/images/icon_css.gif`~/images/icon_html.gif" 
                CodeFile="~/Samples/TabStripAlignment/htm.htm`~/Samples/TabStripAlignment/css.htm`~/Samples/TabStripAlignment/vb.htm"
                ToolTip="Markup`CSS`VB" />                    
            
        </form>
    </body>
</HTML>