Remove From My Forums

Can't align a div element to center (handheld)

Question

User-198097752 posted

Hi. Why is it that I can't get the two div elements to align to the center of a page when viewed in a Pocket PC?

Here's the image:

I've used two colors as a test to make sure that the two "monitors" align to the center of the handheld (Pocket PC).

Here's the ASP.net code:

1    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Page_Master_Main" %>
2    
3    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4    
5    <html xmlns="http://www.w3.org/1999/xhtml" >
6    <head runat="server">
7        <title>Untitled Page</title>
8        <link href="../../CSS/Main.css" rel="Stylesheet" media="screen" type="text/css" />
9    </head>
10   <body class="mainbody">
11       <form id="form1" runat="server">
12       <div>
13           
14           <div class="leftSpacer">
15               <div class="HDMonitorLeft">
16                   <div class="Screen">
17                       <img src="../../Img/Master/GraysonPeddie.jpg" />
18                   </div>
19               </div>
20           </div>
21           <div class="rightSpacer">
22              <div class="HDMonitorRight">
23                   <div class="Screen">
24                       <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
25                       </asp:ContentPlaceHolder>
26                   </div>
27               </div>
28           </div>
29           
30           <div class="Middle">
31               <div class="BGMenuTop">
32                   <asp:ImageButton    ID="ImageButton1" runat="server"
33                                       ImageUrl="~/Img/Master/Menu/menu_Home.png"
34                                       onmouseover="this.src='../Img/Master/Menu/menu_Home_mover.png';"
35                                       onmouseout="this.src='../Img/Master/Menu/menu_Home.png';"
36                                       onmousedown="this.src='../Img/Master/Menu/menu_Home_pressed.png';"
37                       /><asp:ImageButton    ID="ImageButton2" runat="server"
38                                       ImageUrl="~/Img/Master/Menu/menu_HomeAuto.png"
39                                       onmouseover="this.src='../Img/Master/Menu/menu_HomeAuto_mover.png';"
40                                       onmouseout="this.src='../Img/Master/Menu/menu_HomeAuto.png';"
41                                       onmousedown="this.src='../Img/Master/Menu/menu_HomeAuto_pressed.png';"
42                       /><asp:ImageButton    ID="ImageButton3" runat="server"
43                                       ImageUrl="~/Img/Master/Menu/menu_Community.png"
44                                       onmouseover="this.src='../Img/Master/Menu/menu_Community_mover.png';"
45                                       onmouseout="this.src='../Img/Master/Menu/menu_Community.png';"
46                                       onmousedown="this.src='../Img/Master/Menu/menu_Community_pressed.png';"
47                       /><asp:ImageButton    ID="ImageButton4" runat="server"
48                                       ImageUrl="~/Img/Master/Menu/menu_Resources.png"
49                                       onmouseover="this.src='../Img/Master/Menu/menu_Resources_mover.png';"
50                                       onmouseout="this.src='../Img/Master/Menu/menu_Resources.png';"
51                                       onmousedown="this.src='../Img/Master/Menu/menu_Resources_pressed.png';"
52                       /><br />
53                   <asp:LoginView ID="LoginView1" runat="server">
54                       <LoggedInTemplate>
55                           <asp:ImageButton    ID="ImageButton6" runat="server"
56                                               ImageUrl="~/Img/Master/Menu/menu_CPProfile.png"
57                                               onmouseover="this.src='../Img/Master/Menu/menu_CPProfile_mover.png';"
58                                               onmouseout="this.src='../Img/Master/Menu/menu_CPProfile.png';"
59                                               onmousedown="this.src='../Img/Master/Menu/menu_CPProfile_pressed.png';"
60                           /><asp:ImageButton  ID="ImageButton7" runat="server"
61                                               ImageUrl="~/Img/Master/Menu/menu_LogOut.png"
62                                               onmouseover="this.src='../Img/Master/Menu/menu_LogOut_mover.png';"
63                                               onmouseout="this.src='../Img/Master/Menu/menu_LogOut.png';"
64                                               onmousedown="this.src='../Img/Master/Menu/menu_LogOut_pressed.png';" />
65                       </LoggedInTemplate>
66                       <AnonymousTemplate>
67                           <asp:ImageButton    ID="ImageButton5" runat="server"
68                                               ImageUrl="~/Img/Master/Menu/menu_Register.png"
69                                               onmouseover="this.src='../Img/Master/Menu/menu_Register_mover.png';"
70                                               onmouseout="this.src='../Img/Master/Menu/menu_Register.png';"
71                                               onmousedown="this.src='../Img/Master/Menu/menu_Register_pressed.png';"
72                           />
73                       </AnonymousTemplate>
74                   </asp:LoginView>
75               </div>
76               
77               <div class="BGMenuBottom">
78                   You are located in: (Sitemap goes here...)</div>
79           
80           </div>
81           
82           <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
83           </asp:contentplaceholder>
84       </div>
85       </form>
86   </body>
87   </html>
88

