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 CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

Nothing Is Moving Into Position

I Have A CSS File Written Up On Sublime And It Didn't Do Anything So I Downloaded Bootstrap And Added It To My Sublime In The Directory And I Added The Bootstrap Link To My HTML Head And Still Nothing. Can Anyone Help Me To Move The Images And Text Into The Correct Position???

8 Answers

Ian Lunn
Ian Lunn
4,558 Points
Ian Lunn
Ian Lunn
4,558 Points

Please show us your file structure, ie:

index.html
main.html
css
- styles.css

And the HTML you are using to link the CSS file, ie:

<link rel="stylesheet" media="screen" href="css/styles.css" />
CRYSTAL MORRIS
PLUS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

<!DOCTYPE.HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html: charset=utf-8"/> <link rel="stylesheet" href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" type="text/css" media="screen">
<title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div> (STUFF IN THE MIDDLE)

</div> </body> </html>

CRYSTAL MORRIS
PLUS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

/* Width: 1000px

Columns: 12

Column width: 65px Gutter: 20px

*/ .grid_1 { width: 65px; } .grid_2 { width: 150px; } .grid_3 { width: 235px; } .grid_4 { width: 320px; } .grid_5 { width: 405px; } .grid_6 { width: 490px; } .grid_7 { width: 575px; } .grid_8 { width: 660px; } .grid_9 { width: 745px; } .grid_10 { width: 830px; } .grid_11 { width: 915px; } .grid_12 { width: 1000px; }

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12,{ margin: 0 20px 10px 0; float: left; display: block; }

.alpha{margin-left: 0px;} .omega{margin-right: 0px;}

.container{ width: 1000px; margin: auto; }

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block:font-size:0;line}

Ian Lunn
Ian Lunn
4,558 Points
Ian Lunn
Ian Lunn
4,558 Points

It sounds like you haven't linked to your CSS file correctly but it's difficult to show you how to fix it without seeing your file structure (how your files are laid out and in which folders), along with the href you've used in the <link> element.

Do you have a link to the project or a screenshot of your HTML file and the files/folders your project consist of?

CRYSTAL MORRIS
PLUS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

Yes, I Put Both The HTML And The CSS On CodePen.

CRYSTAL MORRIS
PLUS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

http://codepen.io/CMORRIS/pen/CuynD

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Crystal - In your codepen, I found this <link> tag:

  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">

What this is telling the browser in plain English is ...

Look for a directory named css which is inside the directory which has the HTML file then look for a file named grid.css.

So if you didn't unzip those directories and create a directory structure the same as Nick did in the video, that could be your issue.

If you are still having trouble, the issue is most likely path-related.

Read through these 2 articles on how file paths work:

Let us know if are still having issues after reading those articles.

CRYSTAL MORRIS
PLUS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points
CRYSTAL MORRIS
CRYSTAL MORRIS
Courses Plus Student 2,809 Points

I Deleted The Space Between The Colon And The Numbers In My CSS File And Everything Shifted Into Place...YAY!!! A Whole Week Of Redoing Everything And It Came Down To Closing A Space In My CSS.

Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px