Member Avatar for haansi

Thanks for your attention and time, I need your support please.

I am doing site with div (table less layout) structures.

I have a user login box which is made by divs in it and no table. Problem is that the control is not coming in center of page rather it is appearing on left side. Please guide me how I can resolve this issue.

I am pasting code below:

CSS Code

body
{
    margin:0 0 0 0;
    
}

div.banner
{
    background:gray url("../Images/grad1.gif");     
    height:62px;        
    
}
div.logo
{
    background:url("../Images/TraccrLogo.png") no-repeat;     
    width:217px;
    height:59px;
    margin:1px 0 0 1%;
}

div.staffLoginPanel
{
    height:200px;
    width:350px;
    border:solid 1px #F28226;
     display:block;
     position:fixed;   
    
     
    
}

div.staffLoginPanel .staffLogiPanelHeading
{    
    height:14%;
    width:100%;
    background: #F28226;
    color:White;
    text-align:center;    
    vertical-align:middle;  
    font:bold 16px Arial;    
     margin:0 0 0 0;
}

div.staffLoginPanel label
{
    color:#878787;
    font: bold 14px arial;
    margin:7px 0 0 12px;  
    display:block;       
    
}

div.staffLoginPanel Input[type="text"]
{
    border:solid 1px #F28226;
    background:#F2F2F2;
    font: bold 12px arial;
    width:225px;   
    border:dsshed 1px black;      
    margin:5px 0 0 12px;
}

div.staffLoginPanel input[type="submit"]
{
    background:#F28226;
    font: bold 12px arial;
    color:White ;
    margin:0 0 0 15px;       
}
div.staffLoginPanel div
{
    color:#F28226;
    font: bold 10px arial;    
    margin:20px 50px 0px 15px;
}

Page Code

<body>
    <form id="form1" runat="server">
    <div class="staffLoginPanel">
        <div class="staffLogiPanelHeading">
            Staff Login
        </div>
        <label>
            Staff ID</label>
        <input type="text" />
        <label>
            Password</label>
        <input type="text" />
        <asp:Button runat="server" ID="btnLogin" Text="Login" />
        <div>
            If you cannot remember your Traccr password, contact the Global IT Services Helpdesk
            and ask for a password reset</div>
    </div>
    </form>
</body>

I am very thankful to you for sharing and sparing time.


Thanks a lot.

Edited by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
  • 2 Contributors
  • 1 Reply
  • 150 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by cereal
Member Avatar for cereal

In your CSS:
@ line 4 add this rule: text-align: center; so IE will center the div
@ line 27 remove: position: fixed; and add:

display: block;
margin: 0px auto;
text-align: left;

Right after add a new rule for the form:

form
{
   margin-top: 30px;
}

Bye :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.