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 Understanding Whitespace

Posted by Nic Henstridge
Nic Henstridge
2,107 Points

CSS Not Displaying Correctly

Hey Guys having a few issues with this course and the CSS not doing as it should. I have downloaded the files for the project as directed and copied each step along the way however I have two pages with style issues. After this lesson the shirts should be displaying in a grid of 4, however mine are displaying in a long row down; one per line.

Here is my code for shirts.php:

<?php

$products = array();
$products[101] = array(
    "name" => "Logo Shirt, Red",
    "price" => 18,
    "img" => "img/shirts/shirt-101.jpg"
);
$products[102] = array(
    "name" => "Mike the Frog Shirt, Black",
    "price" => 20,
    "img" => "img/shirts/shirt-102.jpg"
); 
$products[103] = array(
    "name" => "Mike the Frog Shirt, Blue",
    "price" => 20,
    "img" => "img/shirts/shirt-103.jpg"
); 
$products[104] = array(
    "name" => "Logo Shirt, Green",
    "price" => 18,
    "img" => "img/shirts/shirt-104.jpg"
); 
$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 Catalogue of Shirts";
$section = "shirts";
include('inc/header.php');
?>

    <div class="section page">

        <div class="wrapper">

            <h1>Mike&rsquo;s Full Catalogue Of Shirts</h1>

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

        </div>

    </div>

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

Header:

<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?php echo $pageTitle; ?></title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700" type="text/css">
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>

    <div class="header">

        <div class="wrapper">

            <h1 class="branding-title"><a href="./">Shirts 4 Mike</a></h1>

            <ul class="nav">
                <li class="shirts <?php if ($section == "shirts") { echo "on"; } ?>"><a href="shirts.php">Shirts</a></li>
                <li class="contact <?php if ($section == "contact") { echo "on"; } ?>"><a href="contact.php">Contact</a></li>
                <li class="cart"><a href="#">Shopping Cart</a></li>
            </ul>

        </div>

    </div>

    <div id="content">

I have not modified the style.css at all after downloading with project files. I will post if needed but it's big so might cram this first post!

Thanks for any help you can give!

Nic Henstridge
Nic Henstridge
2,107 Points

CSS deleted

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Nic,

In your shirts.php you have:

<div class="section page">

In my local copy I have:

<div class="section shirts page">

I imagine you're not getting some of the styles for the shirts page since you're missing that class.

Also, since the css file isn't necessary here you could remove it from your comment. It does make for a pretty long page :)

As far as the shirts link having incorrect styling on homepage check this post:
https://teamtreehouse.com/forum/-notice-undefined-variable

Nic Henstridge
Nic Henstridge
2,107 Points

Legend, thank so much for the reply that was doing my head in! I swear in the video he instructor said to use "section page" but I may be wrong.

Thanks as well for the link to the post for the undefined variable fix. Can I ask what the '&&' is called and how it is used in other situations? I can see in this situation but still a newbie here so would like to get a grasp on concepts!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Sorry, your question slipped past me.

You might have this figured out by now but && is the logical AND operator. You would use this when you have several boolean expressions and you want them all to be true. If just one of the expressions is false then the whole thing becomes false.

Mark Hardy
PLUS
Mark Hardy
Courses Plus Student 3,502 Points
Mark Hardy
Mark Hardy
Courses Plus Student 3,502 Points

Had the same issue and went back to see if it did in fact say "section page". In the beginning of the video it was in fact "section page" then it changes to "section shirts page" unfortunately without telling us so you were indeed correct.