Using the hr Element

Using the hr Element
0

#1

Tell us what’s happening:
What am I doing wrong? I added the hr tag between h4 and p, but its still saying the hr tag should come between the title and paragraph. Thing is, it does, its under Alphabet and over the paragraph. I’m lost :expressionless:

Capture

Your code so far


<style>
  h4 {
    text-align: center;
    height: 25px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4><del>Google</del>Alphabet</h4>
      <hr></hr>
      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element


#2

Just <hr>, without the closing tag.

In HTML, hr is a self-closing tag, and therefore doesn’t need a separate closing tag.


#3

Hello there. I think the reason might be that the hr tag isn’t a closing tag it stands alone. Like <hr>. Not like <hr></hr>


#4

Ahhhh!!! okay I missed that, Thanks!


#5

You are welcome.!!! :slight_smile:


#6

Hi, someone help me please?
I’ve put the hr tag correctly and have some problem I’m not seeing.
And this format is generating an error.

h4 { text-align: center; height: 25px; } p { text-align: justify; } .links { text-align: left; color: black; } .fullCard { width: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px; } .cardContent { padding: 10px; } .cardText { margin-bottom: 30px; }
<h4><s>Google</s>Alphabet</h4>

<hr>

<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
</div>
<div class="cardLinks">
  <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
  <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
</div>

#7

looks like an FCC bug, skip the challenge


#8

Thank´s :slight_smile:


#9

This work for me :slight_smile:

<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google Alphabet</h4>
      <hr>
      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

#10

I had the same issue. I tried condef5’s version, which only differs in that “em” element contains the “p” element instead of vice versa. After all, these guys are human. Probably not bad practice to start switching around formatting in order to get the program to advance you to the next challenge. Programming is all about problem solving in weird ways (I would imagine. What do I know?).


#12

Nesting the “p” into the “em” is also how I managed to get past this challenge.


#13

This worked, man. Good stuff!


#14

I think this one particular challenge is broken. There should be no reason switching the from the inside to the outside of the

makes a difference. That’s not what the question asked for. Pissed I wasted 10 minutes trying to figure this out


#15

the


works as well. I didn’t try just
so I don’t know the exact difference in using one over the other.

Weird to nest the

in the . Will the code still work in the real world that way? :face_with_raised_eyebrow:


#16

dont work and dont skip The hr tag should come between the title and the paragraph.

<style>
  h4 {
    text-align: center;
    height: 25px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4><s>Google</s>Alphabet</h4>
      <hr>
      <p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

#17

this works for me
this is a challenge anyway
so gotta find a way

h4><s>Google</s>Alphabet</h4>
      <hr>
      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>

#18

There is a bug on the site which doesn’t allow the correct answer to pass, and worse it allows invalid HTML to pass. Putting p elements inside em elements is invalid code.


#19

oh i did not know that, thank you for letting me know

edit: is it still good to continue your study on this website?


#20

The course itself seems to be OK to me, so far. I knew basic HTML & CSS before I started this course but wanted to pick up HTML5 and try and get into JavaScript. The hr issue is only an issue due to it not accepting the correct answer — most people would never have thought of using the wrong answer themselves, and it’s just a shame it’s being passed off as being OK. I’m hoping that somewhere further into the course it is explained how and why you should use validators to check your code, which would pick up any mistakes.