Homework SourseWeb Development Design Foundations with HTML5 8th edition
Web Development & Design Foundations with HTML5 8th edition - Chapter 7 - Hands on Exercises number 11.
Locate the index.html page you created in Hands-On Practice 7.5. This file is in the chapter 7/7.5 folder in the student files. Midifiy the HTML and CSS to use the Flexiable Box Layout (flexbox) technique to configure the three columns on the web pages. Save and test your page in browsers that support flexbox such as Chome or Opera.
File: https://www.dropbox.com/s/mus42a0jcsfz1ep/7.5.zip?dl=0
Solution
Create a new container containing those three columns and give it a property of flex. Align those columns using the property order. Then, to set relative widths for them, use the property flex.
index.html
<!DOCTYPE html>
<html lang=\"en\">
<head>
<title>Door County Wildflowers</title>
<meta charset=\"utf-8\">
<!--[if lt IE 9]>
<script src=\"http://html5shim.googlecode.com/svn/trunk/html5.js\">
</script>
<![endif]-->
<style>
header, nav, main, footer, aside { display: block; }
* { box-sizing: border-box;}
body { margin:0;
background-color: #ffffff; }
#container {
background-color: #eeeeee;
display: flex;
flex-direction: column;
color: #006600;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
}
#innerContainer{
display: flex;
flex-direction: row;
}
header { background-color: #636631;
background-image: url(showybg.jpg);
background-position: bottom;
background-repeat: repeat-x;
height: 120px;
color: #cc66cc;
text-align: right;
padding: 0 20px;
border-bottom: 2px solid #000000; }
nav { order: 1;
flex: 1;
padding: 1px 10px 20px 10px;
}
aside { order: 3;
flex: 1.5;
padding: 1px 10px 20px 10px;
}
main { order: 2;
flex: 6;
padding: 1px 10px 20px 10px;
background-color: #ffffff;
color: #006600; }
footer { font-size: .70em;
text-align: center;
color: #006600;
background-color: #ffffff;
padding-top: 10px;
clear: both; }
h1 { margin-top: 0;
font-size: 3em;
text-align: left;
text-shadow: 2px 2px 2px #000000; }
header a {font-size: 0.80em; }
header a:link, header a:visited { color: #ffffff; }
header a:focus, header a:hover { color: #eeeeee; }
nav ul { margin-top: 20px;
list-style-type: none; }
nav a { text-decoration: none;
font-size: 1.2em; }
nav a:link { color:#006600;}
nav a:visited { color: #003300; }
nav a:focus, nav a:hover { color: #cc66cc; }
nav a:active { color: #000000;}
nav img { margin: 30px;}
main p { margin: 20px; }
main h2, main h3 { color: #cc66cc;
background-color: #ffffff; }
.floatright { margin: 10px;
float: right; }
aside h3 { padding-bottom: 2px;
border-bottom: 1px solid #000000;
margin: 10px;
font-size: 0.90em;
color: #cc66cc; }
.news { font-size: 0.80em;
margin: 10px; }
</style>
<!--[if lt IE 9]>
<script src=\"http://html5shim.googlecode.com/svn/trunk/html5.js\">
</script>
<![endif]-->
</head>
<body>
<div id=\"container\">
<header role=\"banner\">
<span><a href=\"#content\">Skip to Content</a></span>
<h1>Door County Wildflowers</h1>
</header>
<div id=\"innerContainer\">
<nav role=\"navigation\">
<ul>
<li><a href=\"index.html\">Home</a></li>
<li><a href=\"spring.html\">Spring</a></li>
<li><a href=\"summer.html\">Summer</a></li>
<li><a href=\"fall.html\">Fall</a></li>
<li><a href=\"contact.html\">Contact</a></li>
</ul>
<img src=\"plsthumb.jpg\" width=\"100\" height=\"100\" alt=\"Showy Lady Slipper\">
</nav>
<aside role=\"complementary\">
<h3>The Ridges</h3>
<p class=\"news\">The Ridges Nature Sanctuary offers wild orchid hikes during the summer months. For more info, visit <a href=
\"http://www.ridgesanctuary.org\">The Ridges</a>.</p>
<h3>Newport State Park</h3>
<p class=\"news\">The <a href=\"http://www.newportwildernesssociety.org\">
Newport Wilderness Society</a> sponsors free meadow hikes at 9am every Saturday. Stop by the park office to register.</p>
</aside>
<main role=\"main\" id=\"content\">
<h2>Door County</h2>
<p>Wisconsin's Door County Peninsula is ecologically diverse — upland and boreal forest, bogs, swamps, sand and rock beaches, limestone escarpments, and farmlands.</p>
<p>The variety of ecosystems supports a large number of wildflower species.</p>
<img src=\"trillium.jpg\" width=\"200\" height=\"150\" alt=\"Trillium\" id=\"floatright\">
<h3>Explore the beauty <br>of Door County Wildflowers. . . .</h3>
<p>With five state parks, tons of county parks, and private nature sanctuaries, Door County is teeming with natural areas for you to stalk your favorite wildflowers.</p>
<footer role=\"contentinfo\"> Copyright © 2016 Door County Wild Flowers<br>
</footer>
</main>
</div>
</div>
</body>
</html>
