1.11M Members

div tags not formattted when view in browser

 
0
 

hi there,

i am trying to build an website and i have formatted them with div tags, but when i view the same page in a web browser the text boxes and the labels are not in a proper place. how do i fix it

the code is below

<%@ Page Title="" Language="C#" MasterPageFile="~/View/Master/Site.master" AutoEventWireup="true"
    CodeFile="AddEdit.aspx.cs" Inherits="View_Vendor_Add" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" runat="Server">
    <div>
        <div>
            <h2 class="header2">
                Add New Vendor</h2>
        </div>
        <div>
        </div>
        <div style="width: 750px; height: 500px; margin-left: auto; margin-right: auto">
            <div style="width: 300px; height: 30px;">
                <div style="width: 100px; float: left;">
                    <asp:Label ID="lblPO" runat="server" Text="ID"></asp:Label>
                </div>
                <div style="width: 200px; float: left;">
                    <asp:TextBox ID="txtID" runat="server"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px;">
                <div style="width: 100px; float: left;">
                    <asp:Label ID="lblVendor" runat="server" Text="Vendor"></asp:Label>
                </div>
                <div style="width: 200px; float: left;">
                    <asp:TextBox ID="txtVendor" runat="server"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: left">
                <div style="width: 100px; float: left;">
                    <asp:Label ID="lblAddres" runat="server" Text="Adress"></asp:Label>
                </div>
                <div style="width: 200px; float: left;">
                    <asp:TextBox ID="txtAddres" runat="server"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: right">
                <div style="width: 100px; float: left;">
                    <asp:Label ID="Label1" runat="server" Text="Addres2"></asp:Label>
                </div>
                <div style="width: 200px; float: left;">
                    <asp:TextBox ID="txtAddres2" runat="server"></asp:TextBox>
                </div>
            </div>
            <div style="width: 400px; height: 30px;">
                <div style="width: 100px; float: left;">
                    <asp:Label ID="lblCity" runat="server" Text="City"></asp:Label>
                </div>
                <div style="width: 100px; float: left;">
                    <asp:TextBox ID="txtCity" runat="server" Width="102px"></asp:TextBox>
                </div>
                <div style="width: 50px; float: left;">
                    <asp:Label ID="Label2" runat="server" Text="State"></asp:Label>
                </div>
                <div style="width: 50px; float: left;">
                    <asp:TextBox ID="TextBox2" runat="server" Width="50px"></asp:TextBox>
                </div>
                <div style="width: 50px; float: left;">
                    <asp:Label ID="lblZip" runat="server" Text="Zip"></asp:Label>
                </div>
                <div style="width: 50px; float: left;">
                    <asp:TextBox ID="txtZip" runat="server" Width="50px"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: left;">
                <div style="width: 100px; float: left">
                    <asp:Label ID="lblContact" runat="server" Text="Contact"></asp:Label>
                </div>
                <div style="width: 200px;">
                    <asp:TextBox ID="txtContact" runat="server" Width="200px"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: right;">
                <div style="width: 100px; float: left">
                    <asp:Label ID="lblTerms" runat="server" Text="Terms"></asp:Label>
                </div>
                <div style="width: 200px;">
                    <asp:TextBox ID="txtTerms" runat="server" Width="200px"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: left;">
                <div style="width: 100px; float: left">
                    <asp:Label ID="lblTel" runat="server" Text="Telephone"></asp:Label>
                </div>
                <div style="width: 200px;">
                    <asp:TextBox ID="txtTel" runat="server" Width="200px"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: right;">
                <div style="width: 100px; float: left">
                    <asp:Label ID="lblFax" runat="server" Text="Fax"></asp:Label>
                </div>
                <div style="width: 200px;">
                    <asp:TextBox ID="txtFax" runat="server" Width="200px"></asp:TextBox>
                </div>
            </div>
            <div style="width: 650px; height: 30px; margin-left: auto; margin-right: auto;">
            </div>
            <div style="width: 650px; height: 30px; margin-left: auto; margin-right: auto;">
                <div style="width: 80px; height: 30px; float:right">
                    <asp:Button ID="btnAdd" runat="server" Text="Add" Width="60px" />
                </div>                
                <div style="width: 25px; height: 30px; float:right">                   
                </div>
                 <div style="width: 80px; height: 30px; float:right">
                    <asp:Button ID="btnSearch" runat="server" Text="Search" Width="60px" />
                </div>
                <div style="width: 25px; height: 30px; float:right">                                   
                </div>
                <div style="width: 80px; height: 30px; float:right">
                    <asp:Button ID="btnRefresh" runat="server" Text="Refresh" Width="60px" />
                </div>
                <div style="width: 25px; height: 30px; float:right">                                   
                </div>
                <div style="width: 80px; height: 30px; float:right">
                    <asp:Button ID="btnEdit" runat="server" Text="Edit" Width="60px" />
                </div>
                <div style="width: 25px; height: 30px; float:right">                                   
                </div>
                <div style="width: 80px; height: 30px; float:right">
                    <asp:Button ID="btnDelete" runat="server" Text="Delete" Width="60px" />
                </div>
            </div>
        </div>
    </div>
</asp:Content>
 
0
 

This forum is for Classic ASP and your code is obviously for ASP.Net.

 
0
 

In what way are they not in their proper place? Should the label and textbox be on a new line each time like a typical form? At the minute they won't because your first div is a width of 750px and the nested ones are 300px which means you'll get two of these on each line.

Firstly you should be using css to handle these divs the code will be easier to manage and re-use. Secondly set the divs to have the css display:block; this will make them full width unless a width is specified, this makes these easier to manage as well.

 
0
 

Asp:TextBox is not used in Classic ASP. The topic doesn't belong here.

 
0
 

In what way are they not in their proper place? Should the label and textbox be on a new line each time like a typical form? At the minute they won't because your first div is a width of 750px and the nested ones are 300px which means you'll get two of these on each line.

Firstly you should be using css to handle these divs the code will be easier to manage and re-use. Secondly set the divs to have the css display:block; this will make them full width unless a width is specified, this makes these easier to manage as well.

can you give me an example how to put the code to css?
what is display block can you give me more information on it

 
0
 

Have a look here for using stylesheets for css: http://webdesign.about.com/od/css/a/aa051203a.htm

display:block is a css element that takes up the full width available, with a new line before and after.

 
0
 

This forum is for Classic ASP and your code is obviously for ASP.Net.

have i posted in the wrong forum???

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: