The completed page is shown in the following image.
PUTTING EVERYTHING TOGETHER
377
10
Hacking for Internet Explorer
As mentioned earlier, there??™s also a style sheet for Internet Explorer 5, attached using a
conditional comment. This document, ie-5-hacks.css, has four rules. The body and
#wrapper rules deal with that browser not centering the site (see the ???Centering layouts???
section in Chapter 9). The h1.mainHeading rule adds extra padding to the bottom of the
heading to cater for Internet Explorer 5??™s poor handling of the box model (again, see
Chapter 9), while the final rule deals with the browser placing margins around the thumbnail
images. The defined negative horizontal margins (shown in the following code block)
pull the thumbnails back into position.
#thumbnailsContainer img {
margin: 0 -3px;
}
Creating an online storefront
This section will detail how I created a layout for an online storefront, providing the user
with a quick and simple means of accessing a number of product categories by way of a
multicolumn drop-down menu. The Photoshop file for the document is store-frontlayout.
psd, in the PSD mock-ups folder within the chapter 10 folder of the download
files. The completed web page (along with associated files) is within the store-website
folder, within the chapter 10 folder. The following image shows the Photoshop mock-up
of the page.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
378
About the design and required images
Prior to working on this design, I decided that it would be a semi-liquid layout, with a maximum
width of around 1000 pixels and a minimum width slightly larger than the width of
the four tabs (which total 740 pixels).
Pages:
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483