<center> and Style=Position:absolute

Discussion in 'HTML' started by jobs, Aug 15, 2007.

  1. jobs

    jobs Guest

    This might be an ASP.NET question.

    I have a simple login page with roughly a 300px x 300px image behind
    the asp.net login control. I need the login control to land in the
    middle of the image. I want both the image and the login controlrol to
    always be in the center of the page. How can I do this?

    I use position:absolute to get the asp.net login control on top of
    the image, but then when the IE window size is changed (by the user)
    the login control does not center. Here's my markup code:



    <form id="form1"
    runat="server">
    <br /
    >


    <center>


    <div>
    <img src="App_Themes/Retailer/images/
    retaillogin.GIF" />

    <asp:Login ID="Login" runat="server"
    DestinationPageUrl="~/Main/Default.aspx"
    Style="position: absolute; left: 278px; top:
    188px" Height="152px" Width="327px">
    </
    asp:Login>
    <asp:Button ID="RecoverPassword" runat="server"
    Text="Recover Password"

    PostBackUrl="RecoverPass.aspx" Style="left: 286px; position:
    absolute; top: 319px"
    Width="100px" /
    >


    </
    div>
    </
    center>
    </form>

    Thanks for any help or information.
    jobs, Aug 15, 2007
    #1
    1. Advertising

  2. jobs

    Matt White Guest

    On Aug 15, 9:38 am, jobs <> wrote:
    > This might be an ASP.NET question.
    >
    > I have a simple login page with roughly a 300px x 300px image behind
    > the asp.net login control. I need the login control to land in the
    > middle of the image. I want both the image and the login controlrol to
    > always be in the center of the page. How can I do this?
    >
    > I use position:absolute to get the asp.net login control on top of
    > the image, but then when the IE window size is changed (by the user)
    > the login control does not center. Here's my markup code:
    >
    > <form id="form1"
    > runat="server">
    > <br /
    >
    >
    >
    > <center>
    >
    > <div>
    > <img src="App_Themes/Retailer/images/
    > retaillogin.GIF" />
    >
    > <asp:Login ID="Login" runat="server"
    > DestinationPageUrl="~/Main/Default.aspx"
    > Style="position: absolute; left: 278px; top:
    > 188px" Height="152px" Width="327px">
    > </
    > asp:Login>
    > <asp:Button ID="RecoverPassword" runat="server"
    > Text="Recover Password"
    >
    > PostBackUrl="RecoverPass.aspx" Style="left: 286px; position:
    > absolute; top: 319px"
    > Width="100px" /
    >
    >
    >
    > </
    > div>
    > </
    > center>
    > </form>
    >
    > Thanks for any help or information.


    Here's a simple example that I think is what you want. You can copy it
    to an html file and see if it's correct. The relative positioning will
    position the word "LOGIN" relative to where it would normally be.
    (Take the style line out of the div tag to see where it would normally
    be.) Use the top: directive to tell it exactly where to go from its
    normal position.

    <html>
    <head>
    <title>none</title>
    </head>
    <body>
    <center>
    <div>
    <img src="noimage.gif" width=300 height=300 />
    <div style="position:relative;top:-156px;">LOGIN</div>
    </div>
    </center>
    </body>
    </html>
    Matt White, Aug 17, 2007
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luqman
    Replies:
    1
    Views:
    655
    Luqman
    Feb 7, 2006
  2. david graham

    IE5.5 and absolute position of a div

    david graham, Sep 11, 2003, in forum: HTML
    Replies:
    11
    Views:
    908
  3. jobs
    Replies:
    1
    Views:
    517
    Collin Chung
    Aug 16, 2007
  4. James Byrne
    Replies:
    3
    Views:
    558
    James Byrne
    Sep 14, 2010
  5. Amir Hardon
    Replies:
    0
    Views:
    261
    Amir Hardon
    May 31, 2004
Loading...

Share This Page