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
michael friedman
Front End Web Development Techdegree Student 352 PointsStyling Issues
I'm working on the styling the <div>"wrapper"</div> by using the main.css stylesheet and am not having any luck getting the code to work.
michael friedman
Front End Web Development Techdegree Student 352 Points6 Answers
Billy Bellchambers
21,689 Pointsyou wrapper is an id dont forget your "#" on id selectors.
Think your css should look like this.
a {
text-decoration: none;
}
#wrapper { /*----notice the # in front of the id name*/
max-width: 940px; /*---- be careful with spaces between values and units too the space you had isn't needed*/
margin: 0 auto;
padding: 0 5%;
background:orange ;
}
Thanks for sharing your workspace youve changed the selector correctly but make sure you delete that space between 940px.
also the other issue I see is the #wrapper itself isnt actually wrapping anything. The div is opened and immediately closed therefore the styles are being applied to a colapsed div due to no content. You need to move the closing wrapper tag to after your content like so.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Michael Friedman | Front-end Web Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html">
<h1>Michael Friedman</h1>
<h2>Front-end Developer</h2></a>
<nav>
<ul>
<li><a href="index.html">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">
<!-- old wrapper closing tag location, see new location below -->
<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>Playing with blending modes in Photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
</div> <!-- new wrapper closing tag location -->
<footer> <p>© 2016 Michael Friedman.</p>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
</footer>
</body>
</html>
This should now work
Richard Duffy
16,488 PointsHey,
I will take a guess at what your problem is. To centre any div you use:
css-selector {
margin: 0 auto;
}
Regards,
Richard.
michael friedman
Front End Web Development Techdegree Student 352 Pointsthanks. I have done that. I will post my html and css now. I thought it was attached to the problem automatically. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Michael Friedman | Front-end Web Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Michael Friedman</h1> <h2>Front-end Developer</h2></a> <nav> <ul> <li><a href="index.html">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"> </div> <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>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <p>© 2016 Michael Friedman.</p> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> </footer> </body> </html>
Here is my css
a { text-decoration: none; }
wrapper {
max-width: 940 px; margin: 0 auto; padding: 0 5%; background:orange ; }
michael friedman
Front End Web Development Techdegree Student 352 PointsI had the # already too but it changed it tobold when i pasted it.
michael friedman
Front End Web Development Techdegree Student 352 PointsI added a workspace if that helps https://w.trhou.se/jt5xxhrpgh
Billy Bellchambers
21,689 Pointscheck my comment under your original post about position of closing div tag on #wrapper
michael friedman
Front End Web Development Techdegree Student 352 PointsGot it, thanks Billy!
Billy Bellchambers
21,689 PointsNo worries happy coding
Billy Bellchambers
21,689 PointsBilly Bellchambers
21,689 Pointstry sharing your code with us using the markdown cheatsheet instructions below.
Or share your workspace using the snapshot workspace icon at top right of your workspace. Once you have created a snapshot copy and pate the snapshot address here so we can help you.