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

CSS

Posted by Aaron Goldman
Aaron Goldman
5,051 Points

Question about CSS for "smells like bakin" project

Hi, I am working on the CSS for the smells like bakin project and I'm having trouble getting the code for the navigation to work. I couldn't get the borders to show up around my pictures either. Does anyone have some suggestions on how to fix this?

thanks!

Blake Webster
Blake Webster
5,901 Points
Blake Webster
Blake Webster
5,901 Points

Can you show the CSS code you were using so that we can better help? When I went through that tutorial it worked for me so looking at your code would help.

Aaron Goldman
Aaron Goldman
5,051 Points

here is the code that I typed: (only the portions that didn't work for me)

for navigation:

ul.nav {
  margin: 120px 0 0 0;
  list-style: none;
  float: right;
}

ul.nav li {
    float: left;
    margin-right: 40px;
}

ul.nav li a{
    color: #FAF3BC;

for borders:

#new-cupcakes img {
    border: 8px solid #FAF3BC;
    margin: 0 0 20px 0;
}

#featured-cupcake img {
    border: 8px solid #FAF3BC;

3 Answers

Mohammed Gassem
Mohammed Gassem
2,545 Points
Mohammed Gassem
Mohammed Gassem
2,545 Points

try removing the "s" form cakes to #new-cupcake.

Or make sure the ID attributes in HTML do not contain #.

Or double check the id name and the id selectors are exactly the same "letter-case matters"

Hope this help !

Best of luck, Moh

Aaron Goldman
Aaron Goldman
5,051 Points

Thanks Moh, I got the borders to appear, it was a capital letter issue. when I made the "n" in "new" and the "c" in "cupcake" into capital letters it worked. and when I capitalized "f" and "c" in featured cupake I got that border as well.

Still don't know why my navigation code didn't work though.

Aaron

Mohammed Gassem
Mohammed Gassem
2,545 Points

You welcome! I did the same errors :).

Sorry forgot to address the nav part, well the coding looks fine expect for the last line as you don't need to add (li) as (a) will trigger the links thro the unordered list. For the navigation not showing up you may need to do the following:

1- Check if you have added the nav class correctly ( again letter-cases). 2- Check the attributes is are written correctly without missing any code.

Let us know if it worked ! so we get more expertise in supporting others :).

Cheers Moh

Aaron Goldman
Aaron Goldman
5,051 Points

Everything in the code I wrote looks right. It is exactly what Nick wrote in his video. So I'm really confused as to why it didn't work for me, but it did work for Nick in his video.

Mike DeHart
Mike DeHart
9,088 Points
Mike DeHart
Mike DeHart
9,088 Points

I believe the problem is in your 'ul.nav' assignments. I haven't done the project in a long time, but assuming you are trying to access ul and li elements in a class "nav" it should be:

.nav ul { margin: 120px 0 0 0; list-style: none; float: right; }

.nav li { float: left; margin-right: 40px; }

.nav li a{ color: #FAF3BC;

Aaron Goldman
Aaron Goldman
5,051 Points

I tried moving the "ul" to after the ".nav" as you suggested, but it did not make the changes on my page. Do you have any other suggestions?

Jonathan Hobdell
Jonathan Hobdell
6,751 Points
Jonathan Hobdell
Jonathan Hobdell
6,751 Points

Hi Aaron

I know this is an old thread but I'm having the same issue and my navigation code in CSS is identical to yours but isn't having any effect on the web page. I've tried changing the ul and .nav around as suggested above, by Mike but to no avail.

Did you manage to solve the problem or does anyone have any other suggestions/explanations?

Many thanks Jonathan

Aaron Goldman
Aaron Goldman
5,051 Points

Jonathan, are you having trouble getting the navigation in the basic website project to move from a vertical list to a horizontal list? If that is your problem, you should check your html, (if your code is the same as mine above). I found out the cause of my problem was that I was missing a closing ">" in the div where the id="nav" and the class="grid_8 omega" I had: <div id="nav" class="grid_8 omega" <ul class="nav"> <li etc.... once I put in the ">" after omega it was perfect.

if on the other hand you are having trouble getting your navigation to scale properly in the responsive website project, well I am still stuck on this too! I can't get it to scale and look right in the 480px resolution.

Aaron Goldman
Aaron Goldman
5,051 Points

<div id="nav" class="grid_8 omega"> <ul class="nav">

Jonathan Hobdell
Jonathan Hobdell
6,751 Points

Hi Aaron, that was my problem indeed, and I hadn't even noticed. Problem solved. Thanks so much for your reply! :)

Aaron Goldman
Aaron Goldman
5,051 Points

No problem. I'm glad I could help.