Stranger Things: Weird Issues with Code in Tribute Project

Project Feedback
#1

Hi all,

I’m having issues with the tribute page project, specifically with the unordered list. As you can see in the code, the list should have five list items, however, only one is appearing and it isn’t even the first list item. The link also seems to be out of place. I’ve combed through my code and I’m sure I’m just missing something basic. Any help is much appreciated. Also, let me know what you think of the overall design.

Thanks!

#image {
  width: 100%;
  max-width: 625px; 
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

main {
  background-color: black;
}

.container {
  color: white;
}

  .container {
    font-size:;
    width: 100%;
    background: ;
    display: grid; 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px 200px;
    margin-left: auto;
    margin-right: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  } 

#all {
  
  color: #FDB927;
}

h1 {
  color: #FDB927;
  text-align: center
} 

.d1 {
  position: relative;
  padding-bottom: 56.25%;
  
}

.d1 iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  object-fit: cover;
}

body {
    margin: 0px;
}

iframe {
  height: 100%;
  width: 100%;
}

<!DOCTYPE html>
<html>
<!-- metadata elements -->
  <head>
      <title id="title">The Black Mamba: Win Over Anything</title>  
  </head>
  <main id="main">
    <h1>The Black Mamba: The Legacy </h1>
  	<div id="img-div">
  		<figure>
  			<img src="http://game7network.com/wp-content/uploads/137_1atiba_jefferson_kobe_bryant_3.jpg" id="image" alt="blah blah blah">
  				<figcaption id="img-caption">
  			      I am Kobe
  				</figcaption>	
  		</figure>
  	</div>
       <div id="ordered-list">
      <ul>
        <li>Five Time NBA Champ</li>
        <li>11 NBA First Team Selections</li>
        <li>12 Time All-Defensive Team</li>
        <li>One Time MVP</li>
        <li>18 Time All-Star</li>
      </ul>  
    </div>
   <div>
		<a href="https://ftw.usatoday.com/2015/12/kobe-bryant-stats-record-most-games-20-years-most-missed-shots-81-points-stats-michael-jordan-lakers" target="_blank">What's up</a>
	</div>

		
	<article id="tribute-info">	
  <div class="container">
  <div class="d1" id="all">20 time all-star</div>
  <div class="d2" id="all"><iframe width="560" height="315" src="https://www.youtube.com/embed/Lf4biDUfwug" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  <div class="d3" id="all">3</div>
  <div class="d4" id="all">4</div>
  
</div>
  
	</article>  			

  </main>
    
</html>
#2

Please provide a link to your pen and I’d be happy to look at it.

1 Like
#3

Are you doing this in codepen? If so, codepen provides all the head elements. Basically the code you type into codepen would be all the code that would go between the <body> </body> tags. If you want to change anything click on the ‘Settings’ button.

codepen also provides you with a validator for both HTML and CSS. Click on the down arrow in each section and then click on the Analyze HTML or Analyze CSS and correct any typo’s or errors it tells you about.

Doing this will help you to clean up the problem that you’re seeing.

Good luck, have fun.

1 Like
#4

Thank you, here’s the link: https://codepen.io/andrewcauthorn/pen/aMYbJr?editors=1100

#5

Thanks for the help!

1 Like
#6

A couple of things I noticed is that you don’t have any body tags anywhere in your html. Everything that you want to be displayed should be nested inside of body tags. Another thing I saw was that you gave the unordered list div an id of “ordered-list”. Make sure that they’re consistent with each other to avoid confusion as to whether the list is supposed to be ordered or unordered.

You have a css selector for “d1 iframe”, but your only iframe element is nested in a d2 class div, so none of that styling is being applied. There is a margin at the top, creating unneeded white space. As a rule of thumb, I typically like to start my css by setting body and html margin and padding to 0 to get rid of that.

1 Like
#7

codepen assumes the body tags for you. Click the settings button to see what else it assumes for you.

1 Like
#8

Really? I didn’t know that. I’ve just been including them this whole time for the heck of it as well as the rest of the boilerplate html. I figured it was just a good habit to get into. Thanks for letting me know.

2 Likes
#9