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

PHP Build a Basic PHP Website (2018) Listing and Sorting Inventory Items Displaying Item Details

Karn Sylvester
Karn Sylvester
11,179 Points
Posted by Karn Sylvester
Karn Sylvester
11,179 Points

Item Details set below Featured Image

Hello everyone,

I'm wondering if someone can help me with this issue:

I have followed the implementation of code step-by-step but when when I preview the workspace the Item Details are set below the Featured Image.

I've looked through my code and can't see where the issue is. Here is a copy of my details.php code for reference. :

<?php 
include("inc/data.php");
include("inc/functions.php");

if (isset($_GET["id"])) {
  $id = $_GET["id"];
  if (isset($catalog[$id])) {
    $item = $catalog[$id];
  }
}

if (!isset($item)) {
  header("location:catalog.php");
  exit;
}

$pageTitle = $item["title"];
$section = null;

include("inc/header.php"); ?>

<div class="section page">

    <div class="wrapper">

      <div class="media-picture">

      <span>
        <img src="<?php echo $item["img"]; ?>" alt="<?php echo $item["title"]; ?>" />
      </span>

      <div class="media-details">

        <h1><?php echo $item["title"]; ?></h1>
          <table>

            <tr>
              <th>Category</th>
              <td><?php echo $item["category"]; ?></td>
            </tr>      
            <tr>
              <th>Genre</th>
              <td><?php echo $item["genre"]; ?></td>
            </tr>  
            <tr>
              <th>Format</th>
              <td><?php echo $item["format"]; ?></td>
            </tr>  
            <tr>
              <th>Year</th>
              <td><?php echo $item["year"]; ?></td>
            </tr>  
            <?php if (strtolower($item["category"]) == "books") { ?> 
            <tr>
              <th>Authors</th>
              <td><?php echo implode(", ",$item["authors"]); ?></td>
            </tr> 
            <tr>
              <th>Publisher</th>
              <td><?php echo $item["publisher"]; ?></td>
            </tr>  
             <tr>
              <th>ISBN</th>
              <td><?php echo $item["isbn"]; ?></td>
            </tr> 
            <?php } else if (strtolower($item["category"]) == "movies") { ?> 
            <tr>
              <th>Director</th>
              <td><?php echo $item["director"]; ?></td>
            </tr>
            <tr>
              <th>Writers</th>
              <td><?php echo implode(", ",$item["writers"]); ?></td>
            </tr> 
            <tr>
              <th>Stars</th>
              <td><?php echo implode(", ",$item["stars"]); ?></td>
            </tr> 
            <?php } else if (strtolower($item["category"]) == "music") { ?>
            <tr>
              <th>Artist</th>
              <td><?php echo $item["artist"]; ?></td>
            </tr>
            <?php } ?>
          </table>

     </div>

</div>

Moderator edited: Markdown added so that code renders properly in the forums.

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Karn Sylvester ! You're doing terrific! This has less to do with the actual PHP and more to do with the HTML and CSS side of things. Around line 26 you start a <div> with the class "media-picture", but you are missing the closing div on that. The closing div is supposed to be just before the start of the <div> with the class "media-details". Once I fix this, the details show to the right of the picture as expected.

Hope this helps! :sparkles:

Karn Sylvester
Karn Sylvester
11,179 Points
Karn Sylvester
Karn Sylvester
11,179 Points

Thank you very much Jennifer, that was perfect :D