CSS PageLayout and web server controls

Hello,

is there a particular way on how to position web server controls that reside within a <DIV> tag.  The ultimate goal is to have the page look something like this:

      ____________
      |   Banner      |
      |                |
      ____________
      | Navigatioin      |
      |                |
      ____________
      | Content      |
      |                |
      |___________|
      

with the following Div Tags: Banner, Navigation, Content

my CSS file would look something like this:

#banner
{
      background-color:Gray;
      border-bottom: 1px solid #333;
      /*position: relative;*/
}

#nav
{
      height: 80px;
      background-color: white;
      width: 100%;
      margin-left: 0px;
      padding-top: 0em;
      position: relative;
}

#content
{
      padding-top: 0em;
      margin-bottom: 0;
      margin-top: 0 0em 0 0px;
      margin: 0 0em 0 0px;
      background-color: Gray;
      position: relative;
      margin-bottom: 0px;
      margin-left: 5px;
}

the difficulty for me is how to position my web server controls correctly within the content tag.  right now, my web server controls are all over the place and many are not even within the "Content" div tag.  

thanks in advance...
LVL 7
brdrokAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

brdrokAuthor Commented:
thanks for looking out for me....but not sure whether this is a pure CSS thing or an ASP.Net issue.  The difficulty is that I would have web server controls like those:

<DIV id="container">
<DIV id="content">
   <ASP:DROPDOWNLIST id=ddlCostCenter style="LEFT: 400px; POSITION: relative; TOP: 10px" runat="server"    autopostback="True" height="16px" width="256px"/>
</DIV>
</DIV>

and yet somehow the dropwdownlist falls outside the <DIV> tag with the id of "content".  If you feel like this still belongs in the CSS section, I humbly accept your suggestion <smile>

raterusCommented:
It all boils down to HTML w/ CSS at some point or another, so I think the answer given here will be better since these experts deal with it on a regular basis.  I'm going to post a pointer question for you back in ASP.net just to make sure all avenue's are explored.

--Michael
martie_11Commented:
Hi brdrok,

Can you post the HTML source...thanks.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

brdrokAuthor Commented:


<BODY onkeydown="return CheckKey()" text=blue bgcolor=#cccc99 ms_positioning="GridLayout">
<FORM id=frmAddOrders method=post runat="server">
<DIV id="container">

<DIV id=banner align=center>
      <H1><STRONG>Survey Work Order Log</STRONG></H1>
</DIV>


<DIV id="nav">
      <DIV style="LEFT: 20px; WIDTH: 100px; POSITION: absolute; TOP: 0px">Navigation</DIV>
      <ASP:HYPERLINK id=hyAddOrder style="FONT-SIZE: 11px; LEFT: 40px; POSITION: absolute; TOP: 20px" runat="server" navigateurl="AddOrders.aspx">Add New Order</ASP:HYPERLINK>
      <ASP:HYPERLINK id=hyCrewScheduler style="FONT-SIZE: 11px; LEFT: 40px; POSITION: absolute; TOP: 35px" runat="server" navigateurl="Administrative/AssignCrewChief.aspx">Crew Scheduler</ASP:HYPERLINK>
      <ASP:HYPERLINK id=hyCompleOrders style="FONT-SIZE: 11px; LEFT: 40px; POSITION: absolute; TOP: 50px" runat="server" navigateurl="Administrative/CompletedAssignments.aspx">Complete Orders</ASP:HYPERLINK>
      <DIV style="LEFT: 300px; WIDTH: 100px; POSITION: absolute; TOP: 0px">Report</DIV>
      <ASP:HYPERLINK id=hyBasic style="FONT-SIZE: 11px; LEFT: 320px; POSITION: absolute; TOP: 20px" runat="server" navigateurl="Reports/BasicReport.aspx">Basic Report</ASP:HYPERLINK>
      <ASP:HYPERLINK id=hyFieldSchedule style="FONT-SIZE: 11px; LEFT: 320px; POSITION: absolute; TOP: 35px" runat="server" navigateurl="Reports/SurveyReport.aspx">Field Schedule</ASP:HYPERLINK>
      <DIV style="LEFT: 600px; POSITION: absolute; TOP: 0px">Administrative Functions</DIV>
      <ASP:HYPERLINK id=hyAddUser style="FONT-SIZE: 11px; LEFT: 620px; POSITION: absolute; TOP: 20px" runat="server" navigateurl="Administrative/Users.aspx">Add User</ASP:HYPERLINK>

