Similarly, the visible height of the box is determined by adding the content’s height to the padding and border settings. The margin determines the distance on each side between the visible box and adjacent elements. Notice from Figure 5.2 that the visible width of the box is determined by adding together the content width, the padding and the border. The content is anything contained within the area of the box. Don’t think of this “content” as being the same as words or pictures that comprise the content of a news story or a set of links. Looking at the Footbag Freaks home page, we can easily identify the following seven design elements, indicated in Figure 5.1:Īt the center of the CSS box model is the content itself. The secondary page has fewer elements than the home page, but the relative positioning and layout of the common elements doesn’t change from one page type to the other. The Footbag Freaks site appears to need only one type of page layout. Others might be flat HTML pages that never change unless you redesign them. Some of these pages might display dynamic content that is stored in a database and generated in response to specific user requests. For example, such a site might include different layouts for its: On a typically complex ecommerce site, you might run into far more page types. An inspection reveals that the large graphic that displays near the top of the front page does not appear on other pages of the site. In the Footbag Freaks site, for example, the specification tells us that bread-crumb navigation will appear on all but the front page. The front, or index page, often has a different look and feel from the “inside” pages. Most sites use more than one basic page layout. One of the first decisions you have to make when you create any Website, but particularly one where you intend to put CSS to its most effective use, is how many different types of pages and elements you’re going to need. I’ll conclude with the usual tips on dealing with the layout issues presented in this chapter – the issues involved in converting pages to CSS from an existing table-centric design. I’ll guide you through the process of creating dummy layouts for the pages you’ll encounter in the Footbag Freaks project, and in other projects you may create.
I’ll delve into the intricacies of creating and using two- and three-column page layouts, and into the mysteries of floating objects. I’ll teach you about boxes, borders, and the famous Box Model of CSS design. In it, I’ll discuss multi-column layouts – both in general and very specifically – as they relate to the Footbag Freaks site. This chapter focuses specifically on creating the basic structural layout of a Web page or site using CSS. And later, in Part III, I’ll discuss styling the content of the pages we’ll be laying out in this and the next chapter. I first look at the site-level and pagelevel issues involved with CSS design, so that we can understand the big picture perspective of page layout without tables (which is, after all, the primary thrust of this book). In this book, I take the opposite approach. Then, they move on to explaining the broader issues associated with CSS positioning (CSS-P), which affect the layout of pages rather than the appearance of individual elements.
Chapter 8: Yet another update from Coach Kelly - his updated athlete data in TXT files.
You can also download the webapps folder structure (which includes the index.html, CSS and other support files).