Question

In: Computer Science

1. Go to the Footer Styles section and create a style rule that displays the footer...

1. Go to the Footer Styles section and create a style rule that displays the footer only when both margins are clear of floating objects.

2. Go to the Topics Styles section. This section sets the styles for a list of four topics describing what the company is offering. Karen wants this list to also be displayed horizontally on the page. For list items within the ul element with the id topics, create a style rule to: a) display the items as blocks with a width of 20%, b) float the items on the left margin, c) set the size of the left margin space to 0% and the right margin space to 1.5%.

3. 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%.

4. In the same section, create a rule that displays the image within each list item in the topics list as a block with a width of 50% and centered within the list item block.
(Hint: Set the left and right margins to auto.)

5. Go to the Customer Comment Styles section. In this section, you will create style rules for the customer comments displayed near the bottom of the page. For the ul element with the id comments, create a style rule that sets the width to 75% and centers the element by setting the top/bottom margin to 40 pixels and the left/right margin to auto.

6. Karen wants the list items to appear in two columns on the page. In the same section, create a style rule for every list item in the comments list that: a) displays the item as a block with a width of 50% floated on the left and sets the size of the bottom margin to 30 pixels.

7. Every customer comment is accompanied by an image of the student. Karen wants these images displayed to the left of the comment. Create a style rule to display the image within each comment list item as a block with a width of 20%, floated on the left, and with a left/right margin of 5%.

8. Create a style rule for every paragraph nested within a customer list item that floats the paragraph on the left margin with a width of 70%.

CURRENT CODE:

*CSS*

@charset "utf-8";

/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 3
Case Problem 1

Layout styles for Slate and Pencil Tutoring
Author: Joe Chiparo
Date: 9/2/19

Filename: sp_layout.css

*/

/* Window and Body Styles */
html {
height: 100%;
}

body {
width: 95%;   
min-width: 640px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
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;
padding-left: 2%;
padding-right: 2%;
width: 30%;   
}

header > nav > a {
display: block;
width: 100%;
}
/* Horizontal Navigation List Styles */
nav.horizontal li {
display: block;
float: left;
width: 12.5%;
}
/* Topics Styles */
#topics li {
display: block;
width: 20%;
float: left;
margin-left: 0%;
margin-right: 1.5%;
}

#topics li:first-child {
margin-left:7.75%;
}

#topics li:last-child {
margin-right:7.75%;   
}

#topics img {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;   
}
/* HR Styles */
hr {   
width: 50%;
}

/* Customer Comment Styles */
#comments {
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 li img {
display: block;
width: 20%;
float: left;
margin-left: 5%;
margin-right: 5%;
}

li p {
float: left;
width: 70%;
}
/* Footer Styles */
footer {
clear: both;
}

Solutions

Expert Solution

Below is the solution:

index.html:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta charset="utf-8">

<title>Slate &amp; Pencil Tutring</title>

<link href="sp_base.css" rel="stylesheet">

<link href="sp_styles.css" rel="stylesheet">

<link href="sp_layout.css" rel="stylesheet">

</head>

<body>

<header class="row">

<img src="sp_logo.png" >

<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" >

<p>Our tutrs have advanced degrees, supplemented with real-world

experience to help you meet your education goals.</p>

</li>

<li><img src=" sp_topic2.png" >

<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" >

<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" >

<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" >

<p>“Thanks to <em>Slate &amp; Pencil</em> I passed AP Calculus

with a 5.”<br>

<br>

— Kevin, 12th Grade, Utah</p>

</li>

<li><img src=" sp_student2.png" >

<p>“I use <em>Slate &amp; 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" >

<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" >

<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" >

<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" >

<p>“After using <em>Slate &amp; Pencil</em>, my SAT and ACT

scores went through the roof!!!”<br>

<br>

— Todd, 11th Grade, Illinois</p>

</li>

</ul>

<footer>

Slate &amp; Pencil Tutring; © 2017 All Rights Reserved

</footer>

</body>

</html>

sp_layout.css:

@charset "utf-8";

/* Window and Body Styles */

html {

height: 100%;

}

body {

max-width: 960px;

min-width: 640px;

width: 95%;

margin-left: auto;

margin-right: auto;

}

header, ul, nav, li, a {

box-sizing: border-box;

}

/* Row Styles */

.row::after {

clear: both;

content: "";

display: table;

}

/* Page Header Styles */

body>header>img {

display: block;

width: 70%;

float: left;

}

body>header>nav {

display: block;

float: left;

padding-left: 2%;

padding-right: 2%;

width: 30%;

}

body header a {

display: block;

width: 100%;

}

/* Horizontal Navigation List Styles */

.horizontal li {

display: block;

width: 12.5%;

float: left;

}

/* Topics Styles */

#topics ul, #topics li {

display: block;

width: 20%;

float:left;

margin-left: 0%;

margin-right: 1.5%;

}

#topics :first-child {

margin-left: 7.5%;

}

#topics :last-child {

margin-right: 7.5%;

}

#topics img {

display: block;

width: 50%;

margin-left: auto;

margin-right: auto;

}

/* HR Styles */

hr {

width: 50%;

}

/* Customer Comment Styles */

#comments {

width: 75%;

