CHS Web Design Track

Designing a Page Layout

<< Previous Lesson | Next Lesson >>

Case | Pandaisia Chocolates

Anne Ambrose is the owner and head chocolatier of Pandaisia Chocolates, a chocolate shop located in Essex, Vermont. You have been asked to assist on the redesign of the company's website. Anne has provided you with three pages from the website to start your work. She has written all of the content, compiled the necessary images and graphics, and written some of the text and color styles. She needs you to complete the project by designing the page layout using the CSS layout properties.

After completing this chapter you will be able to:

  • Session 3.1
    • Create a reset style sheet
    • Explore page layout designs
    • Center a block element
    • Create a floating element
    • Clear a floating layout
    • Prevent container collapse
  • Session 3.2
    • Explore grid-based layouts
    • Create a layout grid
    • Format a grid
    • Explore the CSS grid styles
  • Session 3.3
    • Explore positioning styles
    • Work with relative positioning
    • Work with absolute positioning
    • Work with overflow content

Session 3.1 ~ Page Layout with Floating Elements

Introducing the display Style

  • HTML elements are classified into
    • Block elements, such as paragraphs or headings
    • Inline elements, such as emphasized text or inline images
  • The display style can be defined for any page element using
    • display: type;
    • where type the display type
Display ValueAppearance
block Displayed as a block
table Displayed as a web table
inline Displayed in-line within a block
inline-block Treated as a block placed in-line within another block
run-in Displayed as a block unless its next sibling is also a block, in which case, it is displayed in-line, essentially combining the two blocks into one
inherit Inherits the display property of the parent element
list-item Displayed as a list item along with a bullet marker
none Prevented from displaying, removing it from the rendered page

Creating a Reset Style Sheet

Reset style sheet
supersedes a browser's default styles and provides a consistent starting point for page design
  • The first style rule in a sheet is the display property used to display HTML5 structural elements
To create a reset style sheet:
  1. Use the text editor or HTML editor of your choice to open the pc_reset_txt.css file from the html03 < tutorial folder. Enter your name and the date in the comment section of the file and save the document as pc_reset.css.
  2. Within the Structural Styles section, insert the following style rule to define the display properties of several HTML5 structural elements.
    article, aside, figcaption, figure,
