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%;
@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.
@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
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.
@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
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.
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;
}
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?
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:
https://www.flickr.com/photos/angieha/3352038525
to replace the blue background.
TIA for looking
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:/uploads/mozilla/original/3X/8/f/8f8ad0fa6eda8c6ab9505e3bfa8ee7ac6ce10a22.jpeg');
background-size: cover;
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,.