Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Introduction to Cascading Style Sheets : Page 3

Browsers often have a difficult time reading a style definition for one reason or another. Adding a position (and sometimes a width) value to every appropriate CSS definition can jumpstart the browser into recognizing your styles correctly.


advertisement
Page Layout
You can use the Box Model as a guide to lay out elements on a page. In this section, you will lay out an input form page using only CSS for positioning and design. In the past, you may have used a <table> to lay out pages with a certain look and feel. You will now use CSS to accomplish the same thing.

The input form you create is standard in almost any development effort. The form asks for a user's name and e-mail address. Figure 5 shows the finished page.

 
Figure 5. Prefer CSS Over Tables: Use CSS to lay out a page instead of <table> tags.
Step 1
To begin, you must first learn the semantics of the HTML that create the structure of this simple input page. The following code shows how to use <div> tags to create the basic layout. You can see the results in Figure 6.

<div> <div> <div>Name</div> <div> <asp:textbox id="txtName" runat="server" /> </div> </div> <div> <div>Email</div> <div> <asp:textbox id="txtEmail" runat="server" /> </div> </div> <div> <div></div> <div><asp:button id="btnSend" text="Send" runat="server" /></div> </div> </div>

 
Figure 6. Simple Screen Layout: This is a simple screen layout using <div> tags.
Looking at the code, you might notice that the <div> tag replacement seems to be a one-for-one switch where you may previously have had <table>, <tr>, and <td> tags.

Switching the tags from <table> to <div> lets you design a number of benefits. This technique unleashes the power of your style sheet and gives you full control of the placement of the elements in relationship to each other. Notice the different placement of labels in the screen shot from the un-styled document to the final product shown in Figure 5. The design benefits when you can put the labels anyplace on the page. Additionally, the page is now a standards-based form which will render appropriately in many devices (Example: WAP, handheld, etc.) and not just a computer's Web browser.

Step 2
Now that you have the basic structure, you can move on to marking up your HTML with the right hooks. The code below shows the updated hooks you can employ to get a better rendering of this page.

<div class="inputForm"> <div class="section"> <div class="lbl">Name</div> <div class="ctl"><asp:textbox id="txtName" runat="server" /></div> </div> <div class="section"> <div class="lbl">Email</div> <div class="ctl"><asp:textbox id="txtEmail" runat="server" /></div> </div> <div class="section"> <div class="lblNoText"></div> <div class="ctl"><asp:button id="btnSend" text="Send" runat="server" /></div> </div> </div>

Awareness of the DOM (Document Object Model) helps you to write fewer style sheet entries.
And the following code shows the appropriate style sheet entries that must be made to accomplish the final look and feel.



.inputForm { position:relative; } .inputForm .section { position:relative; clear:both; } .inputForm .section .lbl, .inputForm .section .lblNoText { position:relative; float:left; } .inputForm .section .ctl { position:relative; float:left; }

Figure 7 shows the result of adding the appropriate styles. You can see that now the labels and the text boxes are on the same line.

 
Figure 7. Page Layout: Simple changes in the style sheets can have a big impact on the page layout.
HTML Explained
So what changed? All the styling necessary for this layout is controlled by classes exclusively. Remember: the value of a class is to define a few styles and use them over and over again. Here is a description of changes one section at a time:

<div class="inputForm"> ... </div>

The markup now features a class of "inputForm" to the main container <div>. Denoting this container with this class allows you to gain exclusive access to the elements inside any form that uses the inputForm class. Like this:

<div class="section"> <div class="lbl">Name</div> <div class="ctl"><asp:textbox id="txtName" runat="server" /></div> </div>

The next segment includes a class called "section." The section class defines what is contained in a single section or row in the parlance of a table layout. The section class gives you the granularity to affect a pair of labels and a control at the same time.

Next, a class named "lbl" is added. The lbl or label class allows the style sheet to affect the container that acts as the label for your input box.

Finally, the class "ctl" is added to grant access to the input control in the form. This pattern is repeated throughout the form for each section of label and control pair. The only deviation to the pattern is in the button section.

<div class="section"> <div class="lblNoText"></div> <div class="ctl"><asp:button id="btnSend" text="Send" runat="server" /></div> </div>