</DIV>

<DIV id="content">
      <DIV style="Z-INDEX: 140; LEFT: 300px; WIDTH: 80px; POSITION: relative; TOP: 10px; HEIGHT: 24px; TEXT-ALIGN: right" align=right>CostCenter:</DIV>
      <ASP:DROPDOWNLIST id=ddlCostCenter style="LEFT: 400px; POSITION: relative; TOP: 10px" runat="server" autopostback="True" height="16px" width="256px"/>
      <DIV style="Z-INDEX: 115; LEFT: 10px; POSITION: relative; TOP: 40px">TBI Projects* </DIV>
      <ASP:DROPDOWNLIST id=ddlProject style="Z-INDEX: 102; LEFT: 150px; POSITION: absolute; TOP: 40px" runat="server" autopostback="True" height="24px" width="256px"/>
      <DIV style="Z-INDEX: 101; LEFT: 450px; POSITION: absolute; TOP: 40px">TBI Project Number: </DIV>
      <ASP:DROPDOWNLIST id=ddlProjectNum style="Z-INDEX: 114; LEFT: 600px; POSITION: absolute; TOP: 40px" runat="server" autopostback="True" height="24px" width="76px"/>
      <DIV style="Z-INDEX: 116; LEFT: 10px; POSITION: absolute; TOP: 70px"><P>ESE Contract/Lot:*</P></DIV>
      <ASP:TEXTBOX id=txtESEContract onblur="return BuildAdvCode(this)" style="Z-INDEX: 104; LEFT: 150px; POSITION: absolute; TOP: 70px" tabindex=1 runat="server" height="20px" width="56px" maxlength="5"/>
      <ASP:TEXTBOX id=txtDueOn style="Z-INDEX: 105; LEFT: 288px; POSITION: absolute; TOP: 70px" runat="server" height="20px" width="80px"></ASP:TEXTBOX>
      <DIV style="Z-INDEX: 118; LEFT: 10px; POSITION: absolute; TOP: 100px">Contract Type:* </DIV><ASP:DROPDOWNLIST id=ddlContractType style="Z-INDEX: 103; LEFT: 150px; POSITION: absolute; TOP: 100px" tabindex=3 runat="server" autopostback="True" height="24px" width="256px"></ASP:DROPDOWNLIST>
      <DIV style="Z-INDEX: 119; LEFT: 10px; POSITION: absolute; TOP: 130px">Task:* </DIV><ASP:DROPDOWNLIST id=ddlTask style="Z-INDEX: 106; LEFT: 150px; POSITION: absolute; TOP: 130px" tabindex=4 runat="server" autopostback="True" height="24px" width="256px"></ASP:DROPDOWNLIST>
      <DIV style="Z-INDEX: 120; LEFT: 10px; POSITION: absolute; TOP: 160px">Ordered By: </DIV>
      <ASP:TEXTBOX id=txtClient style="Z-INDEX: 107; LEFT: 150px; POSITION: absolute; TOP: 160px" tabindex=5 runat="server" width="256px"></ASP:TEXTBOX>
      <DIV style="Z-INDEX: 121; LEFT: 425px; POSITION: absolute; TOP: 70px">Phase No: </DIV>
      <ASP:TEXTBOX id=txtPhaseNo onblur="return PhaseNoFormatter(this)" style="Z-INDEX: 109; LEFT: 600px; POSITION: absolute; TOP: 70px" tabindex=6 runat="server" height="20px" width="68px" maxlength="4"></ASP:TEXTBOX>
      <DIV style="Z-INDEX: 122; LEFT: 425px; POSITION: absolute; TOP: 100px"><P>Section No:</P></DIV>
      <ASP:TEXTBOX id=txtSectNo style="Z-INDEX: 108; LEFT: 600px; POSITION: absolute; TOP: 100px" tabindex=7 runat="server" height="20px" width="68px" maxlength="4"/>
      <ASP:BUTTON id=btnReset style="Z-INDEX: 112; LEFT: 10px; POSITION: absolute; TOP: 190px" tabindex=12 runat="server" height="24px" width="152px" text="Reset Form" enableviewstate="False" cssclass="formatButton"/>
      <DIV style="Z-INDEX: 153; LEFT: 215px; WIDTH: 90px; POSITION: absolute; TOP: 70px">Due On:* </DIV>
      <ASP:BUTTON id=btnCalendar style="Z-INDEX: 152; LEFT: 380px; POSITION: absolute; TOP: 70px" tabindex=2 runat="server" height="20px" width="24px" text="..." enableviewstate="False"/>
      <DIV style="Z-INDEX: 117; LEFT: 425px; WIDTH: 24px; POSITION: absolute; TOP: 40px">or </DIV>
      
      <DIV style="DISPLAY: inline; Z-INDEX: 139; LEFT: 425px; WIDTH: 48px; POSITION: absolute; TOP: 130px; HEIGHT: 2px">TBI #:</DIV>
      <DIV style="DISPLAY: inline; Z-INDEX: 140; LEFT: 480px; WIDTH: 64px; POSITION: absolute; TOP: 130px; HEIGHT: 2px">Category Code:</DIV>
      <DIV style="DISPLAY: inline; Z-INDEX: 141; LEFT: 550px; WIDTH: 72px; POSITION: absolute; TOP: 130px; HEIGHT: 2px">Phase/Lot:</DIV>
      <DIV style="DISPLAY: inline; Z-INDEX: 142; LEFT: 620px; WIDTH: 64px; POSITION: absolute; TOP: 130px; HEIGHT: 2px">Object Code:</DIV>
      <DIV style="DISPLAY: inline; Z-INDEX: 143; LEFT: 690px; WIDTH: 72px; POSITION: absolute; TOP: 130px; HEIGHT: 2px">TBI&nbsp; Cost Code:</DIV>
      
      <ASP:TEXTBOX id=txtProjectCode style="Z-INDEX: 144; LEFT: 425px; POSITION: absolute; TOP: 160px" runat="server" height="24px" width="40px" backcolor="#CCCC99" readonly="True"/>
      <ASP:DROPDOWNLIST id=ddlCategoryCode style="Z-INDEX: 145; LEFT: 480px; POSITION: absolute; TOP: 160px" runat="server" autopostback="True" height="2px" width="64px" backcolor="#CCCC99" enabled="False"/>
      <ASP:TEXTBOX id=txtPhaseLot style="Z-INDEX: 146; LEFT: 550px; POSITION: absolute; TOP: 160px" runat="server" height="24px" width="64px" maxlength="5" backcolor="#CCCC99" readonly="True"/>
      <ASP:DROPDOWNLIST id=ddlObjectCode style="Z-INDEX: 147; LEFT: 620px; POSITION: absolute; TOP: 160px" runat="server" height="2px" width="64px" backcolor="#CCCC99" enabled="False"/>
      <ASP:TEXTBOX id=txtTBICostCode style="Z-INDEX: 148; LEFT: 690px; POSITION: absolute; TOP: 160px" runat="server" height="24px" width="72px" backcolor="#CCCC99" readonly="True"/>
      
      <ASP:CHECKBOX id=chk1 style="Z-INDEX: 149; LEFT: 422px; POSITION: absolute; TOP: 185px" runat="server" autopostback="True" height="2px" width="40px"/>
      <DIV style="Z-INDEX: 150; LEFT: 453px; WIDTH: 152px; POSITION: absolute; TOP: 185px; HEIGHT: 2px">Cost Code Override: </DIV>
      <DIV style="Z-INDEX: 124; LEFT: 425px; POSITION: absolute; TOP: 210px">Description: </DIV>
      <ASP:TEXTBOX id=txtDescription style="Z-INDEX: 151; LEFT: 425px; POSITION: absolute; TOP: 235px" tabindex=10 runat="server" height="56px" width="392px" textmode="MultiLine" rows="4"/>
      <ASP:BUTTON id=btnAdd style="Z-INDEX: 137; LEFT: 425px; POSITION: absolute; TOP: 300px" runat="server" width="128px" text="Add New Order" cssclass="formatButton"/>
