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

Emily Larcher
Emily Larcher
220 Points

Logo Picture

I can't get my logo to be able to be seen? Also how do I get my logo to the top left corner?

Here is the HTML

<!DOCTYPE html> <html> <head> <meta charset ="utf-8"> <title>Wilde Web Design</title> <link rel ="stylesheet" href = "css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Philosopher:400italic|Montserrat+Alternates:700|Cinzel:900|Vollkorn:400italic' rel='stylesheet' type='text/css'> <link rel ="stylesheet" href = "css/main.css">

</head> <body> <header> <a href="index.html" id = "logo"> <h1>WILDE</h1> <h2>Web Design</h2>
</a>

  </header>
  <div id="wrapper">
  <nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html" class="selected">About</a></li>     
    <li><a href="contact.html">Contact</a></li>
    </ul>


      <h3>About</h3>   
    <about>
    <p>Wilde Web Design is a small buisness / realtor custom website company. Founded in Austin Texas Wilde Web Designs' mission is to provide affordable websites to realtors / small buisness owners all around the globe. We use custom built HTML and CSS for your company so you can stand out from all the compettition</p>

    </about>
    <logo>
       <img src="img/logo_950951_web-2.jpg" alt ="Wilde Web Design Logo" class="logo">  
        </logo>  

    <footer>    
   <p>&copy; 2014 Wilde Web Design</p>
 </footer>

    </div>
  </body>

/********************************** GENERAL ***********************************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

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

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/********************************** HEADING ***********************************/ h1 { margin: 0 auto; padding: 0 auto; }

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Philosopher', sans-serif; margin: 15px 0; font-size: 5em; font-weight: normal; line-height: 0.8em; }

h2 { font-family: 'Montserrat Alternates', sans-serif;align-content; font-size: 3em; margin: -5px 0 0; font-weight: normal; }

section{ font-family: 'Vollkorn', serif; Margin: 8px 0; font-size: 1.25em; }

/********************************** NAVIGATION ***********************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/********************************** FOOTER ***********************************/

footer { font-family: 'Cinzel' font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

/********************************** PAGE: PORTFOLIO ***********************************/

/********************************** PAGE: ABOUT ***********************************/

/********************************** PAGE: CONTACT ***********************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

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

/********************************** COLORS ***********************************/

/* site body */ body { background-color: fff; }

/* green header */ header { background: #fff; border-color: #599a68; }

/* nav background on mobile */ nav { background: #E9967A; }

/* logo text / h1 { color: #FF4500; } h2 { color: 000000; } / links */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #f8f8ff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; } section{ color:#000000; }

And CSS if you need it

Thanks!

3 Answers

Hi Emily, it may be that the relative link needs to have a '..' before it. As in, '../img/logo_950951_web-2.jpg'. As for top left corner, maybe:

logo img { top: 0; left: 0; }

idan ben yair
idan ben yair
10,288 Points

Hi Emily,

What I usually do when I need to input a picture or an image I rename the file to something simple so I wouldnt misspell anything, also you gotta remember its case sensitive, so I would advise changing the name of the file to logo.jpg next make sure its in the right directory. Is it located in the "img" folder? make sure. after that define a max-width for the image.

Let me know if that worked :)

Emily Larcher
Emily Larcher
220 Points

Im sorry but that is not working it is fine i think the image is the problem

idan ben yair
idan ben yair
10,288 Points

does the image open when you click on it?