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


Amanda Bater
Amanda Bater
7,686 Points

Building own website...a few questions

I've just finished build your own website and CSS basics course, I'm trying to put what I've learnt into practise my building my own simple website for my design business. I've just run into a couple of problems...

  1. On the contact details I'm trying to display the little logo next to the actual details, but they aren't appearing...have copied the same code used in the build your own website task so I'm not sure what I've missed out?

  2. In between the main heading/navigation and the main part of the website I'd like to add some space, so it's not all jammed up the top. I've been experimenting with padding and margins but I can't find anything which works how a want it to. Am I not targeting the correct things?

Here is my CSS:

/****Base Styles****/

  • { box-sizing:border-box; }

/****Element Borders****/


  • { border: 1px solid black; } */

/****Main Styles****/

body { color: #b2b2b2; margin:0; font: 1em/1.5 'Poiret One', Helvetica, Ariel, sans-serif; }

a { text-decoration: none; }

img { max-width: 100%; }

/****Main Heading****/

header { float:left; padding: 150px 0 0 10px; width: 100%; background: #cecece; }

.main-header { color: #808080; line-height: 0; }

h1 { font-size: 4em; font-family: 'Poiret One'; }

span { font-size: 1.5em; font-family: 'Poiret One'; }

logo {

float:left; text-align:left; margin-left: 5%; width: 45%; }

logo a, a:visited {

color: #808080; }


nav { background: none; float: right; text-align:right; margin-right: 5%; font-family: 'Poiret One'; width 45%; padding-top: 50px; }

nav ul { list-style-type: none; }

nav li { display: inline-block; padding: 0 15px 0 15px; }


wrapper {

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


.contact-info { list-style-type:none; padding:0; margin:0; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; color: #808080; }

.contact-info li.mail a { background-image: url(..img/maillogo.png); }

.contact-info li.twitter a { background-image: url(..img/twitterlogo.png); }



footer { font-size:12px; text-align:center; clear: both; padding-top:50px; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

2 Answers

How is the logo being called in the HTML? I noticed with the .contact-info li.twitter a { background-image: url(..img/twitterlogo.png); } that it doesn't have the "/" after the ".." characters. Should look like:

.contact-info li.twitter a { background-image: url(../img/twitterlogo.png); }

Amanda Bater
Amanda Bater
7,686 Points

Ah that's it! Always the simplest things. Thanks!

Here's my html if that helps with the logo thing...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>lionel+lavender | illustration and design</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header id="top" class="main-header"> <a href="index.html" id="logo"> <span class="title">illustration and design</span> <h1>lionel+lavender</h1> </a> <nav> <ul> <li><a href="https://www.etsy.com/uk/shop/LionelAndLavender">shop</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> </section> <footer> <a href="https://twitter.com/lionel_lavender"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <p>© 2016 lionel+lavender</p> </footer> </div> </body> </html>