1. Layouts with CSS Web Design – Section 4-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

2. Objectives The Student will: Demonstrate a basic understanding of CSS positioning principles. Identify whether a web page uses fixed or liquid layout Apply CSS positioning to align elements into two columns on your web page. Position elements using both relative and absolute positioning The Student will: Demonstrate a basic understanding of CSS positioning principles. Identify whether a web page uses fixed or liquid layout Apply CSS positioning to align elements into two columns on your web page. Position elements using both relative and absolute positioning

3. Page Layout Overview In the early days of the Web, pages were displayed in a single column. Designers quickly started looking for ways to make web pages look more like print media such as newspapers and magazines. One of these designers discovered that the element could be used to display content in multiple columns. The idea quickly took off and most web pages throughout the late 1990's used tables for layout. In the early days of the Web, pages were displayed in a single column. Designers quickly started looking for ways to make web pages look more like print media such as newspapers and magazines. One of these designers discovered that the element could be used to display content in multiple columns. The idea quickly took off and most web pages throughout the late 1990's used tables for layout.

4. Page Layout Overview CSS Code: Cascading style sheets (CSS) had been around since 1996, when the first CSS specification was published. However, it took a while for browsers to support CSS. The CSS 2 specification was published in 1998, more browsers began to support it, and more web designers began using it. Nowadays virtually all web designers use CSS for page layout CSS Code: Cascading style sheets (CSS) had been around since 1996, when the first CSS specification was published. However, it took a while for browsers to support CSS. The CSS 2 specification was published in 1998, more browsers began to support it, and more web designers began using it. Nowadays virtually all web designers use CSS for page layout

5. Page Layout Overview CSS Avantages: CSS layout has important advantages over table- based layout. It requires relatively little code, which translates to smaller file sizes and faster downloads. Less code also makes the page easier to update and maintain. Pages that use CSS for layout can adjust better to the size of the user's display CSS Avantages: CSS layout has important advantages over table- based layout. It requires relatively little code, which translates to smaller file sizes and faster downloads. Less code also makes the page easier to update and maintain. Pages that use CSS for layout can adjust better to the size of the user's display

6. Fixed Width Design One approach to designing a web page is to define a specific page width in pixels: body { width: 1000px; margin: 0 auto; border: thick solid black; padding: 1em; } You can recognize fixed width designs on the web by resizing your browser window when viewing a web page. If the content remains the same width when you resize your window, it's a fixed width design. One approach to designing a web page is to define a specific page width in pixels: body { width: 1000px; margin: 0 auto; border: thick solid black; padding: 1em; } You can recognize fixed width designs on the web by resizing your browser window when viewing a web page. If the content remains the same width when you resize your window, it's a fixed width design.

7. Fixed Width Design The problem with a fixed width design is that one size really doesn't fit all. A fixed design may be perfect for a few users, but for many user's it's either too wide or too narrow, depending on their screen resolution. However, a fixed width design may still be the best choice if your design includes graphics. Since graphics are a fixed size, you know exactly how wide you need your page to be in order to hold those graphics. If the width is too small, the graphics will overflow the boundaries of their containers. The problem with a fixed width design is that one size really doesn't fit all. A fixed design may be perfect for a few users, but for many user's it's either too wide or too narrow, depending on their screen resolution. However, a fixed width design may still be the best choice if your design includes graphics. Since graphics are a fixed size, you know exactly how wide you need your page to be in order to hold those graphics. If the width is too small, the graphics will overflow the boundaries of their containers.

8. Fluid Design A fluid design, also known as liquid design, is a design in which the width is defined using percentages or em's, or not defined at all. With this type of design, the content automatically flows and repositions itself to fit the user's browser window. This type of design forces designers to be more flexible, and not be attached to their page having the same exact layout for all users. It acknowledges the differences between users' technologies, and tries to deliver content in a way that works best for that user's settings. A fluid design, also known as liquid design, is a design in which the width is defined using percentages or em's, or not defined at all. With this type of design, the content automatically flows and repositions itself to fit the user's browser window. This type of design forces designers to be more flexible, and not be attached to their page having the same exact layout for all users. It acknowledges the differences between users' technologies, and tries to deliver content in a way that works best for that user's settings.

9. Fluid Design Example - The following code defines the width of your body to be 70% of the browser window. If you expand or contract the size of your browser window, the size of your body changes accordingly: body { width: 70%; margin: 0 auto; border: thick solid black; padding: 1em; } Example - The following code defines the width of your body to be 70% of the browser window. If you expand or contract the size of your browser window, the size of your body changes accordingly: body { width: 70%; margin: 0 auto; border: thick solid black; padding: 1em; }

10. Fluid Design The problem with a fluid design is if you have images that are say, 800 pixels wide, and those are inside a container that's only 720 pixels wide, the images will overflow their container. That isn't necessarily a problem though, because images can be fluid too. The following code will prevent images from exceeding their boundaries—if a container is too small to hold an image, the image will be resized to fit: img { max-width: 100%; } The problem with a fluid design is if you have images that are say, 800 pixels wide, and those are inside a container that's only 720 pixels wide, the images will overflow their container. That isn't necessarily a problem though, because images can be fluid too. The following code will prevent images from exceeding their boundaries—if a container is too small to hold an image, the image will be resized to fit: img { max-width: 100%; }

11. Hybrid Fixed/Fluid Design One strategy that captures the strengths of both fixed and fluid design is to use a fluid design, but if there's a width below which your design starts to fall apart, you can set a min-width property that requires the width to be at least a fixed number of pixels.

12. Hybrid Fixed/Fluid Design For example, the following code is the same as the fluid design example above, but the design stops flowing at 720 pixels—it won't get any more narrow than that. body { width: 70%; min-width: 720px; margin: 0 auto; /* horizontal center */ border: thick solid black; padding: 1em; } For example, the following code is the same as the fluid design example above, but the design stops flowing at 720 pixels—it won't get any more narrow than that. body { width: 70%; min-width: 720px; margin: 0 auto; /* horizontal center */ border: thick solid black; padding: 1em; }

13. Rest of Today Download Homework 4-12 from the web site. You have 2 days to complete this but it is a lot of work. You will need to submit Google docs homework and show me your web page. There is reading involved – DO IT! Download Homework 4-12 from the web site. You have 2 days to complete this but it is a lot of work. You will need to submit Google docs homework and show me your web page. There is reading involved – DO IT!

14. Your Web Page should look something like: