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
Perry Schofield
1,246 PointsMy 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
27,237 PointsIt 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.
Shawn Ramsey
27,237 PointsAre 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
1,246 PointsHi 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
27,237 PointsHmm... 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?
Perry Schofield
1,246 PointsHere is a Dropbox link to my CSS, if it's helpful I can also create one for the HTML;
https://www.dropbox.com/s/5610p9a5vkjyrcy/main.css?dl=0
EDIT: HMTL;
Perry Schofield
1,246 PointsPerry Schofield
1,246 PointsBrilliant, it works perfectly now Shawn! I owe that one to me not paying attention. Thanks very much for your help, much appreciated!