CoverStory
LANGUAGES: C#
ASP.NET VERSIONS: 2.0
Master of Your Domain
ASP.NET Master Page Layout with CSS
By Spike Xavier
I have to warn you that this article might change the way you approach creating sites in ASP.NET 2.0 because it will focus on creating a master page layout using pure CSS as opposed to traditional HTML tables. Everything will be done with Visual Web Developer 2005 Express Edition. Once you master the step-by-step process presented here, you can, of course, adapt the methods to your own Web applications.
Using CSS for Layout
Memo to reader: I am not a CSS freak. Tables are not evil. Sometimes they re the best choice for speed and consistency in the current state of browser variance. However, I am passionate about CSS and I do believe that many times developers choose tables because they are uncomfortable with CSS. Besides, I think you ll agree that CSS is easy to learn and use once you re familiar with some of the different techniques presented here.
We are going to create a page that has a common layout for many Web sites. It will contain header, footer, content, and navigation sections. Figure 1 shows a screenshot of the finished design.
Figure 1: Create a page with a
common layout that includes header, footer, content, and navigation sections.
The page shown in Figure 1 will be created using five steps:
1) Generate the raw HTML.
2) Divide the HTML into semantic divisions.
3) Use a style sheet to set our presentation.
4) Extrapolate the page into a master page.
5) Extrapolate the style sheet into a theme.
If you can t quickly hand code a page in notepad that will validate through the W3C free validation service (http://validator.w3.org), you might want to spend a little time becoming familiar with HTML. It is the language of the browser and it is important to speak the language. There are a couple of things to keep in mind when working with the current version of the language, which is XHTML 1.0. XHTML is actually XML, so it follows XML rules:
- All tags must be in lowercase.
- All tags must have a closing tag.
- All attributes must be enclosed in quotes.
By the way, browsers are very forgiving, and they will most likely render your HTML even if you don t follow these guidelines. The IDE will probably scream at you though, and future browsers might get a bit pickier which could eventually bite you.
All tags must be in lowercase. You might have coded a paragraph tag like this in the past:
.
In XHTML, it looks like this: . In other words, lowercase.
All tags must have
a closing tag. Some tags, like
or
, have no actual content between the opening and closing tag. These are self-closing tags, but a self-closing tag is in and of itself an opening and closing tag, so these tags are valid. Gone are the lazy days of simply having an opening tag; for example, a
must end with a < /p>.
Attributes must be
enclosed in quotes. Single quotes ( ) or double quotes ( ), it s really
your choice (I usually use double quotes). The IDE will use double quotes. One
self-closing tag that has attributes is the or image tag; it
looks like this:
image of a bike />
As I said earlier, the browsers are still forgiving but the IDE will try to get you to follow these guidelines.
Here s a quick trick to have Visual Web Developer Express set your attributes in quotes for you when coding your HTML. Go to Tools | Options | Select Format and check the box that says Insert attribute value quotes when typing (see Figure 2). Now for the fun part.
Figure 2: Go to Tools | Options | Select
Format and check the box that says Insert attribute value quotes when typing.
Step One Generate the Raw HTML
In this step we ll lay out our HTML in a regular ASP.NET Web form, which we ll eventually turn into a master page. We re going to use a two-column layout with a header and footer. This is a common layout for many Web sites. We ll use the left column to hold our navigation and the right column for our content.
Fire up Visual Web Developer Express and start a new Web site (File | NewWebsite). Add this code between the opening and closing
Header
Navigation
Content
Footer
Figure 3 shows the XHTML code.
Figure 3: Add this code between the
opening and closing
Notice the order of the HTML. One benefit of taking this approach is that the page will degrade gracefully. In other words, in the event of a lack of CSS support, the page is still readable and functional with only the HTML. At this point there obviously is no layout or presentation in the HTML we ll get to that shortly.
Step Two Divide the HTML into Semantic Divisions
Now we are going to divide the HTML into meaningful, or semantic, divisions. This is a simple step where we surround each of the sections with a div tag. We give each of the divs an id, which has a descriptive name. We ll name our ids header, navigation, content, and footer. We use id as opposed to class because we are using each of these divisions only once per page. Notice that we don t use words like top part or left column. This is because we are creating a flexible design; with one simple word change here and there in our style sheets, we can completely redesign and redeploy our page with a new layout. I recommend you always comment the end of your div tags. Often when you are creating sites you ll end up with situations where there are many divs; this helps clarify exactly where you are in your page to avoid improper nesting of tags.
Inside the first
Go to the closing
Surround the
Navigation
section with a . Surround yourContent
with a . Insert an innercontent div within your content div and comment the end of the div. Your content div will look like this:
Content
We do this so we can use the margin property as opposed to the padding property to push our content away from the inner edges of the content div. I like to do this because some of the browsers are inconsistent in their use of the padding property, and this practice helps minimize the need to create separate declarations for different browsers.
Surround your
Footer
with a . Your XHTML should now look like Figure 4.
Figure 4: Surround your
Footer
with a .
If you view the page in the browser at this point you ll notice there is no difference between this and the last steps. This is because we haven t applied any styles to our page yet.
Step Three Use a Style Sheet to Set Our Presentation
At this point you need to add a style sheet to your project. To do this, simply right-click on the root of your project in Solution Explorer and choose Add New Item. From the Template window choose Style Sheet. You don t have to rename it, but I ll go ahead and name this main.css; if you re following along, you might want to do that at this point.
The IDE will open your style sheet and even put in your first tag for you to help get you going. We re going to start our style sheet by adding the sections we are going to style. You do this by adding the sections for each of the ids you created previously. You need to add sections for: #wrapper, #header, #navigation, #content, #innercontent, and #footer. Your style sheet should now look like Figure 5.
Figure 5: Your style sheet should
look like this.
At this point you need to style each of the sections. I suggest using one of the many tools available at this point and choosing a color scheme. By sticking to a color scheme that applies proper color theory (the tools do this for you, by the way), your sites will have a much better visual appeal. For this site we ll be using the following colors: #6096bf, #647d8f, #596f80, and #cfdce6. In other words, wherever I need to set a color, I ll choose one of these.
Insert within the opening and closing curly braces in the body section of the document the following declarations:
background-color: #6096bf;
color: #cfdce6;
margin: 0px;
font-family: Arial, Helvetica, Sans-Serif;
font-size: medium;
Notice the multiple font declarations. This is good practice as it allows the browser to go through your list in order; it will display the first font in your list, which is installed on the displaying device. The last font choice is simply sans-serif, which is just in case one of the previous fonts is not installed (at least the machine will display a font that is in the same family). We set the margin at 0px so the content of our page will go to each of the edges of our browser window.
Next, insert within the opening and closing curly braces of the wrapper section the following declarations:
background-color: #647d8f;
width: 700px;
margin: 0px auto 0px auto;
This time we re setting the margins separately for each of the four sides of the section. The declarations go top, right, bottom, left (just like a clock).
The auto property will always center our page within the browser window. For this to work properly, you must have the XHTML 1.0 DTD and you must set a width on this section. Luckily, Visual Web Developer Express inserts by default at the top of every page the following tag:
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
As hard as I ve tried, I never did quite memorize this entire tag. In any case, once you get in the habit of setting the left and right margins to auto, you ll begin to notice all the sites on the Web where this isn t done.
Next, insert into the header section these declarations:
background-color: #596f80;
color:#cfdce6;
letter-spacing: 2px;
height:60px;
text-align:center;
Because this is the header, and we ll be using an
tag, we set the text to align to the center of this section. We also added letter spacing for a subtle flare and chose a good contrast between our background color and our color, all within our color scheme.
Next, insert into the navigation section these declarations:
color: #cfdce6;
width: 20%;
height: 250px;
float: left;
margin-left: 10px;
This is the first time we are using the float element. When I was learning to work with style sheets the float and positioning part baffled me. XHTML elements work with the box model. Each element is a box to the browser. Each element will display as either block , in which case there is an implied carriage return at the closing tag, or inline , where there is not.
Block elements also take up an entire row of the browser window. In other words, if we declare
The
, the next element will appear on the next line even though there might be tons of room for more content to the right of The in the browser window. Images, by default, display inline , so if you declare
The
Notice that we did not declare a background color for our navigation section. This is because we are using CSS for layout and we want our left column to have the appearance of extending all the way to the bottom of the page. In fact, it will only extend as far it needs (unless we declare a specific height). We have declared a specific height here, but that is because we don t have a bunch of content inserted in there to push it down. I don t recommend trying to push the height all the way to the bottom if you ever need to have a flexible content section. By not declaring a background color we are utilizing the inheritance behavior of CSS and the property is set in the next element up, which is the wrapper div where we declared the background color to be: #647d8f. Essentially, by not declaring a background color on our navigation div, we are making it transparent.
Next, insert into the content section these declarations:
background-color: #cfdce6;
color: #596f80;
width: 71%;
float: right;
min-height: 400px;
We ve chosen two colors from our color scheme for the content section. The background color is #cfdce6 and the color is #596f80. These colors offer us a little change in our page, which will help accentuate the two-column layout; they offer a nice contrast to each other, as well. We are setting the width to 71%. If you add this to our navigation div, which was set to 20%, you can see that we still have about 9% of the page to play with. This allows for margins, padding, borders, and other options we might someday want to insert into one of these section declarations.
The layout still has the appearance we want, so it s not a problem. Setting float: right pushes the content div to the right side. This is optional at this point because without this declaration, the content should still slip into place. I have left it in so I can demonstrate the clear property in the next section. A little bit earlier in this article I mentioned that some of the browsers are inconsistent in their interpretation of some of the tags and CSS. Please notice that we are setting the min-height property to 400px. This tag s name says it all. Make this div at least 400px high. This way, if there is no content in the div to push it down, it will always retain at least 400px height. For some reason this tag works great in Firefox and IE7, but not in IE6. If we simply use the height: 400px declaration, it works great in IE6, but if you have more content than 400px worth, Firefox and IE7 believe you and keeps the height to 400px and you ll see your content run down past your footer!
Therefore, we set the min-height here in our style sheet and go ahead and use the HTML if statement to override this setting on our page for IE6 and IE5. The head section of our page with the if statement inserted is shown in Figure 6. This simply says, if you are IE5 or IE6, please override the declarations in my style sheet with these . In my opinion, the HTML if statement is the best way to deal with some of the inconsistencies of the browsers. When we declare our themes, we ll be sure to use StyleSheetTheme, as opposed to theme, to make sure that the style sheet link is inserted before our if statements. A subtle but very important point.
type="text/css" />
Figure 6: The head section of our page with the if statement inserted.
Getting back to the style sheet, insert in the innercontent section the following declaration:
margin:20px;
This sets a margin of 20 pixels on each side of the innercontent div, which will push our content in from the sides of the content div. This will render quite nicely in both IE and Firefox.
Now for the footer. A quick note about footers: they were my nemesis when I first started CSS. I never felt confident that the footer would render consistently where I wanted. However, I believe I have it conquered. We do have some options with our footer, such as declaring it in our HTML markup after the ending of the wrapper div and setting all the margin and width properties to match those of our wrapper div. In this layout, however, we ve nested it within our wrapper div, so we ll insert into the footer section of our style sheet the following declarations:
clear: both;
background-color: #596f80;
color:#cfdce6;
letter-spacing: 2px;
font-size: 80%;
height: 30px;
text-align: center;
padding-top: 10px;
The first thing we do in this declaration is set the clear property to both. Think of this as a way of telling the browser, Whatever you did before me with all your float right and float left stuff, please reset yourself to normal flow from here until the next float declaration. (Of course, in this particular page, there are no more float declarations.) We set the background color and color to match our header settings. We added a 2px letter spacing property for aesthetics. We set the font-size to 80% of the base size we set in our body declaration so that the footer text will appear smaller than the rest of the text on our page.
We set the height to 30px and set the text-align to center. We used the padding-top property to push our text off the top by 10px. The differences in rendering between Firefox and IE are acceptable in this case.
I placed a bunch of fake content inside the innercontent section of our HTML so we can see what our layout looks like with that div pushed down. Figure 7 shows a screenshot of our page without fake content (top), and with fake content (bottom).
Figure 7: With and without content.
Step Four Extrapolate the Page into a Master Page
We now have a nice layout and our page is ready to be converted into a master page. By using a master page our design can be used site-wide; when we make a change to the master page, the change happens to all pages that inherit our master page. We ll do this in three easy steps:
1) Add a master page to our Web site.
2) Copy and paste the code into our master page.
3) Place the content placeholder in its proper place.
Add a master page to our Web site. Right-click on the root in Solution Explorer and choose Add New Item. In the Item Template window choose Master Page. For simplicity, we ll leave the default name of MasterPage.master; however, you can name it anything you like.
Copy and paste the code into our master page. Go to your Default.aspx page and highlight all the code starting with (and including) the opening
Place the content placeholder in its proper place. Cut and paste the content placeholder from its location in the master page into the innercontent div. Now delete the opening
Figure 8: The completed master page
code.
Step Five Extrapolate the Style Sheet into a Theme
That s it; you re done! You now have a master page with your layout. Now we need to convert our style sheet into an ASP.NET 2.0 theme for use throughout our Web site. This is done in three easy steps:
1) Add a theme folder. Right-click the root of your project in Solution Explorer and choose Add ASP.NET Folder | Theme. For this article we can use the default folder name of Theme1; however, you ll probably want to name your themes semantically (so if you want to change between them your code will have meaning).
2) Move your style sheet into your theme folder. With your mouse, click and drag your StyleSheet.css file into your newly created Theme1 folder.
3) Create
and configure a web.config file. Right-click the root of your project in Solution
Explorer and choose Add New Item. Choose web configuration file from your Item Template
window (the default name web.config is fine). In the web.config file, add just
below the
Now it s time to test the project. First, delete the Default.aspx file created earlier. Then right-click on Solution Explorer and choose Add New Item. Select Web Form from your Item Template window and leave Default.aspx as the name of the file. Be sure to check the box that says Select master page before clicking the Add button. Then press the Add button and you ll be taken to a Select a Master Page window. The MasterPage.master will be on the right side of this explorer-style window; click on it to select it and press the OK button. Now either create some content or go to that notepad file suggested earlier and copy and paste your previous fake content in between the opening and closing asp:content placeholder tags on your Default.aspx file. Now save all files and right-click somewhere on the blank area of the source view of your Default.aspx page and choose View in browser.
Your finished page will look exactly like Figure 7. It should look just about the same in IE7, IE6, IE5, and all current versions of Firefox. All you would have to do now is create user controls for your header, footer, and navigation sections and place those in their respective sections of your master page and you ll be as good as gold.
Conclusion
When used properly, CSS makes our job as Web developers much easier. By separating content from presentation we are able to make sweeping changes to the look and feel of our Web sites with minimal effort. We can give our site a huge facelift with a few changes to our style sheet. This beats going in and changing individual pages that were laid out using tables. Again, tables are not evil; they are for displaying tabular data, and for eating on, and they also serve as a great place to rest our laptops while working on our style sheets.
The source code accompanying this article is available for download.
Spike Xavier is a Web designer, software developer, and instructor at Interface Technical Training in Phoenix, AZ. Spike founded an e-commerce business called Bold Merchandise in the mid 90s which handled e-commerce for some of the biggest names in the music business. Bands like Nine Inch Nails, No Doubt, Social Distortion, The Offspring, and many more utilized merch.com for their official online stores. Spike got bit by the .NET bug and relocated to Phoenix and began working at Interface Technical Training, where he now works full time. Contact Spike at http://[email protected].
