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

Perry Schofield
Perry Schofield
1,246 Points

My code does not remove the bullet point nor do the images float in the #gallery/#gallery li portion(s) of the CSS.

index.html;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Perry Schofield | Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,700italic,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Perry Schofield</h1> <h2>Developer</h2> </a> <nav> <ul id="gallery"> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <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=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2016 Perry Schofield.</p> </footer> </div> </body> </html>

main.css;

/**************************************** GENERAL ****************************************/

body{ font-family: 'Source Sans Pro', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

/**************************************** HEADING ****************************************/

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Source Sans Pro', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2{ font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/**************************************** NAVIGATION ****************************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; color: #ccc; }

/**************************************** FOOTER ****************************************/

footer { font-size: 0.75em; text-align: center; padding-top: 50px; }

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

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

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

/**************************************** COLORS ****************************************/

/Sites BODY color/ body { background-color: #fff; color: #999; }

/HEADING color/ header { background: #6ab47b; border-color: #599a68; }

/NAV background color on mobile devices/ nav { background: #599a68; }

/LOGO text color/ h1, h2{ color: #fff; }

/LINKS color/ a { color:#6ab47b; }

/NAV links color/ nav a, nav a:visited { color: #fff; }

/SELECTED NAV links color/ nav a.selected, nav a:hover { color: #32673f; }

(apologies for the poorly formatted CSS)

EDIT: It's also worth noting that my code is correctly commented, (/**/) it just doesn't show as such in the textbox used to provide it.

EDIT2: Here is a dropbox link to my CSS which has actual structure; https://www.dropbox.com/s/5610p9a5vkjyrcy/main.css?dl=0

3 Answers

Shawn Ramsey
Shawn Ramsey
27,237 Points

It looks like you have the ul inside your nav targeted as the #gallery. Remove the id from the ul in the nav and move it to the ul after the section.

<nav>
  <ul>
     <li><a href="index.html" class="selected">Portfolio</a></li>
     <li><a href="about.html">About</a></li>
     <li><a href="contact.html">Contact</a></li>
   </ul>
 </nav>

So the unordered list in the section would look like this.

<section>
  <ul id="gallery">
     <li></li>
     <li></li>
     <li></li> 
  </ul>
</section>

This is a shortened example without all the code.

Perry Schofield
Perry Schofield
1,246 Points

Brilliant, it works perfectly now Shawn! I owe that one to me not paying attention. Thanks very much for your help, much appreciated!

Shawn Ramsey
Shawn Ramsey
27,237 Points

Are you targeting the ID's correctly by using the # symbol? For example:

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

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

You would need to do the same for #logo and #wrapper.

Perry Schofield
Perry Schofield
1,246 Points

Hi Shawn,

Yes I am, my CSS is structured in the exact same was as yours.

EDIT: My logo and wrapper ID's are also targeted correctly.

Shawn Ramsey
Shawn Ramsey
27,237 Points

Hmm... well, it's difficult to decipher the code posted, but my next guess would be that you have an open bracket somewhere in the CSS. Is there anyway you could repost the CSS using markdown so that we can pick through it a little bit better?