In this topic you will add a Panel control with some formatted content.

1. In the Visual Studio Toolbox, double-click the Panel control to add a panel to the main content of  your page.
2. Add some content to the panel. For example:

<asp:Panel ID="Panel1" runat="server" Height="300" Width="300">

      <div class="elements">

            <ul>           

                <li style="background: AliceBlue;"><span>AliceBlue</span></li>

                <li style="background: AntiqueWhite;"><span>AntiqueWhite</span></li>

                <li style="background: Aqua;"><span>Aqua</span></li>

                <li style="background: Aquamarine;"><span>Aquamarine</span></li>

                <li style="background: Azure;"><span>Azure</span></li>

                <li style="background: Beige;"><span>Beige</span></li>

                <li style="background: Bisque;"><span>Bisque</span></li>

                <li style="background: Black;"><span>Black</span></li>

                <li style="background: BlanchedAlmond;"><span>BlanchedAlmond</span></li>

                <li style="background: Blue;"><span>Blue</span></li>

                <li style="background: BlueViolet;"><span>BlueViolet</span></li>

                <li style="background: Brown;"><span>Brown</span></li>

                <li style="background: BurlyWood;"><span>BurlyWood</span></li>

                <li style="background: CadetBlue;"><span>CadetBlue</span></li>

                <li style="background: Chartreuse;"><span>Chartreuse</span></li>

                <li style="background: Chocolate;"><span>Chocolate</span></li>

                <li style="background: Coral;"><span>Coral</span></li>

                <li style="background: CornflowerBlue;"><span>CornflowerBlue</span></li>

                <li style="background: Cornsilk;"><span>Cornsilk</span></li>

                <li style="background: Crimson;"><span>Crimson</span></li>

                <li style="background: Cyan;"><span>Cyan</span></li>

                <li style="background: DarkBlue;"><span>DarkBlue</span></li>

                <li style="background: DarkCyan;"><span>DarkCyan</span></li>

                <li style="background: DarkGoldenrod;"><span>DarkGoldenrod</span></li>

                <li style="background: DarkGray;"><span>DarkGray</span></li>

                <li style="background: DarkGreen;"><span>DarkGreen</span></li>

                <li style="background: DarkKhaki;"><span>DarkKhaki</span></li>

                <li style="background: DarkMagenta;"><span>DarkMagenta</span></li>

                <li style="background: DarkOliveGreen;"><span>DarkOliveGreen</span></li>

                <li style="background: DarkOrange;"><span>DarkOrange</span></li>

            </ul>

        </div>

   </asp:Panel>

3. Format the content with a CSS so it appears a little cleaner by adding the following markup within the <asp:Content> tags for the HeaderContent. Add the following:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

 <style type="text/css">

        .elements ul

        {

            padding: 8px 0 0 8px;

            margin: 0px;

            width: 840px;

            float: left;

        }

       

        .elements ul li

        {

            background: #fff;

            color: #fff;

            font-weight: 900;

            height: 70px;

            margin: 0 8px 8px 0;

            padding: 0;

            padding-top: 62px;

            position: relative;

            text-align: center;

            width: 132px;

           

        }

       

        .elements li

        {

            float: left;

            list-style: none;

        }

    </style>

</asp:Content>

4. Next, add a C1SuperPanelExtender control and associate it with the panel.