Help on HTML/CSS Interaction

Language Help HTML
1

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
This is not an exercise on Codecademy but I need help on HTML/CSS interaction.
<In what way does your code behave incorrectly? Include ALL error messages.>
There are no errors but when i align my image it does not re-size and when I re-size it it does not align.
<What do you expect to happen instead?>
I expect it to align and re-size it. Below is the clip of HTML/CSS. I need the div because I am trying to make two images different align and size.


<div class="img1"><img src="HD.gif" alt="Hurricane Dennis"></div>

.img1 {
  display: block;
  margin: 0 auto;
  max-width: 304px;
  max-height: 228px;
}

Full HTML/CSS documents:

<!DOCTYPE html>
<html lang="en-US">
  
<head>
    <meta charset="utf-8">
    <title>CBSapp</title>
    <link href="styles/main.css" rel="stylesheet">
</head>

<body>
  
    <div class="HD"><h1>Hurricane Dennis</h1></div>
    
    <div class="img1"><img src="HD.gif" alt="Hurricane Dennis"></div>
    
    <h2>What is a Hurricane?</h2>
    
    <p>A hurricane is a humongous swirling storm that form over warm ocean waters. Hurricanes are classified into five categories:
</p>

    <ul>
      <li>1: Winds 74-95 mph</li>
      <li>2: Winds 96-110 mph</li>
      <li>3: Winds 111-129 mph</li>
      <li>4: Winds 130-156 mph</li>
      <li>5: Winds 157+ mph</li>
    </ul>
    
    <p>There is also 2 non-hurricane classifications which are:</p>
    
    <ul>
      <li>Tropical Depression: Winds  	&lt;39mph</li>
      <li>Tropical Storm: Winds 39-73 mph</li>
    </ul>
    
    <br>
    
    <h2>The Path of Hurricane Dennis</h2>
    
    <p>Hurricane Dennis existed from July 4th - July 13th 2005. This is an image of Hurricane Dennis’s  path with the legend in the middle. On the right is a bolded version.</p>
    <!--
    <bdi class="img2"><img src="POD.jpg" alt="Path of Hurricane Dennis"></bdi><img src="PODL.png" alt="Legend for Path of Hurricane Dennis">
    -->
    <br><br><a href="https://scratch.mit.edu/projects/100585490/#player" target="_blank">Scratch Project about Hurricane Dennis</a>
</body>
</html>



body {
  background-color: orange;
  font-family: "Comic Sans MS", cursive, sans-serif
}

.HD {
  text-align: center;
  color: black;
}

p {
  font-weight: bold;
  font-size: 20px;
}

ul {
  font-weight: bold;
  font-size: 20px;
}

a {
  font-size: 20px;
}

/* img {
  width: 304px;
  height: 228px;
  display: block;
  margin: 0 auto;
} */

.img1 {
  display: block;
  margin: 0 auto;
  max-width: 304px;
  max-height: 228px;
}
2

I don’t understand what you want to achieve, i put your code in a bin, why not simple add the img1 class to the image?

3

How do you simply add the img1 class to the image? I thought I did with the <div class="img1"></div>.

4

I did that in the bin? You can see it there

5

@cbstockdale To do that, you’d just apply the class to the img tag, rather than the div tag, like so:

<img src="HD.gif" alt="Hurricane Dennis" class="img1">

And delete the class from the div tag.

6

uhm… @quobogeba, image tag are self closing: <img>. Plus, an image has multiply attributes.

@cbstockdale, you can just add a attribute (class) to the image tag, in the same fashion as src and alt

7

@stetim94 Oops! Forgot about that. Been a while since I’ve worked with images in HTML xD @cbstockdale Sorry for the misleading information!

8

THANK YOU can you do that to all tags?

9

@cbstockdale You could, if you wanted, but for this lesson, you’re only required to do it to the ones they tell you to :slightly_smiling:

11

What is covered in the lessons, is only the beginning, there is so much more possible, and what you can do.