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
Alex Gauthier
434 PointsTrouble defining a css item
Hello everyone, I have recently begun a section in the programming area focused on creating an eCommerce website. I have a file named "Items for sale.php"; inside of this page I have a list of products. Now I am trying to add css styling to these products, but cannot seem to configure this to work. I will attach my items for sale page below and hopefully someone can guide me as to how to begin the css selector to style the products. Thank you in advance. Also the style.css page is linked to the items for sale.php page in the header
<?php
$products = array();
$products[101] = array (
"name" => "Kodak Rainbow Hawkeye No2a, Blue",
"img" => "img/rainbow_hawkeye_main.gif",
"price" => 95,
);
$products[102] = array (
"name" => "Kodak Brownie Hawkeye Flash",
"img" => "img/hawkeye_flash_main.gif",
"price" => 10,
);
$products[103] = array (
"name" => "Kodak Retina",
"img" => "img/retina_main.gif",
"price" => 40,
);
$products[104] = array (
"name" => "Phoenix Insurance Lockbox",
"img" => "img/lockbox_main.gif",
"price" => 25,
);
?>
<?php
$pageTitle = "Catalog";
$section = "Catalog";
include('inc/header.php');
?>
<div class="section items page">
<div class="wrapper">
<h1>Items for Sale</h1>
<div class="products">
<ul>
<?php foreach($products as $product) {?>
<li class="row span12">
<a href="#">
<img src="<?php echo$product ["img"]; ?>" alt="<?php echo $product["name"]; ?>">
<p>View Details</p>
</a>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
<?php include('inc/footer.php'); ?>
css: body { font-family: 'Nunito', sans-serif; color: #FAF3BC; background: #420600 url('tweed.jpg') repeat; }
a {
color: #4FB69F;
text-decoratioin: none;
}
h1 {
font-size: 2.750em;
letter-spacing: -1.5px;
}
h2 {
font-size: 2.250em;
color: #B4C34F
}
.logo {
border-radius: 10px;
}
ul.nav {
margin: 120px 0 0 0;
list-style: none;
float: right;
}
ul.nav li {
float: left;
margin-right: 40px;
}
ul.nav li a {
font-size: 1.500em;
}
#intro {
margin: 50px 0 75pc 0;
}
#copyright {
padding: 10px 0px;
margin: 15 px 0px;
text-align: center;
}
#products {
display: inline-block;
list-style: none;
border: 1px solid #e3e1e0;
-webkit-border-radius: 2px;
border-radius: 2px;
width: 202px;
text-align: center;
text-transform: lowercase;
padding: 14px;
background: #f0eeed;
margin: 0 0 17px 17px;
position: relative;
left: -17px;
}
#products ul {
list-style-type: none;
}
6 Answers
Chase Lee
29,275 PointsJust real quick for your img echo command try putting this in:
<?php echo $product["img"]; ?>
Now for the styling try selecting .row and then the img tag in it like this:
.row img{
styling: here;
}
Hope that helps.
Kevin Korte
28,149 PointsYou have lots of choices there, what do you want to do. You have the obvious ones like:
.products
.wrapper
.items
.page
.section
ul
li.row
li.span12
li a
li img
li p
And more different combinations, plus pseudo classes too I would suggest two things. Go through the CSS lessons here, and make an html mark up on someplace like codepen.io where you can get your makeup and styling just how you want (we can help if it's on codepen) than have your php generate or fill in the blanks after you have that done.
Alex Gauthier
434 PointsYes, I've tried many of these, but none of them seem to have an effect on the styling. I thought maybe I had a noticeable error in my attempts.
christopher knevett
1,241 PointsHi, I would probably change the < div class = "products" >" to < div id = "products >, and then you can style that with:
products
Or if you want to style the list item then use:
products ul li
Hope this works for you :)
christopher knevett
1,241 Pointslol it got rid of my hashes. That should be a (hash)products { }, and (hash)products ul li { }.
Alex Gauthier
434 Pointsunfortunately none of these suggestions worked. It must be a problem with the css page then I guess.
christopher knevett
1,241 PointsPost the css?
christopher knevett
1,241 PointsOne thing I will say is, I have always had the greatest trouble naming classes and id's for divs with words with spaces. Always used to break my css, but I haven't done that for a long time so not sure if that could be a potential problem? Worth a look!
Alex Gauthier
434 PointsI added the css above
christopher knevett
1,241 Pointsclass="section items page" .... I can't see it in the css. Try removing the class?
Chase Lee
29,275 PointsDo any of your other styles work with the same style sheet?
Alex Gauthier
434 PointsYes this style sheet works with all my other pages using the same header
Chase Lee
29,275 PointsYou are selecting id's in your CSS with the hash: #, you need to select the classes with a dot: .. For an example you have:
<div class="products">
You select it in your CSS as if it had an id, you need to use the class selector like this:
.products ul {
list-style-type: none;
}
Instead of this:
#products ul {
list-style-type: none;
}
Does that make any sense?
Alex Gauthier
434 Pointsoops I forgot to change it back. I tried switching everything around to try and fix it earlier. Regardless I tried doing what you said again with no fix. But its fine I've just about had it with this piece of code so I'm going to give up for a while. Thanks both of you for trying to help.
christopher knevett
1,241 PointsHi Alex, I tried the code out (created the header and footer myself), the code below works fine. If there is a specific issue you have with it just put but it works. As Chase quite rightly said a (hash)product in the css must be paired with < div id=" product> rather than class and .product would use <div class=" "> Hope this helps you :) DONT GIVE UP!! Once you get it it's so much fun :D
<?php
$products = array(); $products[101] = array ( "name" => "Kodak Rainbow Hawkeye No2a, Blue", "img" => "img/rainbow_hawkeye_main.gif", "price" => 95, ); $products[102] = array ( "name" => "Kodak Brownie Hawkeye Flash", "img" => "img/hawkeye_flash_main.gif", "price" => 10, );
$products[103] = array ( "name" => "Kodak Retina", "img" => "img/retina_main.gif", "price" => 40, );
$products[104] = array (
"name" => "Phoenix Insurance Lockbox",
"img" => "img/lockbox_main.gif",
"price" => 25,
);
?> <?php $pageTitle = "Catalog"; $section = "Catalog"; ?>
< html> < head> < title></title> < style type="text/css"> a { color: #4FB69F; text-decoratioin: none; }
h1 { font-size: 2.750em; letter-spacing: -1.5px; }
h2 { font-size: 2.250em; color: #B4C34F }
.logo { border-radius: 10px; }
ul.nav { margin: 120px 0 0 0; list-style: none; float: right; }
ul.nav li { float: left; margin-right: 40px; }
ul.nav li a { font-size: 1.500em; }
intro {
margin: 50px 0 75pc 0; }
copyright {
padding: 10px 0px; margin: 15 px 0px; text-align: center; }
products {
position: relative; display: inline-block; list-style: none; border: 1px solid #e3e1e0; -webkit-border-radius: 2px; border-radius: 2px; width: 202px; text-align: center; text-transform: lowercase; padding: 14px; background: #f0eeed; margin: 0 0 17px 17px; left: 0px; }
products ul {
list-style-type: none; }
products ul li {
border: 4px #666666 solid; } </style> </head> <body>
<div class="sectionitemspage">
<div class="wrapper">
<h1>Items for Sale</h1>
<div id="products">
<ul>
<?php foreach($products as $product) {?>
<li class="row span12">
<a href="#">
<img src="<?php echo$product ["img"]; ?>" alt="<?php echo $product["name"]; ?>"> <p>View Details</p> </a>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
</body> </html>
christopher knevett
1,241 PointsWhy they are scrubbing some of my answer I don't know. Treehouse this is NOT helpful! lol