Solved

asp.net - controls wont line with CSS

Posted on 2011-03-23
6
197 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
Comment Utility
text align wasnt working either...
0
 
LVL 3

Expert Comment

by:sbickerstaff
Comment Utility
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
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 3

Accepted Solution

by:
sbickerstaff earned 500 total points
Comment Utility
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
Comment Utility
that you very good...
0
 
LVL 10

Author Comment

by:GlobaLevel
Comment Utility
thank you very good...
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now