</DIV>

</DIV>


here is the HTML part....if you need anyting else...please let me know.  

thanks

brdrokAuthor Commented:
the part that really is giving me fits is the <DIV id="content"> tag.  as previously mentioned....my web server controls seem to fall outside of that particular tag.  
martie_11Commented:
so as in the HTML source you posted, it should be inside the content div, and yet, it is outside (i.e. above or below the content div).  Is that right?

What kind of page layout are you using?  GridLayout or FlowLayout?  From all those individual div tags, I'm guessing it's FlowLayout?

Thanks.
martie_11Commented:
What happens when you use GridLayout?
GoofyDawgCommented:
Your problem is in the absolute positioning of your controls. You may declare the sub-divs within the container divs, but because you're positioning them absolutely, they end up all over the place. For starters, remove the styles from the web controls, except for sizing as you need them. That means removing all your left, top and position:absolute styles. Don't set specific heights for your containers, let the elements stretch them vertically as needed. What you should then end up with is just a vertical arrangement of all your controls on the page.

Next, give your page a strict doctype so you even out the playing field among the browsers:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Finally, it's hard to tell from your code what layout you'd like to achieve within your containers, so can you possibly post a comp of some sort that gives us an idea of what type of element layout you wish to achieve? That would be marvelous, and go along way in helping you solve this problem.

