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; }

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

Related questions

Question

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;

Expert Solution

Step by step

Solved in 3 steps

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.