Positioning controls on a content placeholder

[Dragon]

I'm getting nowhere with this after hours of trying. All I am trying to do is to place 4 controls on a web page that uses a master page but I can't get the controls to go where I want them.

 

MASTER PAGE:

<%@ Master Language="VB" CodeFile="Manager.master.vb" Inherits="Manager" %>






FCL Manager pages

 

CSS:

#content
{
clear: both;

width: 800px;

height: 100%;

margin-left: auto;

margin-right: auto;

overflow: hidden;

background: #eee;

}

 

ASPX:

<%@ Page Title="" Language="VB" MasterPageFile="~/Manager.master" AutoEventWireup="false" CodeFile="ManagerStudentsView.aspx.vb" Inherits="ManagerStudentsView" %>



 


      runat="server"
      ForeColor="Blue"
      Text="Filter"         
      style="top: 50px; left: 15px; position: relative; height: 18px; width: 44px;"
      Font-Bold="True" 
      Font-Size="Large">





      runat="server"
      Font-Bold="True" 
      Font-Names="Tahoma"
      Font-Size="Medium"
      ForeColor="Blue"
      Text="Names" 
      style="top: 50px; left: 110px; position: relative; height: 19px; width: 55px;">





      runat="server"
      BackColor="#FFF7E6" 
      BorderColor="Blue"
      BorderStyle="None"
      ForeColor="Blue"         
      style="top: 80px; left: 15px; z-index: 1; position: relative; height: 194px; width: 91px;">
All
Current
Girls
Boys
English
Maths
Class day 1
Class day 2





      runat="server"
      ForeColor="Blue"              
      style="top: 80px; left: 110px; z-index: 1; position: relative; height: 195px; width: 78px;">

 

   

 

Not only do I not get the controls displaying in the correct places but they don't display at all - I just get the code from the aspx file printed out on the page!

 

Please help!

__________________

[falkencreative]

Sounds like you have two potential problems:

 

1) positioning of form elements

2) code from the ASPX file printed on the page

 

1) This will be a matter of adjusting the styling on the individual labels. I would suggest removing the top/left/position values at first, making sure that the inputs show up correctly, and then adjust the placement with CSS.

 

2) Are you sure that your server can run ASPX files? (are you running the right version of ASP.NET too?)

 

I'm not seeing any connection between your master page and your ASPX file either... usually would expect that it would also include a body/form/asp:contentplaceholder tags, something like this:

 

 

 

[Dragon]

Thanks for the rapid response - much appreciated!

 

I'm pretty new to all of this (bet you didn't realise that!) so please excuse some of my ignorance.

 

First of all, no, there's no problem with my server and in fact I'm testing this page locally (via Visual Web Developer 2008 so I'm using the latest version of asp.net).

 

The aspx file is linked to the master page in its first line - MasterPageFile="~/Manager.master" so I don'e think the problem lies there.

 

There is no

[falkencreative]

Sorry, to clarify, I would expect to see the body/form/etc tags in your master page, but according to your code sample, the master page only includes

information. Perhaps you just didn't include the whole file in your code sample though.

 

You may also want to remove "overflow: hidden;" from the #content CSS, in case your positioning of your input elements are placing them outside the div, and that isn't why they are showing up.

[Dragon]

Yes, sorry, the code from the master page was just a fragment.

 

I've made some progress (but haven't removed the position properties yet) by altering the syntax of my aspx file (I had several >s in the wrong place!). The code isn't now displaying on the page (good!) and the controls now are (but unfortunately not where I want them to be yet!).

 

I'll experiment with your suggestions and report back.

 

Thanks!

[Dragon]

OK, here's my aspx now:

 

<%@ Page Title="" Language="VB" MasterPageFile="~/Manager.master" AutoEventWireup="false" CodeFile="ManagerStudentsView.aspx.vb" Inherits="ManagerStudentsView" %>



 


      Text="Filter">        





      Text="Names">






All
Current
Girls
Boys
English
Maths
Class day 1
Class day 2







 

   

 

and my css :

 

#content
{
   clear : both;
   width : 800px;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   background: #eee;
}

