CSS training build your first website...not working as taught

Question

Hello group...I dont know how many of you noticed that the training on build a simple website and in the 'writing css' section the ul items are not lining of like the instructor has noted.

I have tried everything (wasted countless hours) trying to figure out why...I started with the finished product and tried to work my way back and trouble shoot and have come to the conclusion that there is grave error in the instruction because I still have a bulleted list to the left and not lined up properly....and I am sure I am going to get 'have you tried this' or 'are you sure you followed the instructions exactly' etc...

and to that I say I am going back to lynda.com...I wasted so much time on changing the grid.css, style.css (even working backword from finished site) the order of the css files in the link section of index.html etc...and nothing worked...

I am very frustrated and I am so dissappointed that I wasted so much time trying to figure this out...TIME SUCK

Answer 1 · 2013-05-15T08:22:15Z

May 15, 2013 8:22am

Paul Smith - I found your issue, your HTML failed validation.

There were 2 issues, check out:

Line 18: Missing closing quote for class="grid_9 <div>

Line 71: You must close <p> tags

After I made those 2 changes to the HTML you provided your site showed up perfectly fine.

Whenever your CSS is doing something crazy, it's usually a good idea to double check that you've got valid HTML using the HTML Lint tool.

Here's a page describing what the tool does and the options for it.

For instance you probably want to turn off checking for close empty elements so you can use <img src ="img,jpg"> instead of having to use <img src ="img.jpg" />, the trailing slash is what that rule is checking for and that slash is no longer required in HTML5.

Answer 2 · 2013-05-15T05:53:36Z

May 15, 2013 5:53am

Yes I think I am having the same problem. 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; }

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

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

Please explain what we are doing wrong

Thanks

Answer 3 · 2013-05-15T05:54:34Z

May 15, 2013 5:54am

sorry here is the code for the inde.html

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

Answer 4 · 2013-05-15T05:54:42Z

May 15, 2013 5:54am

Hey paul - it sounds like you are having a tough time!

If you have gone through all of the tutorials, and your code is what was taught it should appear correct (I had gone through it earlier and it worked great)! if your having alignment and structure issues refer to your CSS, it only takes something as simple and a missing closing brace, or improper naming to throw off the entire thing.

If you are still having issues post some code, that way we can see what you have done.

Answer 5 · 2013-05-15T05:58:46Z

May 15, 2013 5:58am

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.

Answer 6 · 2013-05-15T06:14:08Z

May 15, 2013 6:14am

I have had problems in the past week, but always found out the problem within a few minutes. I am just as frustrated as Paul and I guess I will call it a night. I wanted to get through this, but I want to do it right and am dissapointed not many other people are on here right now to help out.

Thanks

Answer 7 · 2013-05-15T06:56:52Z

May 15, 2013 6:56am

I will attach my code:

INDEX.HTML

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style2.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
</head>

<body>
    <div class="container clearfix">

        <div class="grid_4">
            <img src="img/logo.gif" alt="Smells Like Bakin"/>
        </div>

        <div class="grid_9>
            <ul class="nav">
                <li><a href="#">About</a></li>
                <li><a href="#">Cupckaes & 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 especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious deserts</h1>
            <p><a href="#" class="btn">browse our cupckaes</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 bd">
                <h2>Cupckae of the Week</h2>
                <p>This week's featured cupcake is the <a href="#">Avacado Chocalate cupcake</a> Its a strainge combo of flavors will kick you raste buds into fiesta mode!</p>
                <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake"/>
            </div>


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

            <div class="grid_7 bd">
                <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 successful store front, catering business and cupcake truck. </p>
                <p><a href="#" class="btn-small">Read More</a></p>
            </div>

            <div class="grid_5 omega bd">
                <h2>Get Bakin' with US</H2>

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

                    <p>We announce all of our new flavors first through facebook &amp; Twiiter, and even take requests</p>

                    <a href="http://facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
                    <a href="http://twitter.com/SmellsLikeBakin"><img src="img/twitter.gif" alt="Twitter"></a>
            </div>
                    <div id="copyright" class="grid_12 bd">
                        <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved
                    </div>
    </div><!--end container-->

</body>

</html>

Answer 8 · 2013-05-15T06:57:30Z

May 15, 2013 6:57am

Style.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;
    font-weight: 100;
    letter-spacing: -1.5px;
}

h2 {
    font-weight: 100;
    font-size: 1.500em;
    color: #b4c34f;
}

h3 {
    font-weight: 100;
    font-size: 1.125em;
    color: #ed6c85;
}

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

btn:hover {
    background-color: #4cc4a7;
}


