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

HTML

Posted by Scott Dawson
Scott Dawson
206 Points

Problem linking files

I am a complete beginner so bear with me. I am at Stage 3 on Creating a Website Structure (Working with Grids) which is basically the point in which we first use the grid structure in the HTML.

I think the problem I am having is that there may be an issue connecting the Css pages to the HTML. As far as I can see my coding is fine (I may be wrong of course) but this is how it should look:

[URL=https://imageshack.com/i/mk1t4ij][IMG]http://imagizer.imageshack.us/v2/xq90/812/1t4i.jpg[/IMG][/URL]

And this is how mines currently looks:

img 1, img 2

Here is my coding:

Imgur

Here is the folder I am working within:

Imgur

Does anyone have any idea of where I might be going wrong? If you need any further images or information please do not hesitate to ask, any help would be much appreciated.

Thanks Scott

Scott Dawson
Scott Dawson
206 Points

Also having trouble inserting images as you can see, I have them saved in a folder on my desktop called "Temp" and to insert the images I put !(/temp/coding.jpg "Coding") with [alt text] after the exclamation mark. Am I doing something wrong?

Alex Gustafson
Alex Gustafson
14,207 Points

To properly insert images, you'll need to host them on the web somewhere, not just on your machine. Lots of free image hosting out there, but I like imgur for one-time uses like this.

If your images are just example of code, you can actually just copy+paste code

<html>
<body>
<p>So it will look like this.</p>
</body>
</html

Just check out the Markdown Cheatsheet for that code formatting.

Scott Dawson
Scott Dawson
206 Points

Thanks, that should be the images loaded now.

3 Answers

Alex Gustafson
Alex Gustafson
14,207 Points
Alex Gustafson
Alex Gustafson
14,207 Points

Did a quick glance-over,and it does appear your HTML is all correct with the given project files. Linking the stylesheets to the HTML appears to be done correctly...

I don't see an uploaded image for your CSS code, and all the discrepancies appear to be in positioning relative to the grid... which is in the CSS. Your HTML divs appear to have the correct classes.

So I'd go through your CSS and make sure you don't have any typos for the classes that affect these divs...

  1. Navigation links( classes .grid_8 and .omega)
  2. the "You Bake Me Blush" image (.grid_3 and .omega)
  3. Inside the kitchen (.grid_7)
  4. Get bakin' with us (.grid_5)
  5. copyright (.grid_12)
Scott Dawson
Scott Dawson
206 Points

Hi Alex, thanks for the advise. I have looked through the CSS and can't see any typos plus it was a sheet included in the folder given to me by Treehouse so I wouldn't have thought there would be any mistakes. This is how it looks: [URL=https://imageshack.com/i/0mazq2p][IMG]http://imagizer.imageshack.us/v2/xq90/22/azq2.png[/IMG][/URL] Is there anything I might have done before this stage that may have broken a link between the HTML page and the CSS ones?

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Scott Dawson,

It looks like you're missing the = in one of your id attributes. Take a look at <div id"featured-cupcake" class="grid_7">. It needs to be <div id="featured-cupcake" class="grid_7">

Hope this helps! :)

Chandan K. Sah
PLUS
Chandan K. Sah
Courses Plus Student 12,665 Points
Chandan K. Sah
Chandan K. Sah
Courses Plus Student 12,665 Points

You need to upload your image properly before we can help you.