Solved

asp.net - controls wont line with CSS

Posted on 2011-03-23
6
200 Views
Last Modified: 2012-05-11
I am having difficulty getting these controls to line up in there respective columns..
<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    
<style type="text/css">

div.product_col { float:left;width:30%;border: 1px solid #000;  }
.mylabel 
{
	float: left;

}


div.quanity_col{ float:left;width:30%;border: 1px solid #000; }

.mybutton 
{
	float: left;
	text-align:left 
}

div.UnitPrice_col { float:left;width:10%;border: 1px solid #000; }
.mylabel 
{
	float: left;

	
}


div.Amount_col { float:left;width:10%;border: 1px solid #000; }
.mylabel 
{
	float: left;

	
}


div.Delivery_col { float:left;width:26%;border: 1px solid #000; }
.mylabel 
{
	float: left;

	
}


div.Remove_col { float:left;width:20%;border: 1px solid #000; }

.mybutton 
{
	float: left;
	
}

</style> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <br />
        <asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="#CC3300"></asp:Label>
        <br />
                
            <br />
        _________________________________________________________________________________________<br />
        								<TD align="center">
									<TABLE id="Table1" width="100%" align="center" borderColor="black" cellSpacing="0" cellPadding="1" border="1" runat="server">
										<tr>
											<td align="center" colSpan="6" style="FONT-WEIGHT:bold;FONT-SIZE:10pt;COLOR:white;FONT-FAMILY:verdana;BACKGROUND-COLOR:#0000FF">Your 
												Cart Content</td>
										</tr>
										<TR style="FONT-WEIGHT:bold;FONT-SIZE:10pt;FONT-FAMILY:verdana">
											<TD width="30%">Product Name:</TD>
											<TD width="30%">Quantity:</TD>
											<TD width="10%">UnitPrice:</TD>
											<TD width="10%">Amount:</TD>
											<TD style="width: 26%">Delivery</TD>
											<TD width="20%">Remove</TD>
										</TR>
									</TABLE>
								</TD>
								
								
								
								
								
							</TR>
							<TR vAlign="top" style="FONT-WEIGHT:bold;FONT-SIZE:10pt;COLOR:white;FONT-FAMILY:verdana;BACKGROUND-COLOR:#0000FF">
								
							</TR>
						</TABLE></td><br />
						
	<div class="product_col">
	        <asp:Label ID="Label2" runat="server" CssClass="mylabel"></asp:Label >
	            <asp:Label ID="Label6" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label7" runat="server" CssClass="mylabel"></asp:Label>
	            <asp:Label ID="Label11" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label12" runat="server" CssClass="mylabel"></asp:Label>
	            <asp:Label ID="Label16" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label17" runat="server" CssClass="mylabel"></asp:Label>
	             <asp:Label ID="Label21" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label22" runat="server" CssClass="mylabel"></asp:Label>
	             <asp:Label ID="Label26" runat="server"  CssClass="mylabel"></asp:Label>
	        
	</div>
	
	<div class="quanity_col">
	        <asp:TextBox ID="TextBox1" runat="server" Width="40px"  CssClass="mybutton"></asp:TextBox>
	        <asp:TextBox ID="TextBox2" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
	        <asp:TextBox ID="TextBox3" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
	        <asp:TextBox ID="TextBox4" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
	        <asp:TextBox ID="TextBox5" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
	</div>
	
	<div class="UnitPrice_col">
	        <asp:Label ID="Label3" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label8" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label13" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label18" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label23" runat="server"  CssClass="mylabel"></asp:Label>
	
	</div>
	
	<div class="Amount_col">
	        <asp:Label ID="Label4" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label9" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label14" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label19" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label24" runat="server"  CssClass="mylabel"></asp:Label>
	
	</div>
	
	<div class="Delivery_col">
	        <asp:Label ID="Label5" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label10" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label15" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label20" runat="server"  CssClass="mylabel"></asp:Label>
	        <asp:Label ID="Label25" runat="server"  CssClass="mylabel"></asp:Label>
	
	</div>
	
	<div class="Remove_col">
	        <asp:Button ID="Button3" runat="server" Width="31px" Text="X"  CssClass="mybutton"/>
	        <asp:Button ID="Button4" runat="server" Width="31px" Text="4"  CssClass="mybutton"/>
	        <asp:Button ID="Button5" runat="server" Width="31px" Text="5"  CssClass="mybutton"/>
	        <asp:Button ID="Button6" runat="server" Width="31px" Text="6"   CssClass="mybutton"/>
	        <asp:Button ID="Button7" runat="server" Width="31px" Text="7"  CssClass="mybutton"/>
	
	</div>

	
        
        <br />
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Label ID="Label28" runat="server"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Label ID="Label29" runat="server"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Label ID="Label30" runat="server"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
            <br />
            <div>
                <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
        &nbsp;&nbsp;&nbsp;
        <br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<asp:Button ID="Button10" runat="server" Text="Update" onclick="Button10_Click" 
                    style="height: 26px" />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button ID="Button9" 
                    runat="server" Text="Continue Shopping" onclick="Button9_Click" />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Check Out" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <asp:Button ID="Button8" runat="server" Text="Empty Cart" 
                    onclick="Button8_Click" />
        <br />
        <br />
        </div>
    &nbsp;
    <br />
</b>
    </div>
    </form>
</body>
</html>

Open in new window

0
Comment
Question by:GlobaLevel
  • 4
  • 2
6 Comments
 
LVL 10

Author Comment

by:GlobaLevel
ID: 35199845
text align wasnt working either...
0
 
LVL 3

Expert Comment

by:sbickerstaff
ID: 35200091
Are the IDs of the elements changing when you view the source of the webpage, as is the default behaviour of ASP.NET? Which means that for any asp:control, you can't assign css easily.

If so (and provided you're using ASP.NET 4.0, this can be stopped so that any name you give it, it'll retain that ID.

Add the following to your web.config file

<system.web>
    <pages clientIDMode="Static" />
</system.web>

Open in new window

0
 
LVL 10

Author Comment

by:GlobaLevel
ID: 35200205
the issue i am having ...is that the controls in each <div>...wont line up to th eleft vertically..but run to the right..till it hits the end of the DIV..then goes to the next line and repeats...
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 3

Accepted Solution

by:
sbickerstaff earned 500 total points
ID: 35200549
firstly, in your css you have:

<style type="text/css">

div.product_col {
  float:left;
  width: 30%;
  border: 1px solid #000;
}
.mylabel 
{
        float: left;

}


div.quanity_col { 
  float:left;
  width:30%;
  border: 1px solid #000; 
}
.mybutton 
{
        float: left;
        text-align:left 
}

div.UnitPrice_col { 
  float:left;
  width:10%;
  border: 1px solid #000; 
}
.mylabel 
{
        float: left;

        
}


div.Amount_col { 
  float:left;
  width:10%;
  border: 1px solid #000; 
}
.mylabel 
{
        float: left;

        
}

div.Delivery_col { 
  float:left;
  width:26%;
  border: 1px solid #000; 
}
.mylabel 
{
        float: left;

        
}


div.Remove_col { 
float:left;
width:20%;
border: 1px solid #000; 
}

.mybutton 
{
        float: left;
        
}
</style>

Open in new window


but for your mylabel and mybutton classes, are you setting them for each container i.e.

div.Remove_col {
float:left;
width:20%;
border: 1px solid #000;
}
.mybutton (which belongs to div.Remove_col) ???
{
        float: left;
}

because for this to happen, your css should be:

<style type="text/css">

div.product_col {
  float:left;
  width: 30%;
  border: 1px solid #000;
}
div.product_col .mylabel 
{
  float: left;
}


div.quanity_col { 
  float:left;
  width:30%;
  border: 1px solid #000; 
}

div.quanity_col .mybutton 
{
  float: left;
  text-align:left 
}

div.UnitPrice_col { 
  float:left;
  width:10%;
  border: 1px solid #000; 
}
div.UnitPrice_col .mylabel 
{
  float: left;
}


div.Amount_col { 
  float:left;
  width:10%;
  border: 1px solid #000; 
}
div.Amount_col .mylabel 
{
  float: left;
}

div.Delivery_col { 
  float:left;
  width:26%;
  border: 1px solid #000; 
}
div.Delivery_col.mylabel 
{
  float: left;      
}


div.Remove_col { 
  float:left;
  width:20%;
  border: 1px solid #000; 
}

div.Remove_col.mybutton 
{
  float: left;       
}

</style>

Open in new window


Next, I'm can't remember how <span> (generated by the <asp:Label>) handles width, so you could try using <asp:Panel> to generate divs which don't mind being resized.  However, after these, you will need to perform a clear: left; (see below)


<div class="product_col">
  <asp:Panel ID="Label2" runat="server" CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label6" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label7" runat="server" CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label11" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label12" runat="server" CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label16" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label17" runat="server" CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label21" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label22" runat="server" CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label26" runat="server"  CssClass="mylabel"></asp:Panel>
</div>
<div style="clear: left;"></div>
<div class="quanity_col">
  <asp:TextBox ID="TextBox1" runat="server" Width="40px"  CssClass="mybutton"></asp:TextBox>
  <asp:TextBox ID="TextBox2" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
  <asp:TextBox ID="TextBox3" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
  <asp:TextBox ID="TextBox4" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
  <asp:TextBox ID="TextBox5" runat="server" Width="40px" CssClass="mybutton"></asp:TextBox>
</div>
<div style="clear: left;"></div>
<div class="UnitPrice_col">
  <asp:Panel ID="Label3" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label8" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label13" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label18" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label23" runat="server"  CssClass="mylabel"></asp:Panel>
</div>
<div style="clear: left;"></div>
<div class="Amount_col">
  <asp:Panel ID="Label4" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label9" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label14" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label19" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label24" runat="server"  CssClass="mylabel"></asp:Panel>
</div>
<div style="clear: left;"></div>
<div class="Delivery_col">
  <asp:Panel ID="Label5" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label10" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label15" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label20" runat="server"  CssClass="mylabel"></asp:Panel>
  <asp:Panel ID="Label25" runat="server"  CssClass="mylabel"></asp:Panel>
</div>
<div style="clear: left;"></div>
<div class="Remove_col">
  <asp:Button ID="Button3" runat="server" Width="31px" Text="X"  CssClass="mybutton"/>
  <asp:Button ID="Button4" runat="server" Width="31px" Text="4"  CssClass="mybutton"/>
  <asp:Button ID="Button5" runat="server" Width="31px" Text="5"  CssClass="mybutton"/>
  <asp:Button ID="Button6" runat="server" Width="31px" Text="6"   CssClass="mybutton"/>
  <asp:Button ID="Button7" runat="server" Width="31px" Text="7"  CssClass="mybutton"/>
</div>

Open in new window


this is just what I would do.  But give this a go and let me know how you get on.
0
 
LVL 10

Author Comment

by:GlobaLevel
ID: 35234196
that you very good...
0
 
LVL 10

Author Comment

by:GlobaLevel
ID: 35234199
thank you very good...
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question