Exercise 10: Flexible to Responsive Page Layout.
In this Exercise continue using the newer HTML Elements introduced in Exercise 8A, use CSS styles to make the page adjust from fixed to flexible to responsive.
Read in Text Book: Chapter 17 and follow along in the Demos for Exercise 10. Be sure to experiment.
By Due Date:
Create a minimum of 4 pages. All pages will use the same content. Link all pages together.
Save into your folder - Ex10.
Folder Name: Ex10
Opening Page Name: index.html
All Pages Must Link Together.
Post your questions online or email them to me
CSS Styles for Page Layout
- EXAMPLE style for the wrapper: width: 960px; padding: 10px;
Use to set a specific width to the wrapper, aside & main areas. Experiment to make sure the aside and main areas will fit inside the wrapper. Use a calculator if needed.
CSS: Flexible & Max-Width Page
- Example for Flexible & Max Width page (for the wrapper): width: 98%; padding: 2%;max-width: 960px;
- Also use percentages for the aside & main areas for width, padding and margin
Use percentages to set the widths to make your page adjust or be flexible to fill the browser window. Try on the wrapper, aside and main areas. Be sure to check to see that the aside and main fit inside the wrapper. Add the fixed-width so the page does not expand beyond a comfortable viewing area.
CSS: Responsive Page Using Media Styles
Using your existing CSS, add Media Styles at the bottom of your CSS Document styles
EXAMPLE (add in CSS and use your own content):
/* media styles */
@media screen and (max-width: 768px) {
header h1 {padding: 1.5%; }
aside {text-align: left; width: 96%; float: left; padding:1% 2% 0 2%;}
main {text-align: left; width: 96%;
float: left;
padding: 0 2%;}
main img { margin: 0 1% 1% 1%;}
footer {text-align: left; padding: 1% 2%; font-size: .9em;}
nav {background-color: #c1a769; border-bottom: none; }
nav ul { width:100%; padding: 0 1%; display: inline-block;}
nav li { width:48%; border: 1px solid #5e2806; padding: 0.5% 0;
float: left;}
nav a {text-decoration: underline; border: none; line-height: 135%; }
nav li a:hover {text-decoration: underline; border: none;background-color: #c1a769; }
}
Review the Demo pages for CSS style use.
Exercise Requirements
- This is a multiple page exercise!
- Use the same content on each page
- Page 1 (index.html) Create a page of content for each area using all the new tags listed in Exercise 8A. Write your content in "Natural Flow" or the order it should be read. Do Not add CSS styles. Be sure to add at least one image. Use the 2 column format by using the aside and main elements.
- Page 2 Using the same content - add your own styling to the CSS Document Styles (in the head of the document). Experiment adjusting the padding, margin and borders using fixed pixel amounts.
- Page 3 Using the same content from your 2nd page. Adjust certain widths to be set in percentages instead of fixed pixel amounts. (wrapper, aside & main areas). Also add a max-width style to your wrapper.
- Page 4 Using the same content from your 3rd page. Add Media Styles in your CSS to make the page Responsive. See demos for examples. View the Source Code!
- Link all pages
- Opening Page Name: index.html
- Folder Name: Ex10