GoofyDawg
GoofyDawgCommented:
After looking through your code much more closely, why aren't you just using a table for your form? In this case, a table is semantically correct because you have a relationship between columns and rows. Furthermore, since you're trying to achieve pixel-precision and alignment, a table makes much more sense than trying to do this with a bunch of divs and setting properties to get things to line up. You end up with writing a lot of CSS - as you've done. In a grid arrangement such as this, the table's the best element to use; plus, in the long run, it'll save you a lot of time.

Your banner and nav are a different story - we can easily use CSS to lay them out.

GoofyDawg
martie_11Commented:
I think the problem is exactly what GoofyDawg is getting at...brdrok is probably using the 'FlowLayout' as opposed to 'GridLayout'.

With GridLayout, you can use a placeholder (i.e. a table as GoofyDawg suggested) for your diffent sections.  
COBOLdinosaurCommented:
You will greatly simplify things if you do not use in line styles.  Put all the styles in the head or an external stylesheet using id or class selectors. That is a start on seperating presentation from content and that is a primary objective with CSS.

I  think GoofyDawg can carry you through this.  Don't get frustrated about the web control not positioning the way you want them. You will get there it is all part of the learning curve.

You can help the experts trying to help you by posting the client side version of the HTML ... what you get when you do a view source on th page.  What you posted is the generation code from the server and it make it more difficult to see the raw HTML that the browser gets.  It also makes it more difficult for experts who do not work with ASP to help you.  

As an alternative you could post a link to the page for the experts.

Cd&
brdrokAuthor Commented:
sorry for responding so late:  power outage due to rain...

@Marty:
so as in the HTML source you posted, it should be inside the content div, and yet, it is outside (i.e. above or below the content div).  Is that right?   Yes..that's correct

