Unit 2 Lesson 11-Images floating left and right

CS Discoveries Coding and Debugging Help
1

Hi All- I am trying to help my students alternate the way that images appear on their webpages by floating one right, and then another left for a more “balanced” design. I am not sure how to do this- particularly when we add caption (for attributions’ sake) into the mix.

Here is a link to an example of what I started to work on in Lesson 11 (step 9)-https://codeprojects.org/hdm2_v3oIXqkA7kC43Kzi2vHuOJteK6KTuDkrkvPbbA

I was able to use the

tage to group the caption and heading together for the first image, and to use the text-align rule to center that caption under the picture. What I can’t seem to do is alternate images back and forth. It seems I must have them all float left or float right. Are there any workarounds? Any isights are appreciated!

2

I should say I was able to use the div tag. It was omitted from the text earlier.

3

Hello,
Welcome to the Teacher Forum. Hope this helps out.

Would adding a margin to the image help you accomplish what you are trying to do? Here is a link to a W3 schools page that could help. Scroll down to examples to see the margin example. HTML img tag

So you can easily access it in the future. I found this in the “Helps and Tips” tab on the lesson page, then I clicked on images, then W3 School Link
Cecilia

4

You could use two classes and have one class float left and the other class float right.

For example: <img class="left" src="dog.jpg" alt="cute puppy">

Then, in the css, you would float the images with the class of left to the left and the images with the class of right to the right.

Lesson 17 shows how to do classes and level 2 of lesson 17 has an example of some images floated to the top while the others are floated to the left, so maybe just sharing that lesson with them would help them to figure out the left and right option.

Hope this helps.

Mike

5

Hi Mike- This is so helpful! I will try this out and let you know how it goes.

6

Hi Cecilia- thank you for this idea. I will give it a try. I am finding there are so many different ways to find a workaround- iut’s part of what makes it challenging- and fun! I appreciate the help!

7

Hi @mwood Thank you again for your suggestion. Classes are very cool! I am a little confused on Lesson 17 step 2 however: I am not sure which rule in CSS is making the top images appear next to each other rather than in a striagh tline down the page. Any insights you have are appreciated! Code.org

8

@dmurr-pinsker

The fact that they are sequential in the code makes them flow left to right across the page. one after the other. Previously, when mixed in with paragraphs, each paragraph is a block element that starts a new line so the images appear on the left because they come before or after a block element.

When displaying more than one in a row, because they are inline elements, they just appear one after another .

You can change that by styling them in the css using the command

img {display:block;}

Here is an article about the difference between block and inline elements: HTML Block and Inline Elements

Hope this helps a little!

Mike

9

Thanks so much @mwood !