Having some trouble with CSS; can you please help? Directions: Table Styles Go t
ID: 3911066 • Letter: H
Question
Having some trouble with CSS; can you please help?
Directions:
Table Styles
Go to the Marquee Styles section and insert a style rule that places the marquee div element with relative positioning. Add a style rule for the table nested within the marquee div element that places the table using absolute positioning. Do not specify any coordinates for either element.
Keyframe
Go to the Keyframe Styles section and create an animation named scrollwith the following two key frames:
at 0%, set the value of the top property to 250px and
at 100%, set the value of the top property to –1300px
Scroll Animation
Go to the Animation Styles section and apply the scroll animation to the table within the marquee div element over a duration of 50 seconds using linear timing within infinite looping
Maxine wants the marquee to stop scrolling whenever the user hovers the mouse pointer over it. Add a style rule for the div#marquee:hover tableselector that pauses the animation during the hover event.
Here's what I have:
@charset "utf-8";
/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 8
Review Assignment
Cinema Penguin Styles for Animation
Author:
Date:
Filename: cp_animate2.css
*/
/* Marquee Styles */
/* Keyframe Styles */
/* Animation Styles */
Explanation / Answer
Here is the CSS file:
CSS File:
@charset "utf-8";
/*
New Perspectives on HTML and CSS, 7th Edition
Tutorial 8
Review Assignment
Cinema Penguin Styles for Animation
Author:
Date:
Filename: cp_animate2.css
*/
/* Marquee Styles */
.marquee {
position: relative;
}
.marquee table {
position: absolute;
}
/* Keyframe Styles */
@keyframes scroll {
0% {top: 250px;}
100% {top: -1300px;}
}
/* Animation Styles */
.marquee table {
animation: scroll 50s linear infinite;
}
.marquee table:hover {
animation-play-state: paused
}
Hope this is helpful. Kindly test your html page with the css file.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.