Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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; }

/****Navigation****/

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****/

wrapper {

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

/****About****/

.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); }

/****Contact****/

/****Footer****/

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>