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

Posted by Tom Coady
Tom Coady
369 Points

How do I get the DIV wrapper to center my content? Can't get text decoration to work either.

This is the code that I have but it doesn't seem to be yielding any results.

Any help would be great!

Thank you!

<body> <div id="wrapper"> <header> <a href="index.html" id="logo"> <h1><a href="index.html">CoadyCreative</a></h1> <h2><a href="index.html">Crafty Creative</a></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> <section> <ul> <li> <a href="Img/numbers-01.jpg"> <img src="Img/numbers-01.jpg" alt="Img/numbers-01.jpg"> <p><strong> David Mackay Photography </strong></p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="Img/numbers-02.jpg" alt="numbers-02.jpg"> <p>The Australian Lung Foundation</p> </a> </li> <li> <a href="Img/numbers-06/jpg"> <img src="Img/numbers-06.jpg" alt="numbers-06.jpg"> <p>Dr Deb's</p> </a> </li> </ul> </section> <footer> <p>© Coady Creative.</p> <a href="http://www.twitter.com/nickrp"><img src="Img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://www.facebook.com/tom.coady.3"><img src="Img/facebook-wrap.png" alt="Facebook Logo"></a> </footer> </div> </body> </html>

CSS

a { text-decoration: none; }

wrapper {

max-width: 940px; margin: 0 auto 0 auto;

}

Tom Coady
Tom Coady
369 Points

This is the remaining code:

<footer>
  <p>&copy; Coady Creative.</p>
  <a href="http://www.twitter.com/nickrp"><img src="Img/twitter-wrap.png" alt="Twitter Logo"></a>
  <a href="http://www.facebook.com/tom.coady.3"><img src="Img/facebook-wrap.png" alt="Facebook Logo"></a>
</footer>

</div> </body> </html>

Cheers

Tom

Pedro Cabral
.a{fill-rule:evenodd;}techdegree
Pedro Cabral
Full Stack JavaScript Techdegree Student 23,916 Points

Your current selector is targeting a wrapper element, you want to target an id named wrapper instead, in your CSS: #wrapper (hash symbol is missing) also you can use short syntax by only using two words in your declaration block: 0 auto;

Tom Coady
Tom Coady
369 Points

This is my CSS but still not working a { text-decoration: none; }

wrapper {

max-width: 940px; margin: 0 auto;

}

The hash is before the wrapper but it doesn't seem to be pasting in.

5 Answers

Pedro Cabral
seal-mask
.a{fill-rule:evenodd;}techdegree
Pedro Cabral
Full Stack JavaScript Techdegree Student 23,916 Points
Pedro Cabral
.a{fill-rule:evenodd;}techdegree
Pedro Cabral
Full Stack JavaScript Techdegree Student 23,916 Points

What I meant was for you to add a # symbol before your wrapper word: #wrapper If it still doesn't work, can you please show how you are linking your CSS file?

Tom Coady
Tom Coady
369 Points
Tom Coady
Tom Coady
369 Points

Sorry what do you mean by linking your CSS file?

Pedro Cabral
.a{fill-rule:evenodd;}techdegree
Pedro Cabral
Full Stack JavaScript Techdegree Student 23,916 Points

The portion of your .html file where you have your you are linking to your stylesheet, should be in the head of the document, is that present?

Tom Coady
Tom Coady
369 Points
Tom Coady
Tom Coady
369 Points

Can you tell me how I can post all of my code because it continues to cut it off. That way I can show you what I am doing. Cheers Tom

Pedro Cabral
.a{fill-rule:evenodd;}techdegree
Pedro Cabral
Full Stack JavaScript Techdegree Student 23,916 Points

Maybe try to take a snapshot of your workspace and share the link here: with your workspace open on the top right corner press the "camera" icon, first from the left.

Tom Coady
Tom Coady
369 Points
Tom Coady
Tom Coady
369 Points

Hi Pedro

sorry it has taken so long to get back to you.

I hope you or someone can help me to sort out this problem. I wasn't aware that you could take a snapshot until today. Here are my links:

https://w.trhou.se/lgkdxysdbd https://w.trhou.se/ao5zuw3fg4 https://w.trhou.se/7pgt9wzq88

Cheers Tom

Pedro Cabral
seal-mask
.a{fill-rule:evenodd;}techdegree
Pedro Cabral
Full Stack JavaScript Techdegree Student 23,916 Points
Pedro Cabral
.a{fill-rule:evenodd;}techdegree
Pedro Cabral
Full Stack JavaScript Techdegree Student 23,916 Points

Hi Tom, thank you for the links. In the code you refer to the css folder with lower case whereas in your folder structure you named your folder in uppercase. If you rename it to "css" instead of "CSS" your content will get centered.

Tom Coady
Tom Coady
369 Points

Thank you so much Pedro. Appreciate your help very much. The funny was that I put some html between my style tags and managed to achieve the same result. :)