margin-top: 40px;

margin-bottom: 40px;

margin-left: auto;

margin-right: auto;

}

#comments li {

display: block;

width: 50%;

float: left;

margin-bottom: 30px;

}

/* Footer Styles */

footer {

display: block;

clear: both;

}

sp_base.css:

@charset "utf-8";

article, aside, figcaption, figure,

footer, header, main, nav, section {

display: block;

}

address, article, aside, blockquote, body, cite,

div, dl, dt, dd, em, figcaption, figure, footer,

h1, h2, h3, h4, h5, h6, header, html, img,

li, main, nav, ol, p, section, span, ul {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

nav ul {

list-style: none;

list-style-image: none;

}

nav a {

text-decoration: none;

}

body {

line-height: 1;

}

sp_styles.css:

@charset "utf-8";

/* Window and Body Styles */

html {

background-color: rgb(230, 182, 144);

}

body {

background-color: rgb(250, 238, 218);

font-family: Verdana, Geneva, Arial, sans-serif;

}

/* Page Header */

body > header {

background-color: rgb(61, 138, 216);

}

body > header > nav a {

font-size: 1em;

margin: 0.4em 0;

padding: 5px;

}

body > header > nav a:link, body > header > nav:visited {

color: rgb(250, 238, 218);

}

body > header > nav a:hover, body > header > nav:active {

background-color: rgba(0, 0, 0, 0.2);

}

/* Horizontal Navigation List */

nav.horizontal ul li {

background-color: rgb(18, 31, 102);

font-size: 0.9em;

padding: 10px 0;

text-align: center;

}

nav.horizontal a:link, nav.horizontal a:visited {

color: rgb(250, 238, 218);

}

nav.horizontal a:hover, nav.horizontal a:active {

color: rgb(255, 255, 64);

}

/* Topics Styles */

ul#topics {

margin-top: 20px;

margin-bottom: 20px;

}

ul#topics li p {

color: rgb(95, 114, 232);

font-size: 0.8em;

}

/* Customer Comment Styles */

ul#comments li p {

font-size: 0.9em;

color: rgb(121, 121, 121);

line-height: 1.2em;

}

/* Footer Styles */

footer {

color: rgb(186, 186, 156);

background-color: rgb(44, 91, 169);

font-size: 0.9em;

padding: 10px 0px;

text-align: center;

}

sample output:

venereology answered 1 year ago
Next > < Previous

Related Solutions

this is done in HTML In footer, use HTML tags/style of your choice to explain steps...
this is done in HTML In footer, use HTML tags/style of your choice to explain steps you took to add css file and _Layout. Should include the following: Folder structure Short description of what layout does You should not include the content of css or how you defined your css
Leadership Styles Describe each style of leadership and give an example of where each style would...
Leadership Styles Describe each style of leadership and give an example of where each style would be incorporated. Then describe which style works best for you and why.
What are inline styles, embedded styles, and external style sheets? Which would you use to define...
What are inline styles, embedded styles, and external style sheets? Which would you use to define a design for an entire Web site and why? Please type out in text so I can read. Also please be as detailed as possible. Thank you in advance!!!
part 1) if a footer is on a sandy soil with no cohesion the factors to...
part 1) if a footer is on a sandy soil with no cohesion the factors to neglect for estimating bearing capacity per unit area of foundation include (choose all that apply): Group of answer choices Nc Nq Depth of the foundation Dimensions of the Excavation part 2) Drilled piles resisting uplift loads need steel reinforcement: Group of answer choices True False
Students are to research leadership styles to determine a specific leadership style that they would prefer...
Students are to research leadership styles to determine a specific leadership style that they would prefer to work for. Be sure to list what qualities make this style of leadership preferable and why you feel that this style would make you effective compared to other styles you discover in your research. The paper should be no more than 2-3 pages. Find at least 2 scholarly sources to support your choice. Be sure to cite materials used to develop your paper...
What are the major leadership styles? Which style is optimal to use in which situation?
What are the major leadership styles? Which style is optimal to use in which situation?
Write the code in Java: 1. Create a method that displays your name in the console....
Write the code in Java: 1. Create a method that displays your name in the console. This method is void and takes no parameters. Make an app that runs the method in response to a button press. 2. Create a version of the method in #1 that takes the text (String) to be displayed as a parameter. Allow the user to enter the text in a dialog box or text field and display that text in the console. Be sure...
Name (2) Parenting Styles. Tell what are the Pro's and Con's in each style in raising...
Name (2) Parenting Styles. Tell what are the Pro's and Con's in each style in raising an Adolescent. (focus on the teenage years) Use facts, research and your opinion.
compare and contrast autocratic leadership and democratic leadership styles and the effect each style of leadership...
compare and contrast autocratic leadership and democratic leadership styles and the effect each style of leadership has on an organization and team positive and negative
As I read the style breakdown, I definitely identified many of the personality styles in several...
As I read the style breakdown, I definitely identified many of the personality styles in several of my fellow ASMs at work. Its also interesting to note that we have placed each other in our Hogwarts houses (Harry Potter reference) which prior to reading this had helped inform me of personality types. Obviously this sorting is not anywhere as scientific as our reading material, but some of the general traits are there, and we have the list posted in our...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT