What I need to do :) Go to the code_scroll.css file and create a style rule...

Question

Question

What I need to do :) Go to the code_scroll.css file and create a style rule...

What I need to do :)

Go to the code_scroll.css file and create a style rule for the section element with the id container with the following styles:

1. Set the width of the element to 900 pixels and the height to 370 pixels.

2. Horizontally center the element by adding a 10 pixel top/bottom margin and set the left/right margin to auto.

3. Place the element with relative positioning, setting the top value to 30 pixels and the left value to 0 pixels.

4. Add a 2 pixel solid brown outline to the element.

5. Have the browser automatically display scrollbars for any overflow content.

- 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.

- Display every inline image as a block-level element with a width and height of 300 pixels.

What I have so far...

@charset "utf-8";

/*

New Perspectives on HTML5 and CSS3, 8th Edition

Tutorial 3

Coding Challenge 3

Author: Alexandria Woodson

Date:10/21/2020

Filename: code3-3_scroll.css

*/

html{

overflow: auto;

}

#container{

overflow: auto;

position: relative;

left: 0px;

top: 30px;

outline-style: solid;

outline-color: brown;

outline-width: 2px;

height:370px;

width:900px;

margin-top: 10px;

margin-right: auto;

border: 2px solid brown;

}

div{

overflow: auto;

display: inline-block;

position: absolute;

height:330px;

width:300px;

}

img { width: 300px; height: 300px; }

#slide1

{

left: 0px;

}

#slide2

{

left:300px;

}

#slide3

{

left:600px;

}

#slide4

{

left:900px;

}

#slide5

{

left:1200px;

}

#slide6

{

left:1500px;

}

#slide7

{

left:1800px;

}

#slide8

{

left:2100px;

}

#slide9

{

left:2400px;

}

can anyone help with the CORRECT solution?

Engineering Computer-Science

0 0

Add a comment Transcribed image text

Answer 1

Answer #1

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>HTML CSS Tuto</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <section id="container">
        <div id="slide1">
          <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
        </div>
        <div id="slide2">
           <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
        </div>
        <div id="slide3">
           <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
        </div>
        <div id="slide4">
           <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
        </div>
        <div id="slide5">
           <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
        </div>
        <div id="slide6">
           <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
        </div>
        <div id="slide7">
           <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
        </div>
        <div id="slide8">
           <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
        </div>
        <div id="slide9">
           <img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" />
        </div>
    </section>
  </body>
</html>

CSS:

section#container {
  width: 900px;
  height: 370px;
  margin: 10px auto;
  position: relative;
  top: 30px;
  left: 0px;
  outline: 2px solid brown;
  overflow: auto;
}

section > div[id^="slide"] {
  width: 300px;
  height: 330px;
  position: absolute;
}

#slide1 {
  left: 0px;
}

#slide2 {
  left: 300px;
}

#slide3 {
  left: 600px;
}

#slide4 {
  left: 900px;
}

#slide5 {
  left: 1200px;
}

#slide6 {
  left: 1500px;
}

#slide7 {
  left: 1800px;
}

#slide8 {
  left: 2100px;
}

#slide9 {
  left: 2400px;
}

img { 
  width: 300px; 
  height: 300px; 
  display: block;
}

Updated with some changes. Please take a look and let me know if you have any doubts.

0 0

Add a comment

What I need to do :) Go to the code_scroll.css file and create a style rule...

Homework Answers

Post as a guest

Earn Coins

Not the answer you're looking for?

Similar Questions

nav.horizontal ul { width: 100%; display: grid; grid-template-columns: repeat (5, 1fr); } nav.horizontal ul li {...

TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error...

Aqueous HBr reacts with solid NaOH to produce sodium bromide NaBr and liquid water. What is...

I have trouble in my code with - Create and append the fancySheet link element to...

Challenge 5 Read ALL of the instructions carefully before starting the exercise! Dear Colleague, Earlier today...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...

Need Online Homework Help?

Active Questions