.btn-small {
    padding: 10px 25px;
    margin: 50px 0;
    color: #faf3bc;
    font-size: .75em;
    background: #b22316 url('texture.png') no-repeat right bottom;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    text-transform: uppercase;
}

.btn-small:hover {

    background-color: #c62718;
}

.submit-btn {
    padding: 10px 25px;
    margin: 20px 0 50px 0;
    color: #faf3bc;
    font-family: 'Nunito', sans-serif;
    border: 0;
    font-weight: 100;
    font-size: .75em;
    background: #b22316 url('texture.png') no-repeat right top;;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    text-transform: uppercase;
}

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

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

ul.nav li.last {
    margin: 0;
    padding: 10px 25px;
    color: #faf3bc;
    font-family: 'Nunito', sans-serif;
    border: 0;
    font-weight: 100;
    font-size: .75em;
    background: #b22316 url('texture.png') no-repeat right top;;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    text-transform: uppercase;
}

ul.nav li.last:hover {
        background-color: #c62718;
}

ul.nav li a {
    color: #faf3bc;
    display: block;
    text-decoration: none;
}

#intro {
    margin: 50px 0 75px 0;
}

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

#popular-cupcakes img {
    border: 8px solid #faf3bc;
}

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

#contact span{
    color: #b22316;
    font-weight: 600;
}

#copyright {
    border-top: 8px solid #2a0400;
    padding: 10px 0;
    margin: 15px 0;
    text-align: center;
}

Answer 9 · 2013-05-15T07:01:41Z

May 15, 2013 7:01am

Yes you are correct that I am having a tough time, a tough time with the idea that i have spent so much time trying to trace a problem in the css files to no avail...and even worked backward from the finished product.

I will say I havent had these kind of issues on lynda.com...just saying...and just fyi I looked for something stupid like a bracket semi colon etc and made plenty of those errors but like what shawn said found those within a few minutes the the UL and LI problem think there maybe be a problem with the order of the linked css files and this "clearfix" code thing you just had us throw in there and which is not really explained except for its purpose...

so yeah having a tough time with the idea of moving on to the other levels given that this simple stupid little problem sucked many hours to no avail...if you can help me get past this that would be great

Answer 10 · 2013-05-15T07:03:57Z

May 15, 2013 7:03am

oh and obviously the code doest past well in here...let me know if you would like me to email it...btw could it be the doctype or charset?

Answer 11 · 2013-05-15T14:46:12Z

May 15, 2013 2:46pm

Thank you James. Now I seem to be having an issue with the UL and LI dropping below the smells like bakin graphic and starting a whole new line...with lots of space between graphic and first header tag...do you see anything I could be missing...this was my original problem actually...and I guess in my attempts to fix it broke some other things which you pointed out nicely...thanks

here is my code for those sections

index

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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 rel="stylesheet" href="css/style2.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'> </head>

    <div class="grid_4">
        <img src="img/logo.gif" alt="Smells Like Bakin"/>
    </div>

    <div class="grid_9">
        <ul class="nav">
            <li><a href="#">About</a></li>
                <li><a href="#">Cupckaes & 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 especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious deserts</h1>
        <p><a href="#" class="btn">browse our cupckaes</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 bd">
            <h2>Cupckae of the Week</h2>
            <p>This week's featured cupcake is the <a href="#">Avacado Chocalate cupcake</a> Its a strainge combo of flavors will kick you raste buds into fiesta mode!</p>
            <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake"/>
        </div>


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

        <div class="grid_7 bd">
            <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 successful store front, catering business and cupcake truck. </p>
            <p><a href="#" class="btn-small">Read More</a></p>
        </div>

        <div class="grid_5 omega bd">
            <h2>Get Bakin' with US</H2>

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

                <p>We announce all of our new flavors first through facebook &amp; Twiiter, and even take requests</p>

                <a href="http://facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"></a>
                <a href="http://twitter.com/SmellsLikeBakin"><img src="img/twitter.gif" alt="Twitter"></a>
        </div>
                <div id="copyright" class="grid_12 bd">
                    <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved</p>
                </div>
</div><!--end container-->

</body> style.css file 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.75em; font-weight: 100; letter-spacing: -1.5px; }

h2 { font-size: 1.50em; font-weight: 100; color: #84C34F; }

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

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

}

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

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

