1,105,581 Community Members

div tags not formattted when view in browser

Member Avatar
judithSampathwa
Posting Pro in Training
453 posts since May 2010
Reputation Points: -2 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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>
Member Avatar
ArtistScope
Junior Poster
146 posts since Jun 2010
Reputation Points: -5 [?]
Q&As Helped to Solve: 15 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
breath2k
Newbie Poster
9 posts since Jan 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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.

Member Avatar
ArtistScope
Junior Poster
146 posts since Jun 2010
Reputation Points: -5 [?]
Q&As Helped to Solve: 15 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
judithSampathwa
Posting Pro in Training
453 posts since May 2010
Reputation Points: -2 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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

Member Avatar
breath2k
Newbie Poster
9 posts since Jan 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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.

Member Avatar
judithSampathwa
Posting Pro in Training
453 posts since May 2010
Reputation Points: -2 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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 three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: