Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
QUESTION:    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 */ .row {   display: table;   clear: both;   width: 100%;   *zoom: 1; } .row:before, .row:after {

QUESTION:    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 */ .row {   display: table;   clear: both;   width: 100%;   *zoom: 1; } .row:before, .row:after {

Database System Concepts
Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
See similar textbooks
icon
Related questions
Question

QUESTION: 

 

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 */

.row {
  display: table;
  clear: both;
  width: 100%;
  *zoom: 1;
}

.row:before,
.row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}



/* Page Header Styles */

header img {
  display: block;
  width: 70%;
  float: left;
}

header nav {
  float: left;
  padding: 0 2%;
  width: 30%;
}

header nav a {
  display: block;
  width: 100%;
}



/* Horizontal Navigation List Styles */
#services {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#services li {
  display: block;
  width: 12.5%;
  float: left;
}

/* 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 li img {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}






/* HR Styles */
hr {
  width: 50%;
}



/* Customer Comment Styles */


/* Footer Styles */

footer {
  clear: both;
}


 

Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 3 steps

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Knowledge Booster
Properties of CSS
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
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education
SEE MORE TEXTBOOKS