QUESTION: Row & Page Header Styles Go to the Row Styles section. Karen has placed all elements that should be treated as grid rows in the row class. For every element of the row class, create a style rule that expands the element to cover any floating content within the element. (Hint: Use the technique shown in the tutorial that employs the after pseudo-element.) Go to the Page Header Styles section. In this section, you will create styles for the content of the body header. Create a style rule for the logo image within the body header that displays the image as a block with a width of 70% of the header, floated on the left margin. The header also contains a navigation list that Karen wants to display vertically. Create a style rule for the nav element within the body header that: floats the navigation list on the left, sets the size of the left and right padding to 2%, sets the width of the navigation list to 30% of the width of the header. The hypertext links in the navigation list should be displayed as blocks. Create a style rule for every a element in the header navigation list that displays the element as a block with a width of 100%. Horizontal Navigation List Styles Go to the Horizontal Navigation List Styles section. Karen has added a second navigation list that she wants to display horizontally. For all list items within the horizontal navigation list, create a style rule that displays the items as blocks with a width of 12.5% floated on the left margin. CODE BELOW: @charset "utf-8"; /* New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 3 Case Problem 1 Layout styles for Slate and Pencil Tutoring Author: Date: Filename: sp_layout.css */ /* Window and Body Styles */ html { height: 100%; } body { width: 95%; min-width: 640px; max-width: 960px; margin: 0 auto; min-height: 100%; } header, ul, nav, li, a { box-sizing: border-box; } /* Row Styles */ /* Page Header Styles */ /* Horizontal Navigation List Styles */ .horizontal-nav { list-style-type: none; padding: 0; margin: 0; } .horizontal-nav li { display: inline-block; } .horizontal-nav a { display: block; padding: 10px; text-decoration: none; color: #000; } /* Topics Styles */ /* HR Styles */ hr { width: 50%; } /* Customer Comment Styles */ /* Footer Styles */ footer { clear: both; }

QUESTION: Row & Page Header Styles Go to the Row Styles section. Karen has placed all elements that should be treated as grid rows in the row class. For every element of the row class, create a style rule that expands the element to cover any floating content within the element. (Hint: Use the technique shown in the tutorial that employs the after pseudo-element.) Go to the Page Header Styles section. In this section, you will create styles for the content of the body header. Create a style rule for the logo image within the body header that displays the image as a block with a width of 70% of the header, floated on the left margin. The header also contains a navigation list that Karen wants to display vertically. Create a style rule for the nav element within the body header that: floats the navigation list on the left, sets the size of the left and right padding to 2%, sets the width of the navigation list to 30% of the width of the header. The hypertext links in the navigation list should be displayed as blocks. Create a style rule for every a element in the header navigation list that displays the element as a block with a width of 100%. Horizontal Navigation List Styles Go to the Horizontal Navigation List Styles section. Karen has added a second navigation list that she wants to display horizontally. For all list items within the horizontal navigation list, create a style rule that displays the items as blocks with a width of 12.5% floated on the left margin. CODE BELOW: @charset "utf-8"; /* New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 3 Case Problem 1 Layout styles for Slate and Pencil Tutoring Author: Date: Filename: sp_layout.css / / Window and Body Styles / html { height: 100%; } body { width: 95%; min-width: 640px; max-width: 960px; margin: 0 auto; min-height: 100%; } header, ul, nav, li, a { box-sizing: border-box; } / Row Styles / / Page Header Styles / / Horizontal Navigation List Styles / .horizontal-nav { list-style-type: none; padding: 0; margin: 0; } .horizontal-nav li { display: inline-block; } .horizontal-nav a { display: block; padding: 10px; text-decoration: none; color: #000; } / Topics Styles / / HR Styles / hr { width: 50%; } / Customer Comment Styles / / Footer Styles */ footer { clear: both; }

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter3: Designing A Page Layout: Creating A Website For A Chocolatier

Section: Chapter Questions

Problem 6CP1

See similar textbooks

Row & Page Header Styles

Go to the Row Styles section. Karen has placed all elements that should be treated as grid rows in the row class. For every element of the row class, create a style rule that expands the element to cover any floating content within the element. (Hint: Use the technique shown in the tutorial that employs the after pseudo-element.)

Go to the Page Header Styles section. In this section, you will create styles for the content of the body header. Create a style rule for the logo image within the body header that displays the image as a block with a width of 70% of the header, floated on the left margin.

The header also contains a navigation list that Karen wants to display vertically. Create a style rule for the nav element within the body header that:

floats the navigation list on the left,
sets the size of the left and right padding to 2%,
sets the width of the navigation list to 30% of the width of the header.

The hypertext links in the navigation list should be displayed as blocks. Create a style rule for every a element in the header navigation list that displays the element as a block with a width of 100%.

Horizontal Navigation List Styles

Go to the Horizontal Navigation List Styles section. Karen has added a second navigation list that she wants to display horizontally. For all list items within the horizontal navigation list, create a style rule that displays the items as blocks with a width of 12.5% floated on the left margin.

CODE BELOW:

@charset "utf-8";

New Perspectives on HTML5 and CSS3, 7th Edition

Tutorial 3

Case Problem 1

Layout styles for Slate and Pencil Tutoring

Author:

Date:

Filename: sp_layout.css

/* Window and Body Styles */

html {

height: 100%;

}

body {

width: 95%;

min-width: 640px;

max-width: 960px;

margin: 0 auto;

min-height: 100%;

}

header, ul, nav, li, a {

box-sizing: border-box;

}

/* Row Styles */

/* Page Header Styles */

/* Horizontal Navigation List Styles */

.horizontal-nav {

list-style-type: none;

padding: 0;

margin: 0;

}

.horizontal-nav li {

display: inline-block;

}

.horizontal-nav a {

display: block;

padding: 10px;

text-decoration: none;

color: #000;

}

/* Topics Styles */

/* HR Styles */

hr {

width: 50%;

}

/* Customer Comment Styles */

/* Footer Styles */

footer {

clear: both;

}

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 4 steps with 2 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions