Solved

asp.net - controls wont line with CSS

Posted on 2011-03-23
6
199 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
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 
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

Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

821 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