#lblFilter
{
   color: #0000FF;
   top: 50px;
   left: 15px;
   position: relative;
   height: 18px;
   width: 44px;
   font-weight: bold;
   font-size: large;
}

#lblStudentNames
{
   font-weight: bold;
   font-family: Tahoma;
   font-size: large;
   color: #0000FF;
   position: relative;
   top: 50px;
   left: 110px;
   height: 19px;
   width: 55px;
}     

#rblstStudents
{
   background-color: ##FFF7E6;
   border-style: none;
   color: #0000FF;
   top: 80px;
   left: 15px;
   position: relative;
   height: 194px;
   width: 91px;
}

#lstStudentNames
{
   color: #0000FF;
   top: 80px;
   left: 110px;
   position: relative;
   height: 195px;
   width: 78px;
}

 

The controls are all showing now but they are all left justified and they are stacked above each other. Also none of the styles from the css are being applied - I'm obviously not referencing the controls properly in the css.

[falkencreative]

the ID value (for example, ID="rblstStudents") I believe refers to something that ASP.NET uses, not the HTML ID. You should be able to correctly target the element using CSS if you give it a CSS class (I think it is ' CssClass="classname" ' but you'll need to double check) and then modifying your CSS to match.

[Dragon]

That worked a treat - using .lblFilter instead of #content.lblFilter connected the aspx to the css - thank you!

 

And you were right - CssClass="classname" is what I needed in the aspx instead of ID=

 

The controls are now very roughly in the right position but a long way from being right. I'll try absolute positioning.

[Dragon]

Getting there!

 

The controls are now perfectly placed in relation to each other but they are all outside the content div (to the left of it).

[falkencreative]

Post the latest version of the CSS?

[Dragon]

#content
{
   clear : both;
   width : 800px;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   background: #eee;
}

.lblFilter
{
   color: #0000FF;
   top: 50px;
   left: 15px;
   position: absolute;
   height: 18px;
   width: 44px;
   font-weight: bold;
   font-size: large;
}

.lblStudentNames
{
   font-weight: bold;
   font-family: Tahoma;
   font-size: large;
   color: #0000FF;
   position: absolute;
   top: 50px;
   left: 110px;
   height: 19px;
   width: 55px;
}     

.rblstStudents
{
   background-color: ##FFF7E6;
   border-style: none;
   color: #0000FF;
   top: 80px;
   left: 15px;
   position: absolute;
   height: 194px;
   width: 91px;
}

.lstStudentNames
{
   color: #0000FF;
   top: 80px;
   left: 110px;
   position: absolute;
   height: 195px;
   width: 78px;
}

[Dragon]

OK, my latest code has changed a little but with no resulting improvement in the display it creates. The 4 controls are in roughly their correct positions but not exactly right. Can someone please show me how to line up the pair of controls to the right with the other pair to the left?

 

The page is at http://www.firstclasslearning.net - username is 'forum', password is 'password'. Click on Students/View.

 

CSS:

#content
{
   margin-left: auto;
   margin-right: auto;
   width: 900px;
   height: 100%;            
   background: #FFFFFF;
}

#lblFilter
{       
   position:relative;
   top: 50px;
   left: 15px;        
}

#lblStudentNames
{       
   position:relative;
   top: 50px;
   left: 110px;        
}     

#rblstStudents
{    
   position:relative;
   top: 80px;
   left: 15px;            
}

#lstStudentNames
{    
   position:relative;
   top: 80px;
   left: 110px;    
   height: 195px;
   width: 78px;
   color: #0000FF;
}

 

ASPX:

<%@ Page Title="" Language="VB" MasterPageFile="~/Manager.master" AutoEventWireup="false" CodeFile="ManagerStudentsView.aspx.vb" Inherits="ManagerStudentsView" %>



 


         Text="Filter"       
         Height= 18px
         Width= 44px
         Font-Bold="True"
         ForeColor="Blue"
         Font-Size="Large">        





         Text="Names"
         Height= 19px
         Width= 55px
         Font-Bold="True"
         ForeColor="Blue"
         Font-Size="Large">





         style="Height: 194px
         Width: 91px
         background-color: ##FFF7E6
         border-style: none
         color: #0000FF">          
All
Current
Girls
Boys
English
Maths
Class day 1
Class day 2