What kind of page layout are you using?  GridLayout or FlowLayout?  From all those individual div tags, I'm guessing it's FlowLayout?  I am using GridLayout.

I did as GoofyDawg suggested, I removed the in-line styles of my controls, commented out the height for my navigation div, replaced the docType statement.

In my navigation div, I end up with something like the following:

----------------------------------------
|  Navigation                               |
|  link1 link2 link3                        |
|  Report                                     |
|  link4 link5                                |
| etc....                                      |
-----------------------------------------

I think this is exactly what goofyDawg predicted.

Is there any way to have the navigational div look something like the followng

---------------------------------------------------------------------------------
| Navigation                         Report                        Admin Function   |
|    link1                                 link2                           link3                |
|    link4                                 link5                           link6                |
----------------------------------------------------------------------------------

unfortunately I do not have link that I could demonstrate this page to since it's an intranet application.

below is the html generated on the client.  hopefully it will provide some clues or ideas

<DIV id="nav">
      <DIV>Navigation</DIV>
      <a id="hyAddOrder" href="AddOrders.aspx">Add New Order</a>
      <a id="hyCrewScheduler" href="Administrative/AssignCrewChief.aspx">Crew Scheduler</a>
      <a id="hyCompleOrders" href="Administrative/CompletedAssignments.aspx">Complete Orders</a>
      <DIV >Report</DIV>
      <a id="hyBasic" href="Reports/BasicReport.aspx">Basic Report</a>
      <a id="hyFieldSchedule" href="Reports/SurveyReport.aspx">Field Schedule</a>
      <DIV>Administrative Functions</DIV>
      <a id="hyAddUser" href="Administrative/Users.aspx">Add User</a>
      <a id="hyAddTask" href="Administrative/AddTask.aspx">Add Task</a>
      <a id="Hyperlink1" href="Administrative/AssignCrewChief.aspx">Add Crew Chief to Cost Center</a>
      <a id="hyLogoff" href="LogIn.aspx">Log off</a>
</DIV>

truly wish i could upload a six pack of beer for all the effort..



martie_11Commented:
try:

<DIV id="nav">
      <table>
           <tr>
                <td>
                         <DIV>Navigation</DIV>
                         <a id="hyAddOrder" href="AddOrders.aspx">Add New Order</a><br>
                         <a id="hyCrewScheduler" href="Administrative/AssignCrewChief.aspx">Crew Scheduler</a><br>
                         <a id="hyCompleOrders" href="Administrative/CompletedAssignments.aspx">Complete Orders</a>
                </td>
                <td>
                         <DIV >Report</DIV>
                         <a id="hyBasic" href="Reports/BasicReport.aspx">Basic Report</a><br>
                         <a id="hyFieldSchedule" href="Reports/SurveyReport.aspx">Field Schedule</a><br>
                </td>
                <td>
                         <DIV>Administrative Functions</DIV>
                         <a id="hyAddUser" href="Administrative/Users.aspx">Add User</a><br>
                         <a id="hyAddTask" href="Administrative/AddTask.aspx">Add Task</a><br>
                         <a id="Hyperlink1" href="Administrative/AssignCrewChief.aspx">Add Crew Chief to Cost Center</a><br>
                         <a id="hyLogoff" href="LogIn.aspx">Log off</a>
                </td>
            </tr>
      </table>
</DIV>

...hope that helps.
brdrokAuthor Commented:
thanks...

I am almost there i think.  there is one issue i can't figure out.

1.) <DIV >Report</DIV> is placed maybe 5px or so below Navigation and Administrative Functions.  Also the Log Off hyperlink is about 15-20px below the top.

it kinda looks like this:

Navigation                     Administrative Functions
                Reports
                                                                            Log off