footer, header, main, nav, section {
display: block;
}
Figure 3-2 highlights the new style rule in the document.
To complete the reset style sheet:
  1. Within the Typographic Styles section, insert the following style rule to define the typographic styles for several page elements:
       address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, ol, p, section, span, ul {
background: transparent;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
  2. Add the following style rules to remove list markers from list items found within navigation lists:
    nav ul {
list-style: none;
list-style-image: none;
}
nav a {
text-decoration: none;
}
  3. Set the default line height to 1 (single-spaced) by applying the following style rule to the page body:
    body {
line-height: 1;
}
  4. Save your changes to the file.
Figure 3-3 describes the new style rules in the document.
To get started on the Pandaisia Chocolates home page:
  1. Use your editor to open the pc_home_txt.css file from the html03 < tutorial folder. Enter your name and the date in the comment section of the file and save the document as pc_home.css.
  2. Use your editor to open the pc_home_txt.html file from the same folder. Enter your name and the date in the comment section and save the file as pc_home.html.
  3. Within the document head, directly after the title element, insert the following link elements to link the home page to the pc_reset.css, pc_styles1.css, and pc_home.css style sheets.
    <link href=”pc_reset.css” rel=”stylesheet” />
<link href=”pc_styles1.css” rel=”stylesheet” />
<link href=”pc_home.css” rel=”stylesheet” />
  4. Take some time to study the content and structure of the pc_home.html document. Pay particular attention to the use of ID and class names throughout the document.
  5. Save your changes to the file. You might want to keep this file open as you work with the pc_home.css style sheet so that you can refer to its content and structure.
Anne has sketched the general layout she wants for the home page, shown in Figure 3-4. Compare the pc_home.html file content to the sketch shown in Figure 3-4 to get a better understanding of how the page content relates to Anne's proposed layout.

Quick Quiz:

  1. True/False: When the display property of an element is set to none, the element is not a part of the document structure.
  2. True/False: The display value list-item displays the elements as a list item along with a bullet marker.

Exploring Page Layout Designs

  • Web page layouts fall into three categories:
    Fixed layout–
    Size of the page and page elements are fixed, usually using pixels as the unit of measure
    Fluid layout–
    The width of the page elements are set as a percent of the available screen width
    Elastic layout–
    Images and text are always sized in proportion to each other in em units
    Responsive design–
    The layout and design of a page changes in response to the device that is rendering it

Working with Width and Height

The width and height of an element are set using the following properties:

width: value;
height: value;
where value is the width or height using one of the CSS units of measurement or as a percentage of the widthor height of the parent element

To set the initial dimensions of the page:
  1. Return to the pc_home.css file in your editor and add the following style rule to the Body Styles section:
    body {
max-width: 960px;
min-width: 640px;
width: 95%;
}
  2. Within the Body Header Styles section insert the following style rule to set the display type and width of the logo image:
    body > header > img {
display: block;
width: 100%;
}
  3. Save your changes to the file and then open the pc_home.html file in your browser.
  4. Change the width of your browser window and verify that the size of the page body and the size of the logo resize as needed within the range of 640 to 960 pixels.
Figure 3-6 highlights the newly added style rules in the style sheet.
Figure 3-7 shows the current layout of the page body and logo.
To center the page body horizontally:
  1. Return to the pc_home.css file in your editor and, within the style rule for the body selector, insert the properties:
    margin-left: auto;
margin-right: auto;
  2. Save your changes to the file and then reload the pc_home.html file in your browser. Verify that the page body is now centered within the browser window.
Figure 3-8 highlights the newly added styles.
Class Discussion:

Compare between fixed and fluid layouts. List the advantages and disadvantages of all the layouts.

Centering a Block Element

Block elements can be centered horizontally within their parent element by setting both the left and right margins to auto 

body {
margin-left: auto;
margin-right: auto;
}

Vertical Centering

  • Centering an element vertically can be accomplished by displaying the parent element as a table cell and setting the vertical-align property to middle
  • For example, to vertically center the following h1 heading within the div element:
    <div>
<h1>Pandaisia Chocololates</h1>
</div>
  • Apply the style rule
    div {
height: 40px;
display: table-cell;
vertical-align: middle;
}
  • Using this style rule, the h1 heading will be vertically centered
Class Discussion:

What are the several methods you could use to overcome the challenges of vertical centering an element.

Floating Page Content

  • Floating an element takes it out of position and places it along the left or right side of its parent element
  • To float an element, apply
    float: position;
    where position is none (the default), left to float the object on the left margin or right to float the object on the right margin
  • For elements to be placed within a single row, the combined width of the elements cannot exceed the totalwidth of their parent element
To lay out horizontal navigation list items:
  1. Return to the pc_home.css file in your editor and go to the Body Header Styles section.
  2. Because there are five links in the navigation list, you’ll make each list item 20% of the width of the navigation list by adding the following style rule:
    body > header > nav.horizontalNavigation li {
width: 20%;
}
  3. Insert the following style rule within the Horizontal Navigation Styles section to display every list item within a horizontal navigation list as a block floated on the left.
    nav.horizontalNavigation li {
                        display: block;
                        float: left;
                        }
  4. Save your changes to the file and then reload the pc_home.html file in your browser.
Figure 3-11 highlights the styles used with list items.
Figure 3-12 shows the revised layout of the navigation list in the page header.
To change the display of the hypertext links:
  1. Return to the pc_home.css file in your editor.
  2. Within the Horizontal Navigation Styles section, insert the following style rule to format the appearance of the hypertext links within the horizontal navigation lists. 
    nav.horizontalNavigation a {
display: block;
text-align: center;
}
  3. Save your changes to the file and then reload the pc_home.html file in your browser.
  4. Hover your mouse pointer over the links in the navigation list. Note that the link text is centered within its block and the background color extends fully across the block rather than confined to the link text.
Figure 3-13 highlights the style rule for the hypertext links.
Figure 3-14 Links in the body header. Trouble? Don’t worry about the jumble of elements displayed after the body header. You'll straighten out those objects next.

Clearing a Float

To ensure that an element is always displayed below floated elements, use 

clear: position;
where position is left, right, both, or none

left –
Displays the element only when the left margin is clear of floating objects
right –
Displays the element only when the right margin is clear of floating objects
both –
Displays the element only when both margins are clear of floats
none –
Displays the element alongside any floated objects
To float the left and right column sections:
  1. Return to the pc_home.css file in your editor. Go to the Left Column Styles section and insert the style rule:
    section#leftColumn {
clear: left;
float: left;
width: 33%;
}
  2. Within the Right Column Styles section, insert:
    section#rightColumn {
