"How to Build a WordPress Plugin" was retired on July 6, 2019.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Accessibility Web Apps Charts and Graphs

Posted by Aman Mender
Aman Mender
11,197 Points

Not getting the graph

Hello

I am not getting the same graph as Nick here, at all.

I believe have the same markup and css.

Markup:

<html> <head> <title>Accessible Graph example</title> <link rel="stylesheet" type="text/css" href="graph.css"> </head>

<body>

<div id="wrapper">

  <h1>Fruit Farms in Florida</h1>

  <ul class=”graph>

    <li>
      <span class=”fruit” style=”width: 40%”>Oranges</span>
      <span class=”total”>120 Farms</span>
    </li>

    <li>
      <span class=”fruit” style=”width: 27%”>Strawberries</span>
      <span class=”total”>80 Farms</span>
    </li>

    <li>
      <span class=”fruit” style=”width: 20%”>Apples</span>
      <span class=”total”>60 Farms</span>
    </li>

    <li>
      <span class=”fruit” style=”width: 13%”>Bananas</span>
      <span class=”total”>40 Farms</span>
    </li>

  </ul>
</div>

</body> </html>

Css:

wrapper {

font-fmaily: sans-serif; width: 80%; margin: 0 auto; }

.graph { padding: 0; width: 50%; float: left; border-bottom: 1px solid #888; }

.graph li { position: relative; list-style: none; border-top: 1px solid #888; clear: both; }

.fruit { display: block; padding: 1em; position: relative; color: #222; background: #66ee99; font-weight: bold; float: left; }

3 Answers

Aman Mender
Aman Mender
11,197 Points

I fixed it. there was something wrong with the classes.

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points 
  <ul class=”graph>

You forgot to close the quote.

Rouillie Wilkerson
Rouillie Wilkerson
10,419 Points
Rouillie Wilkerson
Rouillie Wilkerson
10,419 Points

Here's what I see that needs to be corrected:

  • Looks like you're forgetting to close quotes after classes.
  • family in font-family (#wrapper) is misspelled.
  • #66ee99, case matters, I think. So it should be #66EE99
  • You're missing .totals { margin-top: 15px; float: right; }