locked
Best way to arrange Text on ASP .NET page? RRS feed

  • Question

  • User-791371803 posted

     Hi,

    I have been struggling this weekend on how to nicely arrange the text on my ASP .NET pages.  For example, the login page.  I have put me ASP controls on the page, textboxes and added the code behind.  All works good.  I need to put several blurbs of text below, and a nice image above.  I have been dragging asp labels onto the form, and trying to center them visually with the text boxes.  I see as I run it in a browser and resize the browser, nothing moves.  I tried dragging an ASP table onto the form, but couldn't find where to set the number of rows and columns.

     What is the preferred way of adding the text to make the form look nice?

    Thanks again,

    Steve
     

    Monday, August 27, 2007 10:19 AM

Answers

  • User595841651 posted

     I thought so too.  I am very confused now.  I just wanted to know the best way to position text and images around your ASP .NET controls.  I use absolute positioning with the controls, as I understand it, that is what to do in ASP .NET 2.0.  I know very well how to create a table in HTML.  I don't know how the best way to position them around the ASP .NET controls is.  Do you put a <div> on the page, then view it and see where it is in relation to your controls, then start adding ,<br>s  until it is where you want it?

    Definitely NOT... Absolute positoning is the wrong way to go... it can really cause havok. Flow layout is the way to go and is better interpreted by the browsers, not to mention the issue of resolution on the client....

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 27, 2007 7:14 PM
  • User595841651 posted

     Curt,

    Could you kindly tell me how to switch to flow?  

    Thanks 

    1) Don't use the Designer to move controls.
    2) Lose all the style tags like this "z-index: 100; left: 264px; ; top: 224px"

    That should do it... let the browser dictate this. User "margin" and "padding" style tags instead of "left" and never use the ""

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 27, 2007 10:26 PM

