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

Emily Larcher
Emily Larcher
220 Points
Posted by 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

Ben Ragsdale
Ben Ragsdale
14,187 Points
Ben Ragsdale
Ben Ragsdale
14,187 Points

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
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
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
idan ben yair
idan ben yair
10,288 Points

does the image open when you click on it?