Question
You can use the CSS positioning and overflow styles to create a scrolling slideshow. Figure 381 shows an example of a slideshow consisting of nine
You can use the CSS positioning and overflow styles to create a scrolling slideshow. Figure 381 shows an example of a slideshow consisting of nine sketches by Renaissance masters. Youve been given the HTML code for this document and youve been asked to write the style rules to generate the slideshow. Tasks 1. Open the file code3-3.html and code3-3_scroll.css and in the comment section enter your name (First + Last) and the date (MM/DD/YYYY) into the Author: and Date: fields of each file. 2. Go to the code3-3.html file and within the head section insert the link element linking the code3-3_scroll.css style sheet file. Review the contents of the file. 3. . Go to the code_scroll.css file and create a style rule for the section element with the id container with the following styles: Set the width of the element to 900 pixels and the height to 370 pixels. Horizontally center the element by adding a 10 pixel top/bottom margin and set the left/right margin to auto. Place the element with relative positioning, setting the top value to 30 pixels and the left value to 0 pixels. Add a 2 pixel solid brown outline to the element. Have the browser automatically display scrollbars for any overflow content. 4. Create a style rule for every div element, setting the width to 300 pixels and the height to 330 pixels. Position the element with absolute positioning. There are nine div elements with ids ranging from slide1 to slide9. Set the left position of the elements in 300 pixel increments starting with 0 pixels for slide1, 300 pixels for slide2, 600 pixels for slide3, and so forth up to 2400 pixels for slide9. 5.Display every inline image as a block-level element with a width and height of 300 pixels. 6.Open the page in your browser. Verify that the nine images are displayed within a scroll box and that you can using a horizontal scrollbar to scroll through the image list. Code 3-3.html:
Coding Challenge 3-3
Artist Sketchbook
Heads of the Apostles - Raphael
Battle Scene - Leonardo da Vinci
Head of a Maid - Pontormo
Prophet - Giorgio Vasari
Head of a Maid - Peter Paul Rubens
Woman's Portrait - Andre del Sarto
Shepherd Boy - Giovanni Battista Piazzetta
Battle Scene - Michelangelo
Self Portrait - Rembrandt
Code 3-3.css: @charset "utf-8"; /* New Perspectives on HTML5 and CSS3, 8th Edition Tutorial 3 Coding Challenge 3 Author: Date: Filename: code3-3.css */ body { margin: 30px auto; } section#container { background-color:burlywood; } h1 { text-align: center; font-size: 3em; font-weight: normal; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; } p { text-align: center; font-size: 1.1em; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; margin: 0px; } code 3-3.css_scroll.css: @charset "utf-8"; /* New Perspectives on HTML5 and CSS3, 8th Edition Tutorial 3 Coding Challenge 3 Author: Date: Filename: code3-3_scroll.css */
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started