Often, pages are not designed to have a label next to the command buttons. This requirement gives rise to an alternate class, "lblNoText," which excludes any styles not relevant to the label area of this section.

CSS Explained
The first item in your style sheet is the style definition for the inputForm class.

.inputForm { position:relative; }

This definition only has one entry: the style sheet sets the position of this element to relative. There are two common positioning types: relative and absolute. Relative positioning stacks elements next to each other in a chain as they appear in the HMTL document. Absolutely positioned elements are placed on the page according to the provided left and top settings defined in the style sheet. The absolute position is applied regardless of how the element structurally appears in the HTML document.

Next, style the sections:

.inputForm .section { position:relative; clear:both; }

Notice that the definition begins with the inputForm class. This uses hierarchical styles to narrow down exactly which section is affected on the page. If you have another element on the page using a class of section, you are assured that only the elements within inputForm receive the new style.

Validating your style sheets highlights possible problems in various browsers.
The next new concept in this sample is the style of clear:both. To fully understand what the clear style does, you must first understand how a float works. When you relatively position an element on your page, the default behavior of any adjacent element is to display directly under the preceding element. When you apply the float style, you allow adjacent elements to appear next to your preceding container.

Should you choose to break the chain of floating elements, you may apply the clear style to create a break in the float and resume display of an element under the preceding element. Basically, the clear:both style guarantees that the sections will appear one underneath the other. Now examine the style for the individual elements in the section.

.inputForm .section .lbl, .inputForm .section .lblNoText { position:relative; float:left; }

Noteworthy about this segment is the listing of separate definitions that share a single style. When you encounter instances where grouping definitions together makes sense, all you have to do is separate your definitions by a comma, and the resulting style applies to all definitions in the list. Finally, look at the style for the control area.

.inputForm .section .ctl { position:relative; float:left; }

The section above does not introduce any new concepts, but acts as a stub for some additional styles applied in the next section.

Step 3
To give your form some final flair, the following changes update the look of the page by controlling the style sheet exclusively. Please note that this section does not feature any changes to the HTML. In fact, now that the page has the appropriate hooks, an entirely different layout is applied with bold colors for this page. (See the accompanying download files for some examples.) Here are the changes made to the style sheet that give the finished look, as shown in Figure 5.

body { font-family:Tahoma,Verdana, Arial,Helvetica,sans-serif; } .inputForm { position:relative; } .inputForm .section { position:relative; clear:both; } .inputForm .section .lbl, .inputForm .section .lblNoText { position:relative; float:left; width:100px; font-weight:bold; margin-right:10px; padding:3px; } .inputForm .section .lbl { background-color:#ccc; } .inputForm .section .ctl { position:relative; float:left; width:200px; padding:2px; }

The first addition to the style sheet is to the body of the page.

body { font-family:Tahoma,Verdana,Arial,Helvetica, sans-serif; }

This allows all text on the page to display in the Tahoma font. The list of fonts gives a cascading list of fonts that you look for if the supported font is not found. For instance, if this page is served to a Macintosh computer and the Microsoft fonts of Tahoma and Verdana are not installed, the page displays the text in Arial or Helvetica. If no match is found, the browser uses the system-defined sans-serif font, whatever that may be on that particular computer. No new styles were added to the section class, so you may now move to the label areas.

.inputForm .section .lbl, .inputForm .section .lblNoText { position:relative; float:left; width:100px; font-weight:bold; margin-right:10px; padding:3px; }

The new items should prove self explanatory. If you don't recognize the margin or padding, please refer to The Box Model section earlier in this article for details. Next, add some color to the labels on the form.

.inputForm .section .lbl { background-color:#ccc; /* Web safe color hex value for gray */ }

Remember that in the previous code segment, some general settings were applied to the lbl and lblNoText classes. Grouping these definitions together guarantees that they will have the same general styles. The desired design only calls for the labels with text in them to have a background color. Therefore, this definition only applies to the lbl container. Finally, the styles for the control section allow the container to line up uniformly with the label container.

.inputForm .section .ctl { position:relative; float:left; width:200px; padding:2px; }

The width style gives the horizontal boundary of the container and applies the padding in order to match the label.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date