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

  • 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

  • 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
  • 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
  • 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
  • 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