Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
I am working on a CSS file. I have everything working except for my columns for the three images. My footer is at the top of my page covering the header. I have ran my code through multiple CSS validators and I cant figure out where I am going wrong. I have spent quite a few hours trying to figure out this parsing and tried just about every solution I could come up with. I am lost and confused    body {    width: 95%;    min-width: 640px;    max-width: 960px;    margin: auto;    } /* Image Styles */ img {    display: block;    max-width: 100%;    height: auto;    } /* Horizontal Navigation Styles */ .horizontal li {    display: block;    float: left;    width: 16.66%; } nav li a {    display: block; } /* Grid Styles */ body {    display: grid;    grid-template-columns: 2fr 1fr;    column-gap: 20px; }   body > header,   body > footer {    grid-row: 1;    grid-column: 1 / -1; } #sub {    display: grid;    grid-template-rows: repeat (3, 1fr);    grid-template-columns: repeat (1fr, 3); } /* Specials Styles */ .specials {    min-height: 400px;    outline: 1px dashed rgb(71, 52, 29);    } /* Award Styles */ aside {    position: relative;    height: 650px;    overflow: auto;   }   aside div {    position: absolute;    width: 30%; } #award1 {    top: 80px;    left: 5%; } #award2 {    top: 280px;    left: 60%;     } #award3 {    top: 400px;    left: 20%; } #award4 {    top: 630px;    left: 45%; } #award5 {    top: 750px;    left: 5%; } body > footer { clear: both; } aside {    position: relative;    height: 650px;    overflow: auto;   }   aside div {    position: absolute;    width: 30%; } #award1 {    top: 80px;    left: 5%; } #award2 {    top: 280px;    left: 60%;     } #award3 {    top: 400px;    left: 20%; } #award4 {    top: 630px;    left: 45%; } #award5 {    top: 750px;    left: 5%; } body > footer {    clear: both;    }

I am working on a CSS file. I have everything working except for my columns for the three images. My footer is at the top of my page covering the header. I have ran my code through multiple CSS validators and I cant figure out where I am going wrong. I have spent quite a few hours trying to figure out this parsing and tried just about every solution I could come up with. I am lost and confused    body {    width: 95%;    min-width: 640px;    max-width: 960px;    margin: auto;    } /* Image Styles */ img {    display: block;    max-width: 100%;    height: auto;    } /* Horizontal Navigation Styles */ .horizontal li {    display: block;    float: left;    width: 16.66%; } nav li a {    display: block; } /* Grid Styles */ body {    display: grid;    grid-template-columns: 2fr 1fr;    column-gap: 20px; }   body > header,   body > footer {    grid-row: 1;    grid-column: 1 / -1; } #sub {    display: grid;    grid-template-rows: repeat (3, 1fr);    grid-template-columns: repeat (1fr, 3); } /* Specials Styles */ .specials {    min-height: 400px;    outline: 1px dashed rgb(71, 52, 29);    } /* Award Styles */ aside {    position: relative;    height: 650px;    overflow: auto;   }   aside div {    position: absolute;    width: 30%; } #award1 {    top: 80px;    left: 5%; } #award2 {    top: 280px;    left: 60%;     } #award3 {    top: 400px;    left: 20%; } #award4 {    top: 630px;    left: 45%; } #award5 {    top: 750px;    left: 5%; } body > footer { clear: both; } aside {    position: relative;    height: 650px;    overflow: auto;   }   aside div {    position: absolute;    width: 30%; } #award1 {    top: 80px;    left: 5%; } #award2 {    top: 280px;    left: 60%;     } #award3 {    top: 400px;    left: 20%; } #award4 {    top: 630px;    left: 45%; } #award5 {    top: 750px;    left: 5%; } body > footer {    clear: both;    }

New Perspectives on HTML5, CSS3, and JavaScript
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
Section3.3: Visual Overview: Layout With Positioning Styles
Problem 7QC
See similar textbooks
icon
Related questions
Question

I am working on a CSS file. I have everything working except for my columns for the three images. My footer is at the top of my page covering the header. I have ran my code through multiple CSS validators and I cant figure out where I am going wrong. I have spent quite a few hours trying to figure out this parsing and tried just about every solution I could come up with. I am lost and confused 

 

body {
   width: 95%;
   min-width: 640px;
   max-width: 960px;
   margin: auto;
   }

/* Image Styles */
img {
   display: block;
   max-width: 100%;
   height: auto;
   }
/* Horizontal Navigation Styles */
.horizontal li {
   display: block;
   float: left;
   width: 16.66%;
}
nav li a {
   display: block;
}
/* Grid Styles */
body {
   display: grid;
   grid-template-columns: 2fr 1fr;
   column-gap: 20px;
}
  body > header,
  body > footer {
   grid-row: 1;
   grid-column: 1 / -1;
}
#sub {
   display: grid;
   grid-template-rows: repeat (3, 1fr);
   grid-template-columns: repeat (1fr, 3);
}

/* Specials Styles */
.specials {
   min-height: 400px;
   outline: 1px dashed rgb(71, 52, 29);
   }

/* Award Styles */
aside {
   position: relative;
   height: 650px;
   overflow: auto;
  }
  aside div {
   position: absolute;
   width: 30%;
}
#award1 {
   top: 80px;
   left: 5%;
}
#award2 {
   top: 280px;
   left: 60%;    
}
#award3 {
   top: 400px;
   left: 20%;
}
#award4 {
   top: 630px;
   left: 45%;
}
#award5 {
   top: 750px;
   left: 5%;
}
body > footer {
clear: both;
}
aside {
   position: relative;
   height: 650px;
   overflow: auto;
  }
  aside div {
   position: absolute;
   width: 30%;
}
#award1 {
   top: 80px;
   left: 5%;
}
#award2 {
   top: 280px;
   left: 60%;    
}
#award3 {
   top: 400px;
   left: 20%;
}
#award4 {
   top: 630px;
   left: 45%;
}
#award5 {
   top: 750px;
   left: 5%;
}
body > footer {
   clear: both;
   }
W3C CSS Validator results for TextArea (CSS level 3 + SVG) Sorry! We found the following errors (4) URI: TextArea 14 #sub 14 #sub 15 16 body { Valid CSS information } [repeat is not a grid-template-rows value : [{repeat] Parse Error (3, 1fr); Parse Error grid-template-columns: repeat (1fr, 3); Parse Error } VALIDATOR } display grid; grid-template-columns : 2fr 1fr; column-gap 20px; : body> header, body > footer { grid-row 1; grid-column 1 / -1;
Transcribed Image Text:W3C CSS Validator results for TextArea (CSS level 3 + SVG) Sorry! We found the following errors (4) URI: TextArea 14 #sub 14 #sub 15 16 body { Valid CSS information } [repeat is not a grid-template-rows value : [{repeat] Parse Error (3, 1fr); Parse Error grid-template-columns: repeat (1fr, 3); Parse Error } VALIDATOR } display grid; grid-template-columns : 2fr 1fr; column-gap 20px; : body> header, body > footer { grid-row 1; grid-column 1 / -1;
Expert Solution
steps

Step by step

Solved in 3 steps

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Knowledge Booster
Hyperlinks
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
New Perspectives on HTML5, CSS3, and JavaScript
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning
SEE MORE TEXTBOOKS