here is my slightly modified version:
<DIV id="nav">
      <TABLE width="100%">
           <TR width="100%">
                <TD width="25%">
                    <DIV style="background-color: green">Navigation</DIV>
                    <A id="hyAddOrder" href="AddOrders.aspx">Add New Order</A><BR>
                    <A id="hyCrewScheduler" href="Administrative/AssignCrewChief.aspx">Crew Scheduler</A><BR>
                    <A id="hyCompleOrders" href="Administrative/CompletedAssignments.aspx">Complete Orders</A>
                </TD>
                <TD width="25%">
                    <DIV style="background-color: orange" >Report</DIV>
                    <A id="hyBasic" href="Reports/BasicReport.aspx">Basic Report</A><BR>
                    <A id="hyFieldSchedule" href="Reports/SurveyReport.aspx">Field Schedule</A><BR>
                </TD>
                <TD width="25%">
                    <DIV style="background-color: yellow">Administrative Functions</DIV>
                    <A id="hyAddUser" href="Administrative/Users.aspx">Add User</A><BR>
                    <A id="hyAddTask" href="Administrative/AddTask.aspx">Add Task</A><BR>
                    <A id="Hyperlink1" href="Administrative/AssignCrewChief.aspx">Add Crew Chief to Cost Center</A><BR>
                </TD>
                <TD width="25%" align=right>
                  <DIV style="background-color: yellow"><A id="hyLogoff" href="LogIn.aspx">Log off</A></DIV>
                </TD>
            </TR>
      </TABLE>
</DIV>
brdrokAuthor Commented:
but other than, i think it looks great, even after re-sizing the window.

below is the CSS for the nav div tag

#nav
{
      /*height: 80px;*/
      background-color: white;
      /*width: 100%;*/
      margin-left: 0px;
      padding-top: 0em;
      position: relative;
}
martie_11Commented:
Add valign="top" to all the columns!

<DIV id="nav">
      <TABLE width="100%">
           <TR width="100%">
                <TD width="25%" valign="top">
                    <DIV style="background-color: green">Navigation</DIV>
                    <A id="hyAddOrder" href="AddOrders.aspx">Add New Order</A><BR>
                    <A id="hyCrewScheduler" href="Administrative/AssignCrewChief.aspx">Crew Scheduler</A><BR>
                    <A id="hyCompleOrders" href="Administrative/CompletedAssignments.aspx">Complete Orders</A>
                </TD>
                <TD width="25%" valign="top">
                    <DIV style="background-color: orange" >Report</DIV>
                    <A id="hyBasic" href="Reports/BasicReport.aspx">Basic Report</A><BR>
                    <A id="hyFieldSchedule" href="Reports/SurveyReport.aspx">Field Schedule</A><BR>
                </TD>
                <TD width="25%" valign="top">
                    <DIV style="background-color: yellow">Administrative Functions</DIV>
                    <A id="hyAddUser" href="Administrative/Users.aspx">Add User</A><BR>
                    <A id="hyAddTask" href="Administrative/AddTask.aspx">Add Task</A><BR>
                    <A id="Hyperlink1" href="Administrative/AssignCrewChief.aspx">Add Crew Chief to Cost Center</A><BR>
                </TD>
                <TD width="25%" align=right valign="top">
               <DIV style="background-color: yellow"><A id="hyLogoff" href="LogIn.aspx">Log off</A></DIV>
                </TD>
            </TR>
      </TABLE>
</DIV>

Should be good now! : )

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brdrokAuthor Commented:
thanks guys....

i always did wonder what this valign was suppose to do =)  i think i will follow goofyDawg suggestion and will implement some sort of a table based layout for the content div tag as well.  Hmm....after reading all the different articles on page layouts using no tables but using CSS somehow does't seem to really apply to web pages that contain tons of web server controls (asp.net controls).

would love to hear your thoughts....

at this, i will close out this question....and thanks a bunch for all the help and information.


martie_11Commented:
Well, I think CSS is the way to go...however I guess things can get a bit trickey w/ server controls.

Check out:  http://www.csszengarden.com/

It doesn't touch on server controls, but it's a great site.  They also have a book:  "The Zen of CSS design"

Great book...

Regards.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.