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

Luke Allen
PLUS
Luke Allen
Courses Plus Student 1,506 Points
Posted by Luke Allen
Luke Allen
Courses Plus Student 1,506 Points

styling not responding

I am working on styling the Smells like Bakin site. When I style the list nothing happens. This is the code I put in and it did not work. All of my other styling has worked. My thought is maybe I coded the list wrong. I will attach that code below css code. Any help would be appreciated thanks! 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;
}

<div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div> <div class="grid_8 omega" <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Location</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> </div> <div id="intro" class="grid_9">

6 Answers

Art Skupienski
Art Skupienski
7,080 Points
Art Skupienski
Art Skupienski
7,080 Points

In your CSS code you refer your rules to ordered list 'li'. Al you need to do is start from CSS class 'nav' follow ordered list 'li'. Ex.

.nav li or .nav li a

Double check in your HTML if your have class 'nav'. Remember that 'nav' is also an HTML tag. You can use both however be sure where your refer to your CSS rules. Referring to HTML tag 'nav' you do not add dot before name. Simply nav li or nav li a.

Luke Allen
PLUS
Luke Allen
Courses Plus Student 1,506 Points
Luke Allen
Luke Allen
Courses Plus Student 1,506 Points

Hey thanks for your help, I rewatched the video for styling my unordered list. Below is the code I wrote after watching the video

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

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

What I understand form your answer is with this code I am referring my styling to unordered list with the class "nav". I am righting code for it to have a margin of 120 px then zero it out and float it right.

The Second list of coding tells the list to become horizontal. When watching the video the code above works. My next thought is my HTML is wrong below is the coding I am referring to <div class="grid_8 omega" <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Location</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> </div> You talked about the nav being an HTML attribute did I right that wrong? I am not sure what I am doing wrong. None of my ul styling is working. Thanks again for help

Art Skupienski
Art Skupienski
7,080 Points
Art Skupienski
Art Skupienski
7,080 Points

Hi Luke,

I will be happy to help you once you send entire code HTML and CSS. Can be here once you register http://codepen.io/pen. Otherwise paste code on forum please.

Lut Garcia
Lut Garcia
3,631 Points
Lut Garcia
Lut Garcia
3,631 Points

Hi Art, I have the same issue as Luke. I wasnt sure about starting a New Discussion or not since you are right on the spot. I am having problems on switching the "ul" from vertical to horizontal.

Below you will find my HTML and CSS code. I have downloaded the stage files and compared them with mine and I cannt find the mistake.

Hope you can help me. Thanks, Lut

-----------HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

</head> <body> <div class="container"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div> <div class="grid_8 omega" <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> </div>
<div id="intro" class="grid_9"> <h1>Opposites really do atract, especially in our Kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a><p> </div>

<div class="grid_3 omega">
  <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
</div>

<div id="featured-cupcake" class="grid_7">
  <h2>Cupcake of the Week</h2>
  <p>This week's features cupcake is the <a href="#"> Avocado Chocolate Cupcake</a>. Its strange combo flavors will kick your taste buds into fiesta mode!</p>
  <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
</div>

<div id="new-cupcakes" class="grid_5 omega">
  <h2>Fresh Out of the Oven</h2>
  <p>Our newest cupcakes are<a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno so spicy</a>.</p>
  <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
  <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
</div>

<div class="grid_7">
  <h2>Inside The Kitchen</h2>
  <p>Smells like Bakin' started out in the garage  of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a succesfull store front, catering business and cupcake truck.</p>
  <p><a href="#" class="button-small">Read more</a></p>
</div>

<div class="grid_5 omega">
  <h2>Get Bakin' with Us</h2>

  <div id="contact">
    <p>Call us: <span>1-555-CUP-CAKE</span><br>
      Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
  </div>

  <p>We annouce all our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
  <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebbok"></a>
  <a href="https://twitter.com/#!/smellsLikeBakin"><img src="img/twitter.gif" alt="Twitter"></a>

</div>

<div id="copyright" class="grid_12">
  <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved. </p>
</div>

</div>

</body> </html>

----------CSS-----------

body {

font-family: 'Nunito', sans-serif;
color: #FAF3BC;
background: #420600 url('img/bg-texture.jpg') repeat;

}

a{ color: #4FB69F; text-decoration: none; }

h1{ font-size: 1.750em; letter-spacing: -1.5px; }

h2{ font-size: 1.500em; color: #B4C34F; }

.btn{ color: #FAF3BC; background: #4FB69F url('img/texture.png') no-repeat right top; padding: 15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }

.btn:hover { background-color: #4CC4A7; }

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; }

Lut Garcia
Lut Garcia
3,631 Points
Lut Garcia
Lut Garcia
3,631 Points

Ahhhhggg! Got it! I was missing a ">" line 17 on index.html Said:

<div class="grid_8 omega"

Should say

<div class="grid_8 omega">

Had to compare files using MS Word. Thanks anyway.

Art Skupienski
Art Skupienski
7,080 Points
Art Skupienski
Art Skupienski
7,080 Points

I am glad you found it Lut! Always check if you close your tags. This can cause many unpredictedable results in your web browsers ;)