Underlining the H1 in the main section of the page


#1

Having trouble with this exercise:
https://www.codecademy.com/courses/web-ext/projects/html-css-prj_newsroom

In the example the text "Introducing Bass" has a blue bottom border line that spans underneath the words. I thought it was as simple as just putting an text-decoration: underline; but.... oh no, nothing is ever that simple!

Underline works as far as making sure the text is underlined up to the edge of the word "Bass" and whether the text wraps or not all the text remains underlined. However, this means the underline also passes through the letter "g" in the word "introducing" so this couldn't be right. I also could not change the color of the underline from white to blue, so I inspected the original HTML example and it seems it was a 5px bottom border. Simple enough right? Nope!

I added this to my CSS:

border-bottom: 5px solid #1A77FF;

That works for getting the blue line I want that does extend below the "g" however, it also extends all the way across the column. Instead of stopping at the end of the word "Bass" the width continues on to span the entire column. It also does not wrap to both words if they are on separate lines. The example HTML has some strange html I have not seen before:

<h2 class>
<span class>Introducing Bass</span>
</h2>

I don't understand this, can I have some help? Not sure how that is supposed to make the bottom border wrap underneath "Introducing Bass"


#2

can you post your full code?


#3

Sure.

My HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>

    <div class="header">
      <div class="container">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/logo.svg">
        
        <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search NewsRoom">
        </div>
        <button type="submit" class="btn btn-default">Search</button>
      </form>        
      </div>
    </div>
    
    <div class="menu">
      <div class="container">
        <ul class="nav nav-pills">
          <li class="selected"><a href="#">Top Stories</a></li>
          <li><a href="#">World</a></li>
          <li><a href="#">Business</a></li>
          <li><a href="#">Technology</a></li>
          <li><a href="#">Entertainment</a></li>
          <li><a href="#">Sports</a></li>
          <li><a href="#">Science</a></li>
          <li><a href="#">Health</a></li>
        </ul>
      </div>
    </div>
    
    
    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-md-5">
            <p>November 7, 2014</p>
            <h1 class><span class>Introducing Bass</span></h1>
            <p>A new app by the creators of Shutterbugg that lets you enjoy your favorite music everywhere you go.</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="supporting">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <h2>Latest News</h2>
            <p>November 5, 2014</p>
            <h3>MOVE Launches in London</h3>
            <p>November 4, 2014</p>
            <h3>Introducing Excursion</h3>
            <p>November 2, 2014</p>
            <h3>Improvements to SHutterbugg Arrive</h3>
          </div>
          <div class="col-md-4 sidebar" id="sidebar">
            <h2>Upcoming Events</h2>
            <p>November 8-12, 2014</p>
            <h3>Innovation Cloud 2014</h3>
            <p>November 21, 2014</p>
            <h3>LL Retrospective</h3>
            <p>December 5, 2014</p>
            <h3>M.O.N.E.Y. Launch Event</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/newsroom/ad.jpg">
          </div>
        </div>
        </div>
      </div>
  </body>
</html>

and my CSS

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color:  #F2F2F2;
}

.header {
  background-color: black;
}

.container img {
  height: 70px;
  float: left;
  padding: 10px;
}

.form-control {
  background-color: black;
  border-bottom: 1px solid white;
  border-top: hidden;
  border-left: hidden;
  border-right: hidden;
  width: 200px;
  border-radius: 0px;
  color: white;
  padding-left: 0px;
}

.form-control:focus {      
  border-radius: 0px;
  box-shadow:0px 0px 0px;
  outline:0px;
  color: white;
  border-bottom: 1px solid #1A77FF;
  
}

.form-control:hover {
  border-bottom: 1px solid #1A77FF;
}

.navbar-form {
  margin: 0px;
  border-top: 0px;
  border-bottom: 0px;
}

.header .btn {
  background-color: black;
  color: white;
  border-bottom: 1px solid #1A77FF;
  border-top: hidden;
  border-left: hidden;
  border-right: hidden;
  border-radius: 0px;
  margin-left: 5px;
  font-weight: normal;
}

.menu li{
  display: inline;
  text-align: center;  
}

.menu li a {
  color: white;  
  border-radius: 0px;
}

.menu li a:hover {
  background-color: #1A77FF;
  border-radius: 0px;
}

li.selected {
  background-color: #1A77FF;
}

.menu {
  background-color: #152230;
}

.menu .container {
  padding: 0px;
}

.menu .nav {
  padding:0px;
}

.main {
  background: url(https://s3.amazonaws.com/codecademy-content/projects/newsroom/bass-bg.jpg);
  -webkit-background-size: cover;  
  height: 500px;
}

.main p {
  color: white;
  font-size: 17px;
}

.main h1 {
  font-size: 60px;
  font-weight: bold;
  color: white;  
  border-bottom: 5px solid #1A77FF;
}

.supporting .row {
  margin: 30px 0;
  background-color: white;
}

#sidebar {
  color: white;
  background-color: #152230;  
}

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

h3 {
  border-bottom: 3px solid #1A77FF;
  font-size: 17px;
  font-weight: bold;
}

.col-md-8 {
  padding: 20px 40px 40px 40px;
}

.col-md-4 {
  padding: 20px 40px 40px 40px;
}

.col-md-12 img{
  width: 100%;
  height: 100%;
  padding: 0px;
}

.col-md-12 {
  padding: 0px;
}

/*From here on below is the mobile design*/

@media (max-width:600px) {
  .menu ul.nav li{
    display:block;
    text-align: center;
    width: 100%;
  }  
  .header {
    display: block;
    text-align: center;
    width: 100%;
  }
 
  .header img {
    display:block;
    text-align: center;
    width:100%;
  }
}

#4

you should add the border to the span element. The span element is inline, so this will display the border correctly

headings (h1) are block level elements, so they will just display the border at the bottom of the box


#5

I understand now that I need to make each one of those headings span elements so that it doesn't apply the border all the way across the bottom. But how would I write that in CSS? Since SPAN isn't a class? I can't write something like .span {


#6

so? span is an element, so you can just use span as css selector to target an html element

I assumed this would be known at this point in the course


#7

That seemed to have worked, thank you. Though maybe you should take a run through the courses once more. There seems to be a lot of assuming the student has knowledge of items that are never explained in the course.


#8

Okay, so you are telling me that i can't find explanation about block level elements vs inline elements? Its in there, i can find it for you


#10

@kokutouchichi

There seems to be a lot of assuming the student has knowledge of items that are never explained in the course.

Assuming you're talking about block versus inline elements, @stetim94 is correct that they did cover that in this course, before they have you do these projects. Here's an example exercise discussing them:

https://www.codecademy.com/courses/web-beginner-en-6merh/0/2?curriculum_id=50579fb998b470000202dc8b

Your post was deleted for being inappropriate, but stetim isn't here to throw around his “condescending attitude”. He's one of the most helpful moderators on our team :slight_smile:


#11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.