Can't get three images on one line

Vince_Caruso · May 11, 2020, 5:26pm

I added a gif in my footer and decided to add a jpg on either side. left and center image cooperate, but right image goes to the line underneath.

This is the HTML

<img src='images/monkey-left.jpg' width='200' height='200' class='left'>

<img src='https://i.somethingawful.com/u/garbageday/2012/phriday/banana_swords/Yabanjin_01.gif' width='200'

  height='200' class='center'>

<img src='images/monkey-right.jpg' width='200' height='200' class='right'>

and this is the CSS

the end result is

Left Center
right

can anyone point me in the right direction.

TIA

.center {

display: block;

margin-left: auto;

margin-right: auto;

width: 50%;

}

.right {

float: right;

display: block;

width: 25%;

chrisdavidmills · May 12, 2020, 10:53am

@Vince_Caruso you’d be much better off using a modern layout tool like flexbox to do this.

For example, if your images are wrapped in a footer:

<footer>
  <img>
  <img>
  <img>
</footer>

You then set the container as a flex container:

footer {
  display: flex;
}

And then if you want the second/center image to be twice as wide as the others, you could do this:

img:nth-of-type(1), img:nth-of-type(3) {
  flex: 1;
}

img:nth-of-type(2) {
  flex: 2;
}

This would also be responsive across different viewport widths.

Vince_Caruso · May 12, 2020, 12:15pm

@chrisdavidmills

Thanks, that worked. I’ve done 5 HTML courses and not one of them talked about this feature, which leads me to believe that most of the courses are still based on stuff from 3 or more years ago (I know one had an intro video “what is HTML” that was from 2012).

So this actually leads me to a question of studying. If I was to scrap all the HTML/CSS course I’m working with (Bootcamp prep from: Kenzie, Flatiron, Springboard; Websites: codecademy, FreeCodeCamp.org; Apps: Sololearn and grasshopper) Are there any free resources that actually teach HTML5 instead of ancient material on HTML?

As always,
TIA
Vince

chrisdavidmills · May 13, 2020, 1:13pm

Well, there’s our stuff

Honestly, I don’t know that much about coding bootcamps and their course quality. FreeCodeCamp has a pretty good reputation. And I’ve worked through quite a lot of codecademy stuff myself, and found it to be pretty good.

One word of advice — even the term HTML5 is a big out of date these days. These days we just talk about “HTML”, and its associated APIs. For example you have the <video> and <audio> elements, and the HTMLMediaElement API, which allows you to use JavaScript to write custom controls like play and pause buttons, time indicators, etc.

Then again, HTML is pretty stable, and has been for a while. Most HTML material is probably OK, as long as it:

Teaches accessible practices, for example making sure images have alt text, form inputs have associated labels, and HTML structure is using proper semantic elements (i.e. not just <div> soup, and not using <br><br> for paragraph breaks)
Doesn’t use outdated presentational markup and attributes, like <center> or bgcolor.
Doesn’t write HTML elements in all caps, e.g. <DIV></DIV>. That is a dead giveaway that the content is ancient.

Hope that helps.

Vince_Caruso · May 13, 2020, 1:43pm

@chrisdavidmills

It’s funny the things you pointed out because it’s the

that’s everywhere in what I’m seeing (even on Codecademy). I saw a video (I can’t remember the name) that talked about code littered with

being a sign of a lazy coder. So that part I definitely got.

The second one though - what has and bgcolor been changed to? Because that’s all I see.

As far as HTML I’ve finished all those mentioned, and from here will be doing the course at MDN and FreeCodeCamp.org. (after that I am considering Coursera and alison)… I realize it seems like I’m jumping from place to place, but I’m really just sticking with HTML and CSS (and CSS is the one that’s giving me grief) until I can do it without looking at someone else’s instruction. I want to know that I “know” it before jumping into javascript… But I"m hoping that will be by this weekend or early next week.

As aways - TIA
Vince

chrisdavidmills · May 13, 2020, 2:06pm

Argh, that’s not good. I’m surprised you see them so much still!

For any presentational HTML features, you should use the equivalent CSS instead:

Instead of <center>, you should set the CSS text-align: center property on the element in question.
Instead of using bgcolor, set the CSS background-color property on the element in question.

It makes sense to use several different resources — no shame in that.

Vince_Caruso · May 13, 2020, 2:21pm

On the bgcolor, I misunderstood… I am doing that in CSS.

However on the comment, I looked at my code and saw that I had both in the HTML and content-align in the CSS. But when I removed the from HTML, the text all moved to the left.

I coded this:

<meta charset="utf-8" />

<title>Spankie's Intro</title>

<link href="styles/style.css" rel="stylesheet" />

<link

  href="https://fonts.googleapis.com/css?family=Merriweather&display=swap"

  rel="stylesheet"

/>

<center>

  <h1>Spankie B. Hungry</h1>

  <img

    src="https://i.imgflip.com/as2y2.jpg"

    width="400"

    height="400"

    alt="shocked monkey in a green polks dot shirt"

  />

  <p>This is Spankie</p>

  <p>

    You notice that Spankie is a littled shocked that you showed up without

    anything to eat. After all, you know that no one will sell him a mask so

    he can go out shopping.

  </p>

  <p>However, there is a solution:</p>

  <ul>

    <li>Go to Walmart</li>

    <br />

    <li>buy some madeleines <br />(they're his favorite)</li>

    <br />

    <li>

      <b><i>Feed the Monkey!</i></b>

    </li>

  </ul>

  <p>

    If you don't have a mask yourself, you can always go online to <br />

    <a href="https://www.amazon.com/">Amazon</a>. <br />Just make sure to

    ship the madeleines to his address.

  </p>

</center>

<footer>

  <img

    style="border: 0; display: box; margin: left;"

    src="http://1.bp.blogspot.com/-lnVcvfUAyRk/UgyCuTuIsjI/AAAAAAAAFDQ/YQHylsAmqJQ/s1600/9.+Thinking.jpg"

    width="300"

    height="300"

  />

  <img style='margin: center';

  src='https://img.memecdn.com/lord-of-the-bananas_o_894338.gif' width:'300'

  height='300'> <img style=" border: 0; display: box; margin: right;

  -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1);

  -webkit-transform: scale-(1, 1); transform: scale(-1, 1); margin-top:

  autox; "

  src='http://1.bp.blogspot.com/-lnVcvfUAyRk/UgyCuTuIsjI/AAAAAAAAFDQ/YQHylsAmqJQ/s1600/9.+Thinking.jpg'

  width="300" height="300"

</footer>

and it works fine, however when I removed the
it aligned to the left even though I had this in CSS:
body {

align-content: ‘center’;

width: 50%;

margin: 10% auto;

background-color: gold;

padding: 10px 10px 20px 20px;

border: 5px solid black;

}

chrisdavidmills · May 13, 2020, 2:32pm

Ah, I see what you’re doing now.

So you’re setting your <body> to 50% of the width of the viewport.

margin: 10% auto; should center the body inside the viewport.

You don’t need align-content: ‘center’;. That’s a flexbox thing, and you don’t have body set to be a flex container, so that won’t do anything.

But it is still not centering?

Do you have this code running live on a site somewhere, so I can have a play with it?

Vince_Caruso · May 13, 2020, 4:11pm

Okay, I worked some of the problems out. Don’t know if the code would be considered old or new but it seems to work. (except on Sololearn where for some reason it shows up like a picasso… and can’t save it when I make the changes so no like there)

however i did put it on codepen. Tried to list the codepen link but it just shows up as a gapping blank in the post, so I’ll try this way

codepen.
io
vincecaruso/
pen/
pojKPdr

Two things - trying to resize the gif to match the side by side jpgs.

Then I can’t seem to get this:

to replace the blue background.

TIA for looking

chrisdavidmills · May 15, 2020, 8:40am

however i did put it on codepen. Tried to list the codepen link but it just shows up as a gapping blank in the post, so I’ll try this way

Heh, fortunately it shows up in the email notification I got of your post, so I am able to see it! If you wrote it as a markdown link, it might work better, for example here is a link to it. You do that by surrounding the link text in square brackers, and then including the URL to link to in parentheses immediately after it.

So, looks like you are centered, which is good news.

In terms of making the gif the same height as the other footer images, you could immediately fix this by setting display: flex on the <img>'s parent section.

Or even better, you could get rid of the sections so your markup is of this structure:

<footer>
  <img><img></img>
</footer>

And then use the CSS that I showed you a few messages ago.

For the background image, try setting these on your <html> element:

background-image: url('https://discourse-prod-uploads-81679984178418.s3.dualstack.us-west-2.amazonaws.com/original/3X/8/f/8f8ad0fa6eda8c6ab9505e3bfa8ee7ac6ce10a22.jpeg');
background-size: cover;

Vince_Caruso · May 15, 2020, 11:48am

Thanks again,

This is what I came up with in the interim:

    <section class="column">

    <img

      src="http://1.bp.blogspot.com/-lnVcvfUAyRk/UgyCuTuIsjI/AAAAAAAAFDQ/YQHylsAmqJQ/s1600/9.+Thinking.jpg"

      alt="baboon-left"

      style="width: 100%;"

    />

</section>

<section class="column">

    <img

      src="https://img.memecdn.com/lord-of-the-bananas_o_894338.gif"

      alt="LOTR-Banana"

      style="width: '150';"

    />

</section>

<section class="column">    

    <img class="flip"

      src="http://1.bp.blogspot.com/-lnVcvfUAyRk/UgyCuTuIsjI/AAAAAAAAFDQ/YQHylsAmqJQ/s1600/9.+Thinking.jpg"

      alt="baboon-right"

      style="width: 100%;"

    />

  </section>

</footer>

and moded it in CSS

Thanks again,.