Professional Web Design: Techniques and Templates- P6

Professional Web Design: Techniques and Templates- P6: 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- P6 232 Chapter 10 ■ Case Study: Medium-Content CSS Design text-align:center; } #a5-body { position: relative; width: 770px; /* change this to a specific amount for a fixed design or a relative amount if the design should expand to a percentage of the screen. E.g., 770px or 100%, respectively. */ margin-left: auto; margin-right: auto; text-align:left; padding-bottom:10px; border:0px solid #000000; } #a5-column-left { position:absolute; left:0px; top:0px; width:191px; border:0px solid #000000; } #a5-menu { font:bold 13px Arial, Helvetica, sans-serif; height:249px; background:url(images/bg-left-column.jpg) no-repeat; } #a5-menu a { display: block; text-align:left; line-height:20px; vertical-align: 30%; height:20px; padding-left:35px; text-decoration:none; background: url(images/bg-menu-off.gif) no-repeat 0px 0px; color:#ffffff; } #a5-menu a:hover { background: url(images/bg-menu-on.gif) no-repeat 0px 0px; color:#F9F68C; } #a5-menu-sl { width:191px;Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Building the Structure 233 color:#000000; font:bold 12px Arial, Helvetica, sans-serif; text-align:left; } #a5-menu-sl a { display: block; text-align:left; line-height:18px; vertical-align: 50%; height:18px; padding-left:40px; font-weight:normal; text-decoration:none; background: url(images/bg-menu-off-sl.gif) no-repeat 0px 0px; color:#000000; } #a5-menu-sl a:hover { background: url(images/bg-menu-on-sl.gif) no-repeat 0px 0px; color:#4C5C6B; } #a5-copyright { font-size: 11px; padding:20px 50px 10px 10px; color:#978872; } /* ++++++++++ global structure styles end ++++++++++*/ menu item 1 longer menu item 2 menu item 3 menu item 4Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX 234 Chapter 10 ■ Case Study: Medium-Content CSS Design menu item 5 menu item 6 |© copyright 2006| |your company| |all rights reserved| There are several things to note about the code in Listing 10.2: ■ The a5-column-left rule has absolute positioning assigned to it. Its left and top properties are both assigned 0px to force the into the top-left corner of the a5-body container it is nested within. The width of the column is fixed at 191 pixels, using the width property. This ensures that the col- umn’s width will not change, no matter what other content is included in the right column. It also forces the width of the left column so the menu items fill in its full width. ■ When the logo is added as the first item in the a5-column-left container, it needs to have tags wrapped around it to eliminate extra space be- tween ...