Take the 2-minute tour ×

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

<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>
share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

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:

share|improve this answer
Thanks for the resources. I did end up at w3school's yesterday. I also went to Barnes & Noble to kick start my brain. –  Cory Mathewson Dec 31 '10 at 15:49
add comment

It looks like you want something like along these lines

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

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).

share|improve this answer
Thanks for the response. You're spot on from where I ended up after reading and poking about. As Ufuk pointed out above I had to recognize I was using the wrong tags. What I ended up with looks almost exactly like your example. VS 2010 has a great CSS tool. When you are view the Site.css page there is a tool bar for creating CSS code such as Styles and Style Rules. With this tool you can quickly code Elements and Classes in the site CSS. There is more to the tool but my brain is smoking. –  Cory Mathewson Dec 31 '10 at 15:56
add comment

Your Answer


