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 Simple PHP Application Listing Inventory Items Displaying All Products

Posted by Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

The CSS for the Layout for Shirts not applied.

I am at this stage of the course where I am building up the PHP code to display the Shirts but the CSS doesn't seem to be working which I assumed was added automatically.

I currently get this:

My Version

When I should be getting something like this:

The Version on Treehouse

I'm not sure if is down to my code, but here it is anyway:

<?php

$products = array();

    $products[101] = array(
            "name" => "Logo Shirt, Red",
            "img" => "img/shirts/shirt-101.jpg",
            "price" => 18
    );
    $products[102] = array(
            "name" => "Mike the Frog Shirt, Black",
            "img" => "img/shirts/shirt-102.jpg",
            "price" => 20
    );
    $products[103] = array(
            "name" => "Mike the Frog Shirt, Blue",
            "img" => "img/shirts/shirt-103.jpg",
            "price" => 20
    );
    $products[104] = array(
            "name" => "Logo Shirt, Green",
            "img" => "img/shirts/shirt-104.jpg",
            "price" => 18
    );
    $products[105] = array(
            "name" => "Mike the Frog Shirt, Yellow",
            "img" => "img/shirts/shirt-105.jpg",
            "price" => 25
    );
    $products[106] = array(
            "name" => "Logo Shirt, Gray",
            "img" => "img/shirts/shirt-106.jpg",
            "price" => 20
    );
    $products[107] = array(
            "name" => "Logo Shirt, Turquoise",
            "img" => "img/shirts/shirt-107.jpg",
            "price" => 20
    );
    $products[108] = array(
            "name" => "Logo Shirt, Orange",
            "img" => "img/shirts/shirt-108.jpg",
            "price" => 25,
    );

?><?php
$pageTitle = "Mike's Full Catalog of Shirts";
$section = "shirts";
include('inc/header.php'); ?>

    <div class="section page">
        <div class="wrapper">
            <h1>Mike&rsquo;s Full Catalog of Shirts</h1>

            <ul class="products">
                <?php foreach($products as $product) {?>
                <li>
                    <a href="#">
                        <img src="<?php echo $product["img"]; ?>" alt="<?php echo $product["name"]; ?>">
                        <p>View Details</p>
                    </a>
                </li>
                <?php } ?>
            </ul>

        </div>
    </div>

<?php include('inc/footer.php'); ?>

Any help on this matter would be superb, many thanks.

dylanpardee
dylanpardee
Courses Plus Student 8,740 Points

Can we have a look at your include file that has the CSS inside it?
When you view it in the browser could you post the View Page Source that you get?
Just right click the page and click View Page Source.
It looks like the CSS is working but its not targeting the 

<img>

Elements for the shirts.

Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Here is a link to the style.css (Ignore the file name of style-Tw.css, it's just an automatic random filename from when I upload.

I haven't touched the CSS so it should be fine.

4 Answers

Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Ok I found it. The 

<div class="section page">

needs to be 

<div class="section page shirts">

:P Oops

elk6
elk6
22,916 Points

That was it. Got the same error. Thanks.

Cloud Edwards
Cloud Edwards
8,132 Points
Cloud Edwards
Cloud Edwards
8,132 Points

I had a very similar problem with the css not working. In my case, I looked at the css file, found the code that described the hover effect and the layout, then I looked to see what the targeting was. It needed to be like this in the .php

<div class="section shirts"> <ul class="products">

in css it looks like 

.section.shirts ul.products li a:hover {  }
Boris Baskovec
Boris Baskovec
4,798 Points
Boris Baskovec
Boris Baskovec
4,798 Points

Clear your cache (CTRL+F5 I think)

Suleiman Leadbitter
Suleiman Leadbitter
15,805 Points

Tried that, no luck :( Thanks though.

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

It seems you have an error on your php.

You are using double quotes when selecting the key.

<img src="<?php echo $product["img"]; ?>" alt="<?php echo $product["name"]; ?>">

Try this:

<img src="<?php echo $product['img']; ?>" alt="<?php echo $product['name']; ?>">