All replies

  • User595841651 posted

    1) You need to turn off GridLayout and turn on Flow....

    2) as for how to create table rows/colums.... I suggest picking up a good book. If you are strugling on the HTML portion you really need some more background before trying to jump into Asp.Net

    Monday, August 27, 2007 10:25 AM
  • User-1995538749 posted

    There's no reason to add Label or Literal controls to your page unless you're going to act upon them within the code-behind. If you need to add text to the page, then do exactly that. You may want to throw a Span or a Div tag around your text to format it, but you can add thetext directly to your page as well. In your case, it sounds like I'd just add a couple of Divs on your page and add the text within there.

    Monday, August 27, 2007 10:27 AM
  • User-791371803 posted

     That is what I thought, but when I added just your basic HTML, like the Divs, they kept showing up above my controls instead of below them as I was adding them in the Source view

    Monday, August 27, 2007 10:49 AM
  • User-791371803 posted

     Curt,

    I certainly won't argue that I need more info and experience, but I am trying to get it.  We have been re-writing lots of windows apps into ASP .NET apps, with lots of ADO .NET and doing OK, but I just haven't tried mixing basic HTML with the ASP .NET pages.  So when I tried to put in a basic paragraph and div, it kept showing up in the wrong places relative to me ASP controls.  It made me think maybe I have to do it another way.  I thought just add my normal HTML table and put the text in there and center it all.   

    Monday, August 27, 2007 10:54 AM
  • User-2065441356 posted

    You can use tags that are specific for html also in asp.net. That means you can use tag <table> instead of the server web control "Table" which is provided by asp.net.

    Using html can save your time spent on makinkg layout of your page, but only until the concrete content don't interact with a code behind on server. But on the other side you can't use asp.net web controls to interact with JavaScript, so this is problems that have to be learned and thought before you start doing your page.

    I agree with Curt, you realy have to learn more about simpler technologies before you start to make web forms.

    Monday, August 27, 2007 10:59 AM
  • User-1995538749 posted

     That is what I thought, but when I added just your basic HTML, like the Divs, they kept showing up above my controls instead of below them as I was adding them in the Source view

    Can we see your code?

    Monday, August 27, 2007 11:06 AM
  • User-791371803 posted

    Sure!  You can see I did add a ASP table where I wanted to add just HTML.  Still, if I add <div> Steve ,</div> after that, I will get Steve above my text boxes.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="LogIn.aspx.vb" Inherits="_Default" %>

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

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head runat="server">

    <title>Untitled Page</title>

    </head>

    <body>

    <form id="form1" runat="server" defaultbutton="Button1" defaultfocus="txtUserID">

    <div>

    <asp:TextBox ID="txtUserID" runat="server" Style="z-index: 100; left: 264px; ;

    top: 224px" Width="155px" BorderColor="#E0E0E0" BorderStyle="Inset"></asp:TextBox>

    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtUserID"

    Style="z-index: 101; left: 432px; ; top: 224px" Width="104px">*Required</asp:RequiredFieldValidator>

    <asp:TextBox ID="txtPassword" runat="server" Style="z-index: 102; left: 264px; ;

    top: 256px" TextMode="Password" Width="155px" BorderColor="#E0E0E0" BorderStyle="Inset"></asp:TextBox>

    <asp:Button ID="Button1" runat="server" Style="z-index: 103; left: 304px; ;

    top: 288px" Text="Log In" Width="72px" />

    <asp:Label ID="lblMsg" runat="server" Style="z-index: 104; left: 248px; ;

    top: 320px" Width="304px"></asp:Label>

    <asp:Label ID="Label1" runat="server" Font-Bold="True" Style="z-index: 105; left: 184px;

    ; top: 224px" Text="User ID" Width="64px"></asp:Label>

    <asp:Label ID="Label2" runat="server" Font-Bold="True" Style="z-index: 106; left: 184px;

    ; top: 256px" Text="Password" Width="72px"></asp:Label>

    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPassword"

    Style="z-index: 107; left: 432px; ; top: 256px" Width="104px">*Required</asp:RequiredFieldValidator>

    &nbsp; &nbsp; &nbsp;&nbsp;</div>

    <asp:Table ID="Table1" runat="server" CellPadding="0" CellSpacing="0" Font-Size="Smaller"

    Height="56px" Style="z-index: 114; left: 224px; ; top: 408px"

    Width="240px">

    <asp:TableRow runat="server" HorizontalAlign="Center">

    <asp:TableCell runat="server">Contact Info:</asp:TableCell>

    </asp:TableRow>

    <asp:TableRow runat="server" HorizontalAlign="Center">

    <asp:TableCell runat="server">Rip@ncaservices.com</asp:TableCell>

    </asp:TableRow>

    <asp:TableRow runat="server" HorizontalAlign="Center">

    <asp:TableCell runat="server">Eugene@ncaservices.com</asp:TableCell>

    </asp:TableRow>

    <asp:TableRow runat="server" HorizontalAlign="Center">

    <asp:TableCell runat="server">Pam@ncaservices.com</asp:TableCell>

    </asp:TableRow>

    <asp:TableRow runat="server" HorizontalAlign="Center">

    <asp:TableCell runat="server">Phone: 866.511.6227</asp:TableCell>

    </asp:TableRow>

    </asp:Table>

    </form>

    </body>

    </html>

     

    Monday, August 27, 2007 11:20 AM
  • User1717166431 posted

    1) You need to turn off GridLayout and turn on Flow....

    2) as for how to create table rows/colums.... I suggest picking up a good book. If you are strugling on the HTML portion you really need some more background before trying to jump into Asp.Net

    I see absolute positioning all over. Curt is correct

    Monday, August 27, 2007 11:29 AM
  • User-2065441356 posted

    I don't see a mistake.

    All items have absolute position, and it's generated by an editor, am I right?

    I think that this code will work well ...

    Monday, August 27, 2007 11:43 AM
  • User-791371803 posted

     I thought so too.  I am very confused now.  I just wanted to know the best way to position text and images around your ASP .NET controls.  I use absolute positioning with the controls, as I understand it, that is what to do in ASP .NET 2.0.  I know very well how to create a table in HTML.  I don't know how the best way to position them around the ASP .NET controls is.  Do you put a <div> on the page, then view it and see where it is in relation to your controls, then start adding ,<br>s  until it is where you want it?

    Monday, August 27, 2007 12:46 PM
  • User60291871 posted

    Hi, Dont really see where you're going wrong but I'd put your controls in to a row/cell in the same table and above the rows/cells where you want to place your text.

    Monday, August 27, 2007 3:00 PM
  • User595841651 posted

     I thought so too.  I am very confused now.  I just wanted to know the best way to position text and images around your ASP .NET controls.  I use absolute positioning with the controls, as I understand it, that is what to do in ASP .NET 2.0.  I know very well how to create a table in HTML.  I don't know how the best way to position them around the ASP .NET controls is.  Do you put a <div> on the page, then view it and see where it is in relation to your controls, then start adding ,<br>s  until it is where you want it?

    Definitely NOT... Absolute positoning is the wrong way to go... it can really cause havok. Flow layout is the way to go and is better interpreted by the browsers, not to mention the issue of resolution on the client....

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 27, 2007 7:14 PM
  • User-791371803 posted

     Curt,

    Could you kindly tell me how to switch to flow?  

    Thanks 

    Monday, August 27, 2007 8:53 PM
  • User595841651 posted

     Curt,

    Could you kindly tell me how to switch to flow?  

    Thanks 

    1) Don't use the Designer to move controls.
    2) Lose all the style tags like this "z-index: 100; left: 264px; ; top: 224px"

    That should do it... let the browser dictate this. User "margin" and "padding" style tags instead of "left" and never use the ""

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 27, 2007 10:26 PM
  • User1717166431 posted

    Make a copy of your app because everything will be re-arranged when you turn off or remove all your absolute positions.

    Assuming you are using a flavor of Visual studio and if changing the settings in your Visual Studio does not remove the absolute positioning tags (and it may not) you will have to remove it your self. Which means removing all those pieces in your style tags that Curt is talking about.

    An example would be <asp:TextBox ID="txtUserID" runat="server" Style="z-index: 100; left: 264px; ; top: 224px" Width="155px" BorderColor="#E0E0E0" BorderStyle="Inset"></asp:TextBox>

    Remove the whole Style="z-index: 100; left: 264px; ; top: 224px" because the ; is the style tag that causes absolute positioning and left: 264px; top: 224px is location of the positioning.

    It should end up looking like this <asp:TextBox ID="txtUserID" runat="server" BorderColor="#E0E0E0" BorderStyle="Inset"></asp:TextBox>

     

    Then change your setting in your Visual Studio to not use absolute positioning, for me (VS 2005) it is under

    Tools>Options...

    Then I have the check box "show all settings" checked and under CSS Positioning you will find it.

    Maybe this link will help you out http://msdn.microsoft.com/en-us/library/ms178734(VS.80).aspx 

    Wednesday, August 29, 2007 6:46 PM
  • User-791371803 posted

     Curt,

    I just want to make sure I am doing this with the best practices.  I am not using absolute positioning at all.  I am creating the pages with plain old html tags and tables.  When I need an ASP .NET control, I drag it on the form, let it fall where ever, then go to Source and cut from where it put it and paste it in the table TD or where ever.  Does this sound like I am following good practices?

    Thanks again,

    Steve 

    Tuesday, September 4, 2007 10:16 AM
  • User595841651 posted

    That's how I'd do it....

    Tuesday, September 4, 2007 11:21 AM