12. Karen wants the topics list to be well away from the left and right edges of
ID: 3593248 • Letter: 1
Question
12. Karen wants the topics list to be well away from the left and right edges of the page body. In the same section, create a rule that sets the size of the left margin of the first item in the topics list to 7.75% and sets the right margin of the last item to 7.75%.
Current code:
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutrial 3
Case Problem 1
Layout styles for Slate and Pencil Tutring
Author:
Date: October 4th, 2017
Filename: sp_layout.css
*/
/* Window and Body Styles */
html {
height: 100%;
}
body {
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: 640px;
width: 95%;
min-height: 100%;
}
header, ul, nav, li, a {
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
/* Row Styles */
header.row::after {
clear: both;
content: "";
display: table;
}
/* Page Header Styles */
body > header > img {
display: block;
width: 70%;
float: left;
}
body > header > nav {
float: left;
width: 30%;
padding-left: 2%;
padding-right: 2%;
display: vertical;
}
header > nav a {
display: block;
width: 100%;
}
/* Horizontal Navigation List Styles */
nav.horizontal li {
display: block;
float: left;
width:12.5%;
}
/* Topics Styles */
ul#topics li {
width: 20%;
float: left;
margin-left: 0%;
margin-right: 1.5%;
display: block;
}
#topics img{
width: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
/* HR Styles */
hr {
width: 50%;
}
/* Customer Comment Styles */
#comments ul {
width: 75%;
margin-top: 40px;
margin-bottom: 40px;
margin-right: auto;
margin-left: auto;
}
#comments li {
display: block;
width: 50%;
float: left;
margin-bottom: 30px;
}
#comments img {
display: block;
width: 20%;
float: left;
margin-left: 5%;
margin-right: 5%;
}
#comments p {
float: left;
width: 70%;
}
/* Footer Styles */
footer {
clear: both;
}
HTML File:
<html>
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutrial 3
Case Problem 1
Slate & Pencil Home Page
Author:
Date: October 4th, 2017
Filename: sp_home.html
-->
<meta charset="utf-8" />
<title>Slate & Pencil Tutring</title>
<link rel="stylesheet" type="text/css" href="sp_base.css">
<link rel="stylesheet" type="text/css" href="sp_styles.css">
<link rel="stylesheet" type="text/css" href="sp_layout.css">
</head>
<body>
<header class="row">
<img src="sp_logo.png" alt="Slate & Pencil Tutring" />
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Tutrs</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Your Account</a></li>
<li><a href="#">Chat Online</a></li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul class="row">
<li><a href="#">Math</a></li>
<li><a href="#">Science</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Languages</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Sociology</a></li>
<li><a href="#">Art</a></li>
<li><a href="#">Other</a></li>
</ul>
</nav>
<ul id="topics" class="row">
<li><img src="sp_topic1.png" alt="" />
<p>Our tut
rs have advanced degrees, supplemented with real-world
experience to help you meet your education goals.</p>
</li>
<li><img src="sp_topic2.png" alt="" />
<p>Every session is just you and your instructor and
there is always someone online to help you. 24/7.</p>
</li>
<li><img src="sp_topic3.png" alt="" />
<p>We cover it all: From from Biochemistry to
Beethoven. We can also help you prep for the ACT, SAT, and AP
exams.</p>
</li>
<li><img src="sp_topic4.png" alt="" />
<p>We keep our prices low. Sign up for one-time assistance or enroll
for a full semester at greatly reduced rates.</p>
</li>
</ul>
<hr />
<ul id="comments">
<li><img src="sp_student1.png" alt="" />
<p>“Thanks to <em>Slate & Pencil</em> I passed AP Calculus
with a 5.”<br />
<br />
— Kevin, 12th Grade, Utah</p>
</li>
<li><img src="sp_student2.png" alt="" />
<p>“I use <em>Slate & Pencil</em> all of the time to
supplement my lectures and course notes.”<br />
<br />
— Paul, 12th Grade, Texas</p>
</li>
<li><img src="sp_student3.png" alt="" />
<p>“I'm making the honor roll for the first time thanks to
your wonderful service and help!”<br />
<br />
— Lisa, 11th Grade, Florida</p>
</li>
<li><img src="sp_student4.png" alt="" />
<p>“Geometry is a breeze after working online with your great
tutrs and review materials.”<br />
<br />
— Karen, 9th Grade, Nebraska</p>
</li>
<li><img src="sp_student5.png" alt="" />
<p>“I've seen a great improvement in my use of study time and
I retain more than ever before.”<br />
<br />
— Gianna, 10th Grade, Vermont</p>
</li>
<li><img src="sp_student6.png" alt="" />
<p>“After using <em>Slate & Pencil</em>, my SAT and ACT
scores went through the roof!!!”<br />
<br />
— Todd, 11th Grade, Illinois</p>
</li>
</ul>
<footer>
Slate & Pencil Ttoring; © 2017 All Rights Reserved
</footer>
</body>
</html>
Explanation / Answer
<style type="text/css">
html {
height: 100%;
}
body {
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: 640px;
width: 100%;
min-height: 100%;
margin-left: 7.75%;
margin-right: 7.75%;
}
header, ul, nav, li, a {
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
/* Row Styles */
header.row::after {
clear: both;
content: "";
display: table;
}
/* Page Header Styles */
body > header > img {
display: block;
width: 70%;
float: left;
}
body > header > nav {
float: left;
width: 30%;
padding-left: 2%;
padding-right: 2%;
display: vertical;
}
header > nav a {
display: block;
width: 100%;
}
/* Horizontal Navigation List Styles */
nav.horizontal li {
display: block;
float: left;
width:12.5%;
}
/* Topics Styles */
ul#topics li {
width: 20%;
float: left;
margin-left: 0%;
margin-right: 1.5%;
display: block;
}
#topics img{
width: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
/* HR Styles */
hr {
width: 90%;
}
/* Customer Comment Styles */
#comments ul {
width: 75%;
margin-top: 40px;
margin-bottom: 40px;
margin-right: auto;
margin-left: auto;
}
#comments li {
display: block;
width: 50%;
float: left;
margin-bottom: 30px;
}
#comments img {
display: block;
width: 20%;
float: left;
margin-left: 5%;
margin-right: 5%;
}
#comments p {
float: left;
width: 70%;
}
/* Footer Styles */
footer {
clear: both;
}
</style>
<html>
<head>
<!--
New Perspectives on HTML5 and CSS3, 7th Edition
Tutrial 3
Case Problem 1
Slate & Pencil Home Page
Author:
Date: October 4th, 2017
Filename: sp_home.html
-->
<meta charset="utf-8" />
<title>Slate & Pencil Tutring</title>
<link rel="stylesheet" type="text/css" href="sp_base.css">
<link rel="stylesheet" type="text/css" href="sp_styles.css">
<link rel="stylesheet" type="text/css" href="sp_layout.css">
</head>
<body>
<header class="row">
<img src="sp_logo.png" alt="Slate & Pencil Tutring" />
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Tutrs</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Your Account</a></li>
<li><a href="#">Chat Online</a></li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul class="row">
<li><a href="#">Math</a></li>
<li><a href="#">Science</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Languages</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Sociology</a></li>
<li><a href="#">Art</a></li>
<li><a href="#">Other</a></li>
</ul>
</nav>
<ul id="topics" class="row">
<li><img src="sp_topic1.png" alt="" />
<p>Our tut
rs have advanced degrees, supplemented with real-world
experience to help you meet your education goals.</p>
</li>
<li><img src="sp_topic2.png" alt="" />
<p>Every session is just you and your instructor and
there is always someone online to help you. 24/7.</p>
</li>
<li><img src="sp_topic3.png" alt="" />
<p>We cover it all: From from Biochemistry to
Beethoven. We can also help you prep for the ACT, SAT, and AP
exams.</p>
</li>
<li><img src="sp_topic4.png" alt="" />
<p>We keep our prices low. Sign up for one-time assistance or enroll
for a full semester at greatly reduced rates.</p>
</li>
</ul>
<hr />
<ul id="comments">
<li><img src="sp_student1.png" alt="" />
<p>“Thanks to <em>Slate & Pencil</em> I passed AP Calculus
with a 5.”<br />
<br />
— Kevin, 12th Grade, Utah</p>
</li>
<li><img src="sp_student2.png" alt="" />
<p>“I use <em>Slate & Pencil</em> all of the time to
supplement my lectures and course notes.”<br />
<br />
— Paul, 12th Grade, Texas</p>
</li>
<li><img src="sp_student3.png" alt="" />
<p>“I'm making the honor roll for the first time thanks to
your wonderful service and help!”<br />
<br />
— Lisa, 11th Grade, Florida</p>
</li>
<li><img src="sp_student4.png" alt="" />
<p>“Geometry is a breeze after working online with your great
tutrs and review materials.”<br />
<br />
— Karen, 9th Grade, Nebraska</p>
</li>
<li><img src="sp_student5.png" alt="" />
<p>“I've seen a great improvement in my use of study time and
I retain more than ever before.”<br />
<br />
— Gianna, 10th Grade, Vermont</p>
</li>
<li><img src="sp_student6.png" alt="" />
<p>“After using <em>Slate & Pencil</em>, my SAT and ACT
scores went through the roof!!!”<br />
<br />
— Todd, 11th Grade, Illinois</p>
</li>
</ul>
<footer>
Slate & Pencil Ttoring; © 2017 All Rights Reserved
</footer>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.