Tutorial 4: Creating page layout with css Session 4.2

Objectives Set display properties Create a reset style sheet Explore fixed, fluid, and elastic layouts Set the width and height Float elements in a Web page

The display style Most page elements are displayed in one of two ways Blocks occupy a defined rectangular area within a page Inline elements flow within a block

The CSS Box Model

Creating a Reset Style Sheet /* Display HTML5 structural elements as blocks */ article, aside, figure, figcaption, footer, hgroup, header, section, nav { display: block; } /* Set the default page element styles */ * { font-family: Arial, Helvetica, sans-serif; font-size: 100%; line-height: 1.2em; list-style: none;

Creating a Reset Style Sheet Many designers create a reset style sheet to define their own default styles Two steps: Step #1: Display HTML5 structural elements as blocks Step #2: Set the default page element styles

Practice – Reset Style Sheet Download cyclepathology.zip from my website. Open race.css in Notepad++ Add a style rule to display the header, article, aside, figure, figcaption, hgroup, section, and nav elements as blocks. Create a style rule to set the default style for every element so that every element: Is displayed in Verdana, Geneva, sans-serif Has a font size of 100%

Fixed and Fluid Layout

Elastic Layouts Some designers propose the use of elastic layouts, in which all measurements are expressed relative to the default font size using the em unit If a user or the designer increases the font size, the width, height, and location of all of the other page elements, including images, change to match

Setting the width and height Page width and height For fixed layout: width: value; height: value; For fluid layout: min-width: value; min-height: value; max-width: value; max-height: value;

Setting width and height Example: body { width: 95%; min-width: 900px; max-width: 1400px; } Width and height can also be used to define the width and height of other elements.

Setting width and height In the style rule for the page body, set the page width to 98% of the width of the browser window in a range from 1000 pixels up to 1400 pixels. Create a style rule for the header element that: Sets the width to 20% of the page body Changes the background color to black For inline images within the header element, set the width to 100% of the width of the header. For the hgroup within the article element, set the height to 60 pixels and indent the text 20 pixels. For the figure box, create a style rule to set the width of the figure box to 79%.

Floating Elements Floating an element takes that element out of the normal flow of the document and positions it along the left or right edge of its containing element. With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. float: position; Where position is left, right, none, or inherit. Example: float: right;

Floating Elements – The Rules You can't float every element on a Web page. Any element that follows the floated element will flow around the floated element on the other side. If the floated element does not have a pre-defined width, it will take up as much horizontal space as required and available regardless of the float => you should always define a width on floated elements. For example, if I float an image to the left, any text or other elements following it will flow around it to the right. And if I float an image to the right, any text or other elements following it will flow around it to the left. An image that is placed in a block of text without any float style applied to it will display as the browser is set to display images. This is usually with the first line of following text displayed at the bottom of the image.

Floating Elements - Images Example of a floating image: Open float_image_layout folder Image with no float property Image with float to the left Image with float to the right Example of multi-column layout: Open multicolumn_layout folder Layout with no float Layout with section floating to the left Layout with section and article floating to the left Layout with section, article, and aside floating to the left

Floating Elements Turning Off the Float clear: position; Where position is left, right, both, none, or inherit.

Floating Elements For list items within the horizontal navigation list, add styles to: Display each list item as a block floated on the left Add the following styles to the main section of the page: Float the main section on the left margin once the left margin has been clear of previously floated objects Set the width to 49% of the page body For the article element, create a style rule to: Float the element on the left with a width of 29% Set background color to the value (215, 181, 151) For the figure box, float the figure box on the left once the margin is clear.