Professional Web Design: Techniques and Templates- P10

Professional Web Design: Techniques and Templates- P10: 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- P10 432 Chapter 16 ■ Tips and Techniques Figure 16.12 If content is decreased in the left column, not only does the right column move below the footer, but the footer moves up. Note Because the photo in the left column of Figure 16.12 is floated, it is not included in the document flow, meaning other elements could pass above and below it, as well as in front of and behind it. If the amount of content is going to change dynamically, this design structure may not be the best solution. The designer may consider not including a footer area and assigning different positions to the tags, or the designer may want to use the design technique described in Chapter 12 or 13 that provides a solution to creating equal column designs. Centering a Fixed-Width Design Depending on the requirements, some sites need to be designed with liquid lay- outs—that is, they fill the full width of the screen. Yet others require a fixed width. HTML and XHTML used to make the process simple, but with the varied browser support of CSS, the process is a little more involved. One way requiresPlease purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Centering a Fixed-Width Design 433 wrapping two different tags around the body. Following are the steps to accomplish this task: 1. Add a rule to the style sheet that centers the fixed-width design, which is set at 770 pixels for this example. This rule centers the body for IE 5 and 5.5. It would be extremely rare for this code still to be necessary, but it doesn’t hurt to explain its use. #a5-body-center { text-align:center; } 2. Add a second rule that sets the text-align property to left, assigns the left and right margins to auto, and defines the positioning as relative. Setting the positioning to relative will allow the design to be positioned relative to the tag in which it is nested. The auto value of the margins will tell the browser to set the margins evenly on both sides, thus centering the code. The text-align:left; code is added because the a5-body-center rule that was added centers not only the body, but also the text in that container, by inheritance. #a5-body-center { text-align:center; } #a5-body { position: absolute; left:0px; top:0px; width:770px; text-align:left; } 3. Add the two tags around the code between the tags in the XHTML page. Listing 16.5 is the code that was used to create Figure 16.10. Listing 16.5 Code for Figure 16.10 Fixed-Width DesignPlease purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX 434 Chapter 16 ■ Tips and Techniques html, body { margin:0px; padding:0px; font: 13px Arial, Helvetica, sans-serif; color:#000000; background:#ffffff; } #a5-body-center { text-align:center; } #a5-body { position: relative; margin-left:auto; margin-right:auto; width:770px; text-align:left; } #a5-header { text-align:center; color:#ffffff; width:100%; padding-top:15px; background:black; height:180px; } #a5-main-content { position:absolute; left:0px; top:180px; color:#ffffff; width:100%; background:#89766F; border:0px solid #ffffff; } #a5-column-left { position:relative; left:0px; top:0px; color:#ffffff;Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Centering a Fixed-Width Design 435 padding:10px; margin-right:232px; background:#7A7878; border:0px solid #ffffff; } #a5-column-right { position:absolute; right:0px; top:0px; color:#000000; height:100%; width:232px; background:#B0ADAD; border:0px solid #ffffff; } #a5-footer { position:relative; left:0px; top:0px; font: 10px Arial, Helvetica, sans-serif; padding:5px; color:#ffffff; background:#000000; border:0px solid #ffffff; } ...