float: left;
width: 67%;
}
Note that you do not apply the clear property to the right column because you want it to be displayed in the same row alongside the left column. Figure 3-16 highlights the style rules for the left and right columns.
To complete the right column section:
  1. Within the Right Column Styles section, insert the following style rules to format the inline images and list items:
    section#rightColumn img {
display: block;
width: 100%;
}
section#rightColumn > nav.horizontalNavigation li {
width: 25%;
}
  2. Save your changes to the file and then reload the pc_home.html file in your browser.
Note that you do not have to include a style rule to float the items in the horizontal navigation list because you have already created that style rule in Figure 3-11. Figure 3-17 describes the new style rules in the style sheet.
Figure 3-18 shows the layout of the left and right column sections.
To increase the left column padding:
  1. Return to the pc_home.css file in your editor and go to the Left Column Styles section.
  2. Insert the property padding: 1.5em; into the section#leftColumn style rule as shown in Figure 3-19.
  3. Save your changes to the style sheet and then reload the pc_home.html file in your browser.
Figure 3-19
Figure 3-20 shows the result of your change.

Refining a Floated Layout

Content box model –
The width property refers to the width of an element content only
  • Additional space include padding or borders
Border box model –
The width property is based on the sum of the content, padding, and border spaces
  • Additional space taken up by the padding and border is subtracted from space given to the content
  • The layout model can be chosen using 
    box-sizing: type;
    where type is content-box (the default), border-box, or inherit (to inherit the property defined for the element's container)
To set the block layout model:
  1. Return to the pc_reset.css file in your editor.
  2. Add the following style properties to the style rule for the list of block elements 
    -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
  3. Save your changes to the style sheet and then reload the pc_home.html file in your browser. Verify that the layout of the left and right columns has been restored and additional padding has been added within the left column.
Figure 3-22 highlights the revised style rule.
To lay out the page footer:
  1. Return to the pc_home.css file in your editor and scroll down to the Footer Styles section.
  2. Insert the following style rules:
    footer {
clear: left;
}
footer > nav.verticalNavigation {
float: left;
width: 22%;
}
footer > section#contactInfo {
float: left;
width: 34%;
}
  3. Save your changes to the style sheet and then reload pc_home.html in your browser.
Figure 3-23 highlights the layout style rules for the page footer.
Figure 3-24 shows the new layout of the footer.
To set the footer background color:
  1. Return to the pc_home.css file in your editor and go to the Footer Styles section.
  2. Insert the following property for the footer selector:
    background-color: rgb(71, 52, 29);
  3. Save your changes to the style sheet and then reload pc_home.html in your browser. Note that the background color is not changed.
Figure 3-25 highlights the footer background color style.

Working with Container Collapse

Container collapse –
An empty container with no content
  • Elements in the container are floated Use the after pseudo-element to add a placeholder element after the footer
  • The general style rule is
    container::after {
            clear: both;
            content: “”;
            display: table;
            }
    where container is the selector for the element containing floating objects
  • The clear property keeps the placeholder element from being inserted until both margins are clear of floats
  • The element itself is a web table and contains an empty text string
To keep the footer from collapsing:
  1. Return to Footer Styles section in the pc_home.css file and, after the style rule for the footer element, insert the following rule:
    footer::after {
clear: both;
content: “”;
display: table;
}
  2. Save your changes to the style sheet and then reload pc_home.html in your browser.
  3. Close any of the documents you opened for this session.
Figure 3-27 highlights the new rule in the style sheet.
Figure 3-28 shows the completed layout of the Pandaisia Chocolates home page.
Class Discussion:

Note down the advantages and disadvantages of floating an element over positioning them.

Session 3.1 Quick Check

  1. Provide the style rule to display all hypertext links within a navigation list as block elements with a gray background.
  2. Briefly describe the three types of page layouts.
  3. Provide a style rule to set the width of the page body to 90% of the browser window ranging from 320 pixels up to 960 pixels.
  4. Provide a style rule to horizontally center the header element within the body element. Assume that the header is a direct child of the page body.
  5. Provide a style rule to set the width of the aside element to 240 pixels and to float on the right margin of its container.
  6. Provide a style rule to display the footer element only after all floated elements have cleared.
  7. Your layout has four floated elements in a row but unfortunately the last element has wrapped to a new line. What is the source of the layout mistake?
  8. Provide a style rule to change the width property for the header element so that it measures the total width of the header content, padding, and border spaces. Include web extensions for older browsers.
  9. Provide a style rule to prevent the header element from collapsing around its floating content.