MVC 2 View Layout CSS Control Layout

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 paste开发者_如何学God 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>

The examples you posted uses two different HTML elements for structure and the way the content is displayed is different in these examples. First example uses a <div> tag for displaying property name and another one for displaying the value. You can show it in the same line like this:

<div>DocTitle:<%: Model.DocTitle %></div>
<div>DocumentPropertiesID:<%: Model.DocumentPropertiesID %></div>

It's just like the 2nd example. Both the property name and its value is in the same tag. <h2> tag is used for displaying headings. If you get similar layout, CSS may have some rules for displaying texts larger in div. If you can't find rules for those classes, look up rules for div.

Note: It's not a good idea to display content directly in block elements like div. You could place them in a span tag.

Here's a few resources for HTML and CSS:

• Head First HTML with CSS & XHTML
• w3school's html tutorials

It looks like you want something like along these lines

<div>
  <span class = "display-label">Title:</span>
  <span class = "display-field"><%: Model.DocTitle %></span>
</div>
<div>
  <span class = "display-label">Created:</span>
  <span class = "display-field"><%: Model.Created %></span>
</div>
<div>
  <span class = "display-label">Modified:</span>
  <span class = "display-field"><%: Model.Modified %></span>
</div>
<div>
  <span class = "display-label">Author:</span>
  <span class = "display-field"><%: Model.tbl_Author.Name %></span>
</div>
<div>
  <span class = "display-label">Genre:</span>
  <span class = "display-field"><%: Model.tbl_DocumentGenre.GenreName %></span>
</div>

Of course, you'll need to tune the CSS for display-field and display-label. You'll want to remove their block definition if they have one.

In addition, if you don't have time enaugh to take the initial CSS learning step, you may have to be pragmatic and fallback on a <table> in order to simplify the layout tuning.

BTW, the stock Site.css of an ASP.NET MVC app does contain a .display-label definition. Please double-check. If you don't have one, then... simply the corresponding formatting will not be applied (stock display-label is gray text IIRC).