开发者

Positioning textboxes over 'login box' background image

开发者 https://www.devze.com 2023-02-08 14:53 出处:网络
I have a \'background graphic\' which is basically a design with two premade \'white boxes\' where I would like to 开发者_JS百科position my login/password textboxes.Stubbornly they refused to move fro

I have a 'background graphic' which is basically a design with two premade 'white boxes' where I would like to 开发者_JS百科position my login/password textboxes. Stubbornly they refused to move from the top left of that image.

I'm using 960 grid system but I think the question probably isn't affected by that.

I've tried various things - trying absolute positioning, padding/margin settings. Even in visual studio I used the menus (gasp!) to select position as absolute and dragged the box down. In the designer it looked to be in the right spot, css had been added but in the browser, there it was at the top left again. Any suggestions before my computer learns about a new type of 'windows'?

My goal is to be able to specify the x,y coordinates of where each textbox should be. I'd rather not resort to slicing and tables and all that stuff.

The css is the standard grid960 setup, I won't post it due to size. For the box containing the login image:

#loginPanel {
    background: url('/images/Main_Login2.png');
    height: 300px;
}

[have put various positioning settings against #loginPanel and #txtLogin but no luck so far]

The markup:

<div id="test" class="grid_2 ">
<br />
</div>
<div id="loginPanel" class="grid_8 ">

    <asp:TextBox ID="txtLogin" runat="server"></asp:TextBox>

</div>

Any help appreciated!

Mark


Lots of views but no news. I figured this would be an easy one. Anyway, I've found the solution, not sure why the absolute positioning didn't work for me initially but I think the secret was positioning the container Divs rather than using the positioning on the textbox itself. The below code works a charm, hope it helps someone.

<div id="loginPanel" class="grid_8 push_2">
        <div style="position: absolute; top: 122px; left: 240px; width: 200px;">
            <asp:TextBox ID="TextBox1" runat="server" Height="16px" Font-Size="Small" Width="190px"
                BorderStyle="None"></asp:TextBox>
        </div>
        <div style="position: absolute; top: 152px; left: 240px; width: 200px;">
            <asp:TextBox ID="txtPassword" runat="server" Height="16px" Font-Size="Small" Width="190px"
                BorderStyle="None"></asp:TextBox>
        </div>
    </div>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号