MVC 2 View Layout CSS Control Layout
- by Cory Mathewson
I'm new to a lot of what I'm trying to do with the development of a new MVC2 web application so this is a beginner question.
I need to understand my options for control and content layout on a web page. I’m using MVC2 so I’m using Controllers, Views, ViewModels, and View Templates.
What I need to spin up on…fast…is control the granular layout of controls and content on any particular view.
Below I’ve pasted two examples of auto generated templates that illustrate my challenge. I see that layout is controlled by CSS in my Site.css document. In the first example I get a sequential flow of DisplayLabel and DisplayField. I prefer the adjacent layout of DisplayLabel on the same line as DisplayField produced from example 2. However, example 2 is too simple because the formatting is applied to the Label and the Field.
I think the correct way to tackle this learning curve is Microsoft Expression but I don’t have personal bandwidth at the moment to tackle Expression.
Can anyone point me to a resource that will expose me to lots of examples for CSS formatting? I have lots of syntax questions. For instance, I believe is referencing the Site.css but I can’t find a "display-label" section in Site.css.
Example 1
<fieldset>
<legend>Fields</legend>
<div class="display-label">DocTitle</div>
<div class="display-field"><%: Model.DocTitle %></div>
<div class="display-label">DocoumentPropertiesID</div>
<div class="display-field"><%: Model.DocumentPropertiesID %></div>
Example 2
<h2>Title: <%: Model.DocTitle %></h2>
<h2>Created: <%: Model.Created %></h2>
<h2>Modified: <%: Model.Modified %></h2>
<h2>Author: <%: Model.tbl_Author.Name %></h2>
<h2>Genre: <%: Model.tbl_DocumentGenre.GenreName %></h2>
