Professional Web Design: Techniques and Templates- P9

Professional Web Design: Techniques and Templates- P9: This is the must-have book for designers who want to expand their skills and improve the quality of their designs. Learning CSS technology and continually improving ones design and developer skills is essential for every Web designer in todays marketplace. The goal of Professional Web Design: Techniques and Templates is to educate beginning-to-intermediate Web designers on the various issues involved with Web design through general discussion, case studies, and specific tips and techniques....
Nội dung trích xuất từ tài liệu:
Professional Web Design: Techniques and Templates- P9 382 Chapter 14 ■ Case Study: A CSS Form Adding the Comments Row The code required to produce the Comments row is almost identical to several of the other rows, barring one difference—the row includes the tag, which does not force the height of the row for compliant browsers, such as Firefox. The designer, therefore, needs to force the height of the row. One way to do so is to add a local style to the parent , shown in Listing 14.9. Without declaring the height of the row, the row would look like the right side of Figure 14.9. The left side illustrates what the row looks like if a height is defined. Listing 14.9 XHTML and CSS Code for Comments Row Comments: Figure 14.9 The Comments row and how it will appear in compliant browsers when a height is and isnt defined when using the tag.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Building the Form Row by Row 383 Adding the Options to Select Rows The Options to Select rows add two more situations a designer may or may not come across. The first is to include only a section title and nothing more in a row. This is accomplished by merely not including a form field. The second is a little more involved. It requires two things: (1) define appropriate margins for posi- tioning in the parent , which, in this case, sets the bottom margin to 20 pixels and the left margin to 80 pixels; and (2) use a table to lay out the form fields in columns and rows. While the latter could be accomplished with CSS, the more simple and straightforward route is to use a table. The code in Listing 14.10 shows how simple the table needs to be. Listing 14.10 XHTML and CSS Code for Options to Select Row Options To Select: Sample Text Option 1 Sample Text Option 2 Sample Text Option 3 Sample Text Option 4 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX 384 Chapter 14 ■ Case Study: A CSS Form Sample Text Option 5 Sample Text Option 6 Adding the Submit and Cancel Buttons The final row contains the Submit and Cancel buttons. There are several things to note about this section of code: (1) a local style is added to the to provide 20 pixels of padding on the top and bottom, (2) the tag has added so that all browsers recognize the tag and account for its width, and (3) the two but- tons are placed side by side without any additional styling. The Cancel button calls an image, while the Submit button is generated with XHTML (see Listing 14.11). Listing 14.11 XHTML and CSS Code for Submit and Cancel Buttons The Final Product When all the code and images are added, the final 13-row form only needs the back-end functionality added to it. Figure 14.10 is the visual representation of the final code, which is shown in Listing 14.12.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Building the Form Row by Row 385 Figure 14.10 How the final form appears prior to being added to the design (see Figure 14.1). Listing 14.12 XHTML and CSS Code for Completed Form html, body { margin:0px; padding:10px; font: 9.8pt arial, helvetica, sans-serif; color:#000000; } .a5-form { margin:0px 0px 0px 0px; } .a5-required-field {Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX 386 Chapter 14 ■ Case Study: A CSS Form color:#D60000; } .a5-disabled-field { background:#7ED0D4; } .a5-disabled-checkbox { background:#7ED0D4; voice-family:\}\; voice-family:inherit; } html>body .a5-disabled-checkbox { padding-top:3px; } .a5-row-1 { height:30px; } .a5-row-1 label { float: left; width: 220px; text-align: right; padd ...