Code not working on a real server


#1

Hi Guys,
I'm working on "Learn More: Grid" and everything is going fine inside the online editor.
But when I copy the code inside the Codecademy editor to a real index.html/main.css file using a program like Sublime Text, the website doesn't look like it does in the Codecademy editor.

Things that happen.

  1. The background image in the Jumbotron doesn't show up.
  2. The navigation menu is using bullet points and is not positioned properly.

So, I'm using the exact code inside the Codecademy editor and using it in a "real life" situation, but I'm getting different results.
I hope anybody here can help me out, I love Codecademy!

Cheers!

Thomas.


#2

@webmaster70330

Hi,

can you pls paste in the header code then I can have a look..

Thanks


#5

@zainabrawat Hi, thanks for your fast reply, this is my header.

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    
  </head>

#6

@webmaster70330

the css file main.css is it saved in the same folder as you html ?


#7

@zainabrawat

Good one! No it wasn't, rookie mistake.
But now, the website is still not acting like in the Codecademy editor.


#8

@webmaster70330 what's different?

Can u send me screen shot of your code and what it looks like on codecademy


#9

Your probably missing to add a html file. To add on @zainabrawat point can you please write like your folder arrangments. Thankyou


#10

@zainabrawat

This is the codecademy code

@amanuel2
My folder arrangements is like this, I already css/main.css to my code to make it communicate with the right file.
The problem now is that the image is not loading and certain things are out of balance.

root
css --> main.css
index.html


#11

@zainabrawat

This is my code


#12

Would you mind copy pasting that background image. Seems that is what is causing the problem...


#13

@webmaster70330 your CSS pls


#14

It's this one.

Code looking like this.

.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}

.nav li {
display: inline;
}

.jumbotron {
background-image:url('http://s3.amazonaws.com/codecademy-content/courses/ltp/img/skyline.jpg');
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}

.jumbotron .container {
position: relative;
top:100px;
}

.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}

.jumbotron p {
font-size: 20px;
color: #fff;
}

.learn-more {
background-color: #f7f7f7;
}

.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}

.learn-more a {
color: #00b0ff;
}


#15

Sounds like this is an issue about folder overall. I will look in to the problem. And it will also would be lovely if you can read this. Thankyou


#16

Hi, thank you so much!
I will work on better formatting of my code next time. :slightly_smiling:


#17

@webmaster70330,

What are the HTML-div's doing in line 46 and 53 ???


#18

@webmaster70330 pls mark this post answered..

To avoid confusion


#19

Yea what @leonhard_wettengmx_n is trying to say is that you should close the divs. Are you fine now @webmaster70330?


#20

Yes, thank you, it works now.