ul.nav li a { color: #faf3bc; display: block; text-decoration: none; }

intro {

margin: 50px 0 75px 0px;

}

Answer 12 · 2013-05-15T15:01:28Z

May 15, 2013 3:01pm

oops here is my corrected HTML through Lint and still having same issue...must be css?

index.html?

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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 rel="stylesheet" href="css/style2.css" type="text/css" media="screen"/> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'/> </head>

    <div class="grid_4">
        <img src="img/logo.gif" alt="Smells Like Bakin"/>
    </div>

    <div class="grid_9">
        <ul class="nav">
            <li><a href="#">About</a></li>
                <li><a href="#">Cupckaes & 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 especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious deserts</h1>
        <p><a href="#" class="btn">browse our cupckaes</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 bd">
            <h2>Cupckae of the Week</h2>
            <p>This week's featured cupcake is the <a href="#">Avacado Chocalate cupcake</a> Its a strainge combo of flavors will kick you raste buds into fiesta mode!</p>
            <img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake"/>
        </div>


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

        <div class="grid_7 bd">
            <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 successful store front, catering business and cupcake truck. </p>
            <p><a href="#" class="btn-small">Read More</a></p>
        </div>

        <div class="grid_5 omega bd">
            <h2>Get Bakin' with US</H2>

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

                <p>We announce all of our new flavors first through facebook &amp; Twiiter, and even take requests</p>

                <a href="http://facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="Facebook"/></a>
                <a href="http://twitter.com/SmellsLikeBakin"><img src="img/twitter.gif" alt="Twitter"/></a>
        </div>
                <div id="copyright" class="grid_12 bd">
                    <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved</p>
                </div>
</div><!--end container-->

</body>

</html>

Answer 13 · 2013-05-15T15:05:43Z

May 15, 2013 3:05pm

I think it's your grid. At the top you've got grid 4 for the logo and then grid 9 for the navigation but if you want them to line up then they should equal 12 as the project using a 12 column grid.

So if you changed it to grid_3 and grid_9 (assuming grid_3 is big enough for the logo) and then also give grid_9 the class omega so the right padding is removed which would also push it down to the next line.

Answer 14 · 2013-05-15T15:14:11Z

May 15, 2013 3:14pm

Thanks Joss...it worked when I did Grid_4 for the logo and grid 8 with omega for the nav div...finally... ;) Thanks again for all the all help...btw this is not what is explained in the instructions...its off by one

Answer 15 · 2013-05-15T15:25:40Z

May 15, 2013 3:25pm

Hey Paul Smith -

btw this is not what is explained in the instructions...its off by one

I'm not sure what you mean by off my one.

In the Working with Grids video, Nick mentions using grid_8 & omega.

Let me know if I'm missing something.

From the Transcript:

04:12 and just before the image of our logo. 04:16 So let's go ahead and type out a div, and we'll give it the class grid_4 04:23 and then we'll go ahead and close that div around our logo.

04:57 Now let's go ahead and add a grid class around our navigation. 05:02 We'll create a div here 05:08 and we'll give it the class grid_8. 05:11 And then we're going to give it another class called omega. 05:18 So let's go ahead and close that around our navigation.

Answer 16 · 2013-05-16T02:47:04Z

May 16, 2013 2:47am

Yeah your right Im the idiot...can't believe I missed that...damn it...Im such an idiot...anyways I am feeling better about myself and this whole css training...what is that saying perfect makes practice...oFf topic i think i need to work on my spelling and css syntax...that has the browser all kind of confused...and my links are a bit messed up too...anyhow thanks for your patience and positive support...

Answer 17 · 2013-05-16T02:54:52Z

May 16, 2013 2:54am

and just a suggestion you might want to mention to use a HTML validation tool like Lint to troubleshoot issues. Not trying to be right here, just saying that would be helpful for a lot of ppl especially newbies like me that are excited to learn this stuff and then get stuck for countless hours because we didnt know that was available...I almost gave up...

Welcome to the Treehouse Community

Looking to learn something new?

Paul Smith

Paul Smith

CSS training build your first website...not working as taught

17 Answers

James Barnett

James Barnett

Shawn Katzenmeier

Shawn Katzenmeier

Shawn Katzenmeier

Shawn Katzenmeier

Brian MacDonald

Brian MacDonald

Shawn Katzenmeier

Shawn Katzenmeier

Shawn Katzenmeier

Shawn Katzenmeier

Paul Smith

Paul Smith

Paul Smith

Paul Smith

Paul Smith

Paul Smith

Paul Smith

Paul Smith

Paul Smith

Paul Smith

intro {

Paul Smith

Paul Smith

Joss Daniels

Joss Daniels

Paul Smith

Paul Smith

James Barnett

James Barnett

Paul Smith

Paul Smith

Paul Smith

Paul Smith