1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CenterDiv.aspx.cs" Inherits="ZeeControls2Demo.LayoutExamples.CenterDiv" Theme="default" %>
2
3 <%@ Register Assembly="ZettaCube.ZeeControls" Namespace="ZettaCube.ZeeControls" TagPrefix="cc1" %>
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6
7 <html xmlns="http://www.w3.org/1999/xhtml" >
8 <head runat="server">
9 <title>Center a DIV on a page</title>
10 <style type="text/css">
11 .ZCWSPanel {
12 border-width: 0px;
13 background-color: #CCCCFF;
14 }
15 </style>
16 </head>
17 <body>
18 <form id="form1" runat="server">
19 <div>
20
21 <cc1:WebSplitterContainer ID="WebSplitterContainer1" runat="server" FitParent="FitWindow" Height="687px" Width="843px">
22 <Panels>
23 <cc1:WebSplitterPanel runat="server" Filled="True" MinSize="50" Overflow="Hidden">
24 </cc1:WebSplitterPanel>
25 <cc1:WebSplitterPanel runat="server" PreferredSize="400">
26 <Content>
27 <cc1:WebSplitterContainer runat="server" ID="WebSplitterContainer2" FitParent="FitParentContainer" Orientation="Horizontal">
28 <Panels>
29 <cc1:WebSplitterPanel runat="server" Filled="True" MinSize="50" Overflow="Hidden">
30 </cc1:WebSplitterPanel>
31 <cc1:WebSplitterPanel runat="server" PreferredSize="400" CssClass="contentPanel">
32 <Content>
33 <strong>Center a DIV on a page<br />
34 <br />
35 </strong>This example shows how a splitter container can be used as a layout tool.<br />
36 <br />
37 This DIV, which has a size of 400x400px, is centered horizontally and vertically
38 on the page.<br />
39 <br />
40 The four margins will shrink or enlarge as needed. However, they have a minimum
41 size of 50px. So the center DIV will start to shrink if the margins reach their
42 minimun size.
43 </Content>
44 </cc1:WebSplitterPanel>
45 <cc1:WebSplitterPanel runat="server" Filled="True" MinSize="50" Overflow="Hidden">
46 </cc1:WebSplitterPanel>
47 </Panels>
48 </cc1:WebSplitterContainer>
49 </Content>
50 </cc1:WebSplitterPanel>
51 <cc1:WebSplitterPanel runat="server" Filled="True" MinSize="50" Overflow="Hidden">
52 </cc1:WebSplitterPanel>
53 </Panels>
54 <SplitterProps Thickness="0" />
55 </cc1:WebSplitterContainer>
56
57
58 </div>
59 </form>
60 </body>
61 </html>
62
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12 namespace ZeeControls2Demo.LayoutExamples
13 {
14 public partial class CenterDiv : System.Web.UI.Page
15 {
16 protected void Page_Load(object sender, EventArgs e)
17 {
18
19 }
20 }
21 }
22
1 body
2 {
3 font-family: Tahoma, Geneva;
4 font-size: 10pt;
5 }
6
7 .ZCWDMainContent, .ZCWDPanelContent
8 {
9 padding: 3px;
10 }
11
12 .ZCWDPanelTitleBar
13 {
14 padding-left: 3px;
15 }
16
17 .ZCWSPanel
18 {
19 padding: 3px;
20 }
21
22 .title
23 {
24 display: block;
25 font-weight:bold;
26 line-height: 24px;
27 }
28
29 .indent
30 {
31 padding: 10px;
32 padding-left: 30px;
33 }
34
35 .blah
36 {
37 color: Gray;
38 }
39
40 .tableRowHeader
41 {
42 color: #666666;
43 }
44
45 .tableColumnHeader
46 {
47 color: #666666;
48 }
49
1 <%--
2 Default skin template. The following skins are provided as examples only.
3
4 1. Named control skin. The SkinId should be uniquely defined because
5 duplicate SkinId's per control type are not allowed in the same theme.
6
7 <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
8 <AlternatingRowStyle BackColor="Blue" />
9 </asp:GridView>
10
11 2. Default skin. The SkinId is not defined. Only one default
12 control skin per control type is allowed in the same theme.
13
14 <asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
15 --%>