CSS:

1    body
2    {
3        font-size: 12pt;
4        margin: 0px;
5        color: white;
6        font-family: Tahoma;
7        background-color: Black;
8    }
9    
10   .leftSpacer
11   {
12       text-align: center;
13       background-color: Blue;
14       height: 256;
15   }
16   
17   .rightSpacer
18   {
19       text-align: center;
20       background-color: Green;
21       height: 256;
22   }
23   
24   .HDMonitorLeft
25   {
26       
27       background-image: url(../Img/Master/HDVMonitor.png);
28       background-repeat: no-repeat;
29       
30   }
31   
32   .HDMonitorRight
33   {
34       
35       background-image: url(../Img/Master/HDVMonitor.png);
36       background-repeat: no-repeat;
37       
38   }
39   
40   .BGMenuTop
41   {
42       text-align: center;
43       background-image: url(../Img/Master/Menu/menubg.png);
44       
45   }
46   
47   .BGMenuBottom
48   {
49       background-image: url(../Img/Master/Menu/menubgbottom.png);
50       height: 96px;
51   }
52   
53   .Screen
54   {
55       text-align: left;
56       font-size: 11pt;
57       width: 144px;
58       height: 224px;
59       margin-top: 16px;
60       padding-left: 9px;
61       padding-right: 9px;
62       margin-bottom: 16px;
63   }
64   
65   @media screen
66   {
67       body
68       {
69           font-weight: normal;
70           font-size: 12pt;
71           margin: 0px;
72           text-transform: none;
73           color: white;
74           font-style: normal;
75           font-family: Tahoma;
76           font-variant: normal;
77           text-decoration: none;
78           background-color: Black;
79       }
80       
81       .leftSpacer
82       {
83           float: left;
84           width: 144px;
85           height: 256px;
86       }
87       
88       .rightSpacer
89       {
90           float: right;
91           width: 144px;
92           height: 256px;
93       }
94   
95       .HDMonitorLeft
96       {
97           background-image: url(../Img/Master/HDVMonitor.png);
98           background-repeat: no-repeat;
99           width: 144px;
100          height: 256px;
101      }
102  
103      .HDMonitorRight
104      {
105          background-image: url(../Img/Master/HDVMonitor.png);
106          background-repeat: no-repeat;
107          width: 144px;
108          height: 256px;
109      }
110  
111      .BGMenuTop
112      {
113          text-align: left;
114          background-image: url(../Img/Master/Menu/menubg.png);
115          height: 160px;
116      }
117  
118      .BGMenuBottom
119      {
120          text-align: left;
121          background-image: url(../Img/Master/Menu/menubgbottom.png);
122          height: 96px;
123      }
124  
125      .Screen
126      {
127          text-align: left;
128          font-size: 11pt;
129          width: 126px;
130          height: 224px;
131          padding: 0px;
132          margin-top: 16px;
133          margin-left: 9px;
134          margin-right: 9px;
135          margin-bottom: 16px;
136      }
137  }

As you can see, I set leftSpacer and rightSpacer's text-align to center, but no effect. If I comment the @media screen, it should look like this:

[URL=http://img508.imageshack.us/my.php?image=hhscrnomediascreenfh5.jpg][IMG]http://img508.imageshack.us/img508/1142/hhscrnomediascreenfh5.th.jpg[/IMG][/URL]

You could see that the "monitor" snaps to the left although there's nothing in CSS and ASP.net for left alignment.

What could be wrong?

Thursday, June 28, 2007 4:11 PM

All replies

0

Sign in to vote

User1593896619 posted

Hello,

What if you set the left and the right margin of these two divs to 'auto' ?

Thursday, June 28, 2007 4:45 PM
0

Sign in to vote

User-198097752 posted

Setting the left and right margin for .Screen to auto only have an effect of setting the sides to 0 pixels. Taking out the margin and padding also has no effect on the alignment, either.

Thursday, June 28, 2007 5:37 PM
0

Sign in to vote

User113421904 posted

Hi,

Pocket IE supports several layout which make it suitable for the resolution of the mobile devices. Although it supports displaying pages for desktop, the layout might have been modified according to the layout settings.

Please adjust Pocket IE Layout Views.

Wednesday, July 4, 2007 2:29 AM
0

Sign in to vote

User-198097752 posted

I've tried different layout settings, but no effect on text-alignment for the div element.

It looks like I will have to do some more testing by creating a new master page and start from scratch, testing small steps at a time.

Thanks.

Wednesday, July 4, 2007 5:10 AM

Asked by:

Can't align a div element to center (handheld)

Question

All replies