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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Patti Nearing
Patti Nearing
696 Points

Using Windows -- listening to video " Style the Portfolio" Why don't I see changes on my exercise page.

In the video, Nick shows the code for - text-align: center - in the nav command. My text did not center -- also -- in thepage: portfolio section -- he coded the background-color: #f5f5f5; Then the color: #bdc3c7. My code did not make these changes -- WHY???
If you need to see the code do I put ```css at the section where I am or at the top and you get all of the code ???

notf0und
notf0und
11,940 Points

Are you using Workspace? To post code, follow this guide https://teamtreehouse.com/forum/posting-code-to-the-forum

Patti Nearing
Patti Nearing
696 Points 
   <div id="wrapper">
    <section>
      <ul id="gallery">
        <li>       
        <a href="img/numbers-01.jpg">        
        <img src="img/numbers-01.jpg" alt="">
       <p>Experimentation with color and texture.</p>
       </a>
        </li>

      <li>    
        <a href="img/numbers-02.jpg">        
       <img src="img/numbers-02.jpg" alt="">

OK, thanks, and here is what I coded !!

/********************
NAVIGATION
*********************/
nav { 
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
  }

nav li {
  display: inline-block
}  

/********************
FOOTER
*********************/
footer {
  font-size: 0.75em;
  text-align: center; 
  padding-top: 50px;
  color: #ccc;
}

/********************
PAGE: PORTFOLIO
*********************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

3 Answers

Thomas van Oosterhout
Thomas van Oosterhout
7,516 Points
Thomas van Oosterhout
Thomas van Oosterhout
7,516 Points

I think ether ur css is not connected to your pages or the file-path is incorrect.(see below).

The head should look like this:(ecxluding the google-font line)

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, intial-scale=1.0">
  </head>

The order of the css files are important so make sure that they are in this order. If they are check the file-patch as in the folder u keep the html files has a folder in it called css with the all the css files.

I hope this cleared somethings up and try to stay calm, i know it not easy when somethings wrong and u don't know why but try ;-).

If this did not help i would like to see the full site content if u can give it in a link that would be great.

Thomas van Oosterhout
Thomas van Oosterhout
7,516 Points
Thomas van Oosterhout
Thomas van Oosterhout
7,516 Points

ur code seems fine exept from

nav li { display: inline-block }

missing the ; but workspace should compensate for it.

did u add the ccs file to the index.html? if so in the right order(after normalize.css)? and if so did u check the filepatch? If this does not work try watch the video's where te css file is added to the html(<link>).

Patti Nearing
Patti Nearing
696 Points
Patti Nearing
Patti Nearing
696 Points

Thomas, thanks ----I do not know what you mean when you say "link the css to the HTML"

I did fix the ; on the nav li: line-block; but now when I pull up the page with the example of the finished product it is all messed up. images not in two columns printing color is wrong things are not centered Face-book icon is too big

I am sooooooooooo frustrated !!!!!!!