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 trialmm4
8,600 PointsCenter the wrapper
From the ID Selector video, I have:
a {
text-decoration: none;
}
which works in removing the underlines, but
#secnfoot {
max-width: 940px;
margin: 0 auto; <!-- top, bot; L, R -->
background: orange;
}
does not do anything. I looked back at index.html which has
<div id="secnfoot">
<section>
Why isn't the content enclosed by div not acting the way it should?
4 Answers
David Tonge
Courses Plus Student 45,640 PointsWow, I found the problem. LOL. It was the comment syntax! It cancelled out the margin property and everything below.
#secnfoot {
max-width: 940px;
margin: 0 auto; /*comment*/
background: orange;
}
working pen:
http://codepen.io/anon/pen/HlErp
BUT I also want to tell you that your html is also has spaces in the src links. You might want to fix that to prevent your images from not showing up correctly.
Bryan Knight
34,215 PointsI'm not seeing anything wrong with the syntax is there more to the code that you can provide?
mm4
8,600 PointsSure, Here's my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>M | M</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html">
<h1>MM</h1>
<h2>La Misteriosa</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="secnfoot">
<section>
<ul>
<li>
<a href="Locker Postcards/postcard.jpg">
<img src="Locker Postcards/postcard.jpg" alt="">
<p>Postcard from last year.</p>
</a>
</li>
<li>
<a href="Locker Postcards/A True Princess.JPG">
<img src="Locker Postcards/A True Princess.JPG" alt="">
<p>My favorite princess.</p>
</a>
</li>
<li>
<a href="Locker Postcards/Teen Titans.jpg">
<img src="Locker Postcards/Teen Titans.jpg" alt="">
<p>4th grade TV show.</p>
</a>
</li>
<li>
<a href="Locker Postcards/Page 394.JPG">
<img src="Locker Postcards/Page 394.JPG" alt="">
<p>Snape at his best.</p>
</a>
</li>
<li>
<a href="Locker Postcards/Battle the Dark.JPG">
<img src="Locker Postcards/Battle the Dark.JPG " alt="">
<p>Battle the dark!</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://twitter.com/mm">
<img src="img/twitter.png " alt="Twitter logo">
</a>
<a href="https://www.facebook.com/mm">
<img src="img/facebook.png " alt="Facebook logo">
</a>
<a href="contact.html">
<img src="img/phone.png " alt="Phone number">
</a>
<a href="contact.html">
<img src="img/mail.png " alt="Email address">
</a>
<p>© 2014 M&M.</p>
</footer>
</div>
</body>
</html>
And here is my main.css:
a {
text-decoration: none;
}
<!-- selects the div we tagged -->
#secnfoot {
max-width: 940px;
margin: 0 auto; <!-- top, bot; L, R -->
background: orange;
}
David Tonge
Courses Plus Student 45,640 PointsYou're setting a max-width but you haven't set a default width on #secnfoot.
mm4
8,600 PointsHmm... that doesn't work, though. I tried playing around with the numbers and I'm still not getting it...
David Tonge
Courses Plus Student 45,640 PointsYour body also needs a height. I'll write some code for you to show you a general set-up then you could build on that. Gimme a sec.
mm4
8,600 PointsI'm afraid I lost you. I don't understand why I need to add the extra stuff like height; I was just following Nick's tutorial at http://teamtreehouse.com/library/how-to-make-a-website/css-cascading-style-sheets/center-the-wrapper and I can't figure out why, when closely following his steps, I can't see the same results...
David Tonge
Courses Plus Student 45,640 PointsI didn't realize you were following the video. I'll take a look at your code again.
Bryan Knight
34,215 PointsYes so you can set a default width on the body or html tag of a larger size than the max width and you'll see it happen.
mm4
8,600 Pointsmm4
8,600 PointsOh my gosh... I thought that the comment syntax was the same for HTML and CSS. Well, there goes 2-3 hours of paranoia. Thanks for all your help!!
Oh wait, one last thing: I titled my images with spaces, so it wasn't originally Page_394, it was just Page 394. Same thing with the name of the containing folder (Locker Postcards, not Locker_Postcards.) My images have been showing up correctly so I was wondering if I should just be wary for the future?
David Tonge
Courses Plus Student 45,640 PointsDavid Tonge
Courses Plus Student 45,640 PointsLet's say you take your site online then the links would be broken.
mm4
8,600 Pointsmm4
8,600 PointsAh, I see. Thanks for the heads-up.