Solved

ASP.net organising a screen using <div> (sorry but couldn't delete SQL area only ASP relevant)

Posted on 2012-03-25
4
318 Views
Last Modified: 2012-06-22
Hi

I have been asked to rearrange the following ASP.net web page that is divided up using <div...
I have no idea on how this works. The markup for the page is below followed with my currently disorganised screen. Could someone please give me a few pointers on how to organise the screen so the right hand side that I have managed to somehow force downward somehow comes up again into a neat design.
Thanks

<%@ Page Title="Placements" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Placements.aspx.cs" Inherits="CRM_GHB.Placements" EnableEventValidation="false" %>


<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

<script type="text/javascript">
    $(function () {
        $('input#contact_search').quicksearch('.gvContacts tr:gt(0)');
    });
</script>

<link href="/Styles/crm.css" rel="stylesheet" type="text/css" media="screen" />

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div style="margin-top:10px;">
        <div id="col_left">
            <div class="sectionContent">
                <div class="sectionHeading">
                    <h3 style="float:left">Contacts</h3><span class="label">Search: <input id="contact_search" /></span>
                </div>

                <div style="width: 95%; height: 200px; overflow-y:scroll; margin:10px auto 0 auto;">
                        <asp:GridView ID="gvContacts" CssClass="gvContacts" runat="server"
                        AllowSorting="True" DataSourceID="SQL"
                        OnRowDataBound="gvContacts_RowDataBound" OnRowCommand="gvContacts_RowCommand"
                        OnSelectedIndexChanged="gvContacts_SelectedIndexChanged" AutoGenerateColumns="False"
                        >

                        <Columns>
                            <asp:BoundField DataField="Company" HeaderText="Company"
                                SortExpression="Company" />
                            <asp:BoundField DataField="Last_Name" HeaderText="Last_Name"
                                SortExpression="Last_Name" />
                            <asp:BoundField DataField="First_Name" HeaderText="First_Name"
                                SortExpression="First_Name" />
                            <asp:BoundField DataField="column1" HeaderText="column1"
                                SortExpression="column1" />
                        </Columns>

                        <HeaderStyle BackColor="#EDEEF0"  Font-Bold="True" />
                    </asp:GridView>
               
                      <asp:SqlDataSource ID="SQL" runat="server"
                        ConnectionString="<%$ ConnectionStrings:ConnectionString1 %>"
                       
                        SelectCommand="SELECT [Company], [Last Name] AS Last_Name, [First Name] AS First_Name, [E-mail Address] AS column1 FROM [Customers]"
                        ProviderName="<%$ ConnectionStrings:ConnectionString1.ProviderName %>">
                    </asp:SqlDataSource>
                  </div>
               
                <asp:TextBox id="txtContactID"  runat="server" value="-1" visible="false"/>
               
            </div>

            <div class="sectionContent">
                <div class="sectionHeading">
                    <h3>Notes</h3>
                </div>
               
                <div style="width: 95%; height: 200px; overflow-y:scroll; margin:10px auto 0 auto;">
                        <asp:GridView ID="gvNotes" CssClass="gvNotes" runat="server"
                        AllowSorting="True" DataSourceID="notes_SQL"
                        OnRowDataBound="gvNotes_RowDataBound"
                        OnSelectedIndexChanged="gvNotes_SelectedIndexChanged" AutoGenerateColumns="true"
                        >

                        <Columns>
                            <asp:CommandField ShowSelectButton="True" Visible="false"/>
                            <asp:ButtonField CommandName="Select" Visible="false" />
                        </Columns>

                        <HeaderStyle BackColor="#EDEEF0"  Font-Bold="True" />
                    </asp:GridView>
               
                      <asp:SqlDataSource ID="notes_SQL" runat="server"
                        ConnectionString="<%$ ConnectionStrings:ConnString %>"
                        SelectCommand="SELECT NoteId, [ContactId], Note,  ModifiedBy As [UpdatedBy], ModifiedOn As [Date Updated] FROM [tblNotes] where ContactId = @ContactID">
                        <SelectParameters>
                            <asp:ControlParameter Name="ContactID" ControlId="txtContactID" PropertyName="Text"  defaultvalue="5"/>    
                        </SelectParameters>
                    </asp:SqlDataSource>
                  </div>
            </div>

            </div>
        </div>
       
        <div id="col_right">
            <div class="sectionContent">
                <div class="sectionHeading">
                    <h3>My Investment Status</h3>
                </div>
                <div style="width: 95%; height: 200px; overflow-y:scroll; margin:10px auto 0 auto;">
                        <asp:GridView ID="gvMyInvestments" CssClass="gvMyInvestments" runat="server"
                        AllowSorting="True" DataSourceID="MyInvestments_sql"
                        AutoGenerateColumns="true"
                        >

                        <Columns>
                            <asp:CommandField ShowSelectButton="True" Visible="false"/>
                            <asp:ButtonField CommandName="Select" Visible="false" />
                        </Columns>

                        <HeaderStyle BackColor="#EDEEF0"  Font-Bold="True" />
                    </asp:GridView>
               
                      <asp:SqlDataSource ID="MyInvestments_sql" runat="server"
                        ConnectionString="<%$ ConnectionStrings:ConnString %>"
                        SelectCommand="SELECT Name, Investor FROM [viewMyInvestments]">
                       
                    </asp:SqlDataSource>
                  </div>
            </div>

            <div class="sectionContent">
                <div class="sectionHeading">
                    <h3>Active Investments</h3>
                </div>
                <div style="width: 95%; height: 200px; overflow-y:scroll; margin:10px auto 0 auto;">
                        <asp:GridView ID="gvActiveInvestments" CssClass="gvActiveInvestments" runat="server"
                        AllowSorting="True" DataSourceID="ActiveInvestments_sql"
                        AutoGenerateColumns="true"
                        >

                        <Columns>
                            <asp:CommandField ShowSelectButton="True" Visible="false"/>
                            <asp:ButtonField CommandName="Select" Visible="false" />
                        </Columns>

                        <HeaderStyle BackColor="#EDEEF0"  Font-Bold="True" />
                    </asp:GridView>
               
                      <asp:SqlDataSource ID="ActiveInvestments_sql" runat="server"
                        ConnectionString="<%$ ConnectionStrings:ConnString %>"
                        SelectCommand="SELECT Name, Type FROM [viewActiveInvestments]">
                       
                    </asp:SqlDataSource>
                  </div>
            </div>
        </div>
   
</asp:Content>

1
0
Comment
Question by:murbro
  • 3
4 Comments
 
LVL 30

Expert Comment

by:IanTh
Comment Utility
0
 
LVL 30

Expert Comment

by:IanTh
Comment Utility
see

<link href="/Styles/crm.css" rel="stylesheet" type="text/css" media="screen" />

thats will have the div parameters in it
0
 
LVL 30

Accepted Solution

by:
IanTh earned 500 total points
Comment Utility
see the line
<h3 style="float:left">Contacts</h3><span class="label">Search: <input id="contact_search" /></span>
                </div>


try float:right
0
 

Author Closing Comment

by:murbro
Comment Utility
thanks very much for all the help
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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

762 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

6 Experts available now in Live!

Get 1:1 Help Now