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

HTML

Posted by Shawn Katzenmeier
Shawn Katzenmeier
3,624 Points

Issue with CSS positioning on smells like bakin website

my problem is in this section Build a Simple Website> Styling Content> Finishing the CSS

I cannot get my ul to go from the bulleted list to the top right of my page. Ive checked the code in in the finished style.css and mine and it is the same 

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

my code for the index.html file that should relate to this is as follows:

ul class="nav"
  <li><a href="#">About</a></li>
  <li><a href="#">Cupcakes &amp; Prices</a></li>
  <li><a href="#">Locations</a></li>
  <li class="last"><a href="#">Contact Us</a></li>
/ul

obviously I left off the < > to be able to show the code. But I dont see any obvious errors like forgetting a quotation etc otherwise treehouse does a good job of letting me know.

Please let me know what is going wrong. I am frustrated!

This is my index.html file where the ul is located

6 Answers

David Middleton
David Middleton
5,721 Points
David Middleton
David Middleton
5,721 Points

Hi Shawn,

Looking at your code, I don't think you need to apply any padding to the list which is where you may be having a problem. I think you need to add 120px to the margin. The code in my style.css is as below.

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

I hope this helps.

Shawn Katzenmeier
Shawn Katzenmeier
3,624 Points
Shawn Katzenmeier
Shawn Katzenmeier
3,624 Points

Thanks David I changed my css to how you said and I see no improvement. Again here is my current style.css

body { font-family: 'Nunito', sans-serif;

color: #FAF3bc; background: #420600 url('c:/dslr/programming/html css/websitewaters-island01-stage01/css/img/bg-texture.jpg') repeat; }

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

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

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

.btn { color: #FAF3bc; background: #4FB69F url('c:/dslr/programming/html css/websitewaters-island01-stage01/css/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 auto; list-style: none; float: right; }

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

}

ul.nav li a { color: #FAF3BC; }

And this is the top part of my html:

<!doctype HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> Shawn Katzenmeier Cupcake Company </title> <link rel="stylesheet" href="c:/dslr/programming/html css/websitewaters-island01-stage01/css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="c:/dslr/programming/html css/websitewaters-island01-stage01/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="c:/dslr/programming/html css/projects/style.css" type="text/css" media="screen"> </head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="c:/dslr/programming/html css/websitewaters-island01-stage01/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 attract, especiially in our kitchen! We make those women slob on the balls so hard, they won't ever know what hit em! </h1> <p><a href="#" class="btn"> Browse Our Cupcakes</a> </p> </div>

David Middleton
David Middleton
5,721 Points
David Middleton
David Middleton
5,721 Points

I've just compared your code with mine Shawn and the only difference is the text 'auto' in your margin function. I'm relatively new to this so not sure what would do, but I added it to my code and it broke the list.

Try taking that out and it should work.

Shawn Katzenmeier
Shawn Katzenmeier
3,624 Points
Shawn Katzenmeier
Shawn Katzenmeier
3,624 Points

Thanks David I got it figured out finally!

Becca Fraiman
Becca Fraiman
3,202 Points

Hi Shawn,

I know this was 4 months back.. but what was your solution? Having similar issue, my ul won't float to the right and continues to include bullets. Any tips for how you solved this? My code all appears correct and I'm sure it's something small.

Simon DICKENS
Simon DICKENS
1,325 Points
Simon DICKENS
Simon DICKENS
1,325 Points

Hello Peeps, Right..Ive been following these vids to the LETTER! Everything was working fine until i started styling the "nav" bar in CSS..Ive just completed styling the "Browse our cupcakes" button which worked ok. Now the nav bar wont change at all..HELP!

              <div class="grid_8 omega">                  
                  <ul class="nav">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Cupcakes &amp; Prices</a></li>
                    <li><a href="#">Locations</a></li>
                    <li class="last"><a href="#">Contact Us</a></li>
                  </ul>
              </div>

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: #4CC4F7; {

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

Simon DICKENS
Simon DICKENS
1,325 Points
Simon DICKENS
Simon DICKENS
1,325 Points

Cancel my last question! it was the curly brace! ive seen it now! lol