There’s something weird going on with my code… can someone explain / fix it?.
HTML –
<html>
<head>
<link rel="stylesheet" href="home.css">
<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">
</head>
<body>
<div class="navigationBar">
<ul class="pull-left">
<li>
<a href="#" style="color: white; font-size: 20; font-family: 'basic title font', Times, sans-serif; font-weight: bold;" class="soccerAcademyLogo">
<!-- <img src="http://i.imgur.com/eLizZ2a.png" alt="http://i.imgur.com/eLizZ2a.png" width="130" height="75" class="soccerAcademyLogo">-->
<span class="soccerAcademyLogo">FANTASTIC LOGO</span>
</a>
</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" style="color: white; font-size: 20; font-family: 'basic title font', Times, sans-serif; font-weight: bold;" class ="loginButton" >
LOG IN
</a>
</li>
<li>
<a href="#" style="color:white; font-size: 20; font-family: 'basic title font', Times, sans-serif; font-weight: bold;" class="signupButton">
SIGN UP
</a>
</li>
</ul>
<ul>
<li>
<a href="#" style="color: white; font-size: 20; font-family: 'basic title font', Times, sans-serif; font-weight: bold" class="learnMore">
<!-- LEARN MORE-->
</a>
</li>
</ul>
<h1 class="sloganPart1" style="color: white; font-family: 'basic title font', Times, sans-serif; font-weight: bold; font-size: 100px;">THE GAME WE PLAY.</h1>
<h1 class="sloganPart2" style="color: white; font-family: 'basic title font', Times, sans-serif; font-weight: bold; font-size: 105px;"><em>THE GAME WE LOVE.</em></h1>
<span class="learnMore" style="color: white; font-family: 'basic title font', Times, sans-serif; font-weight: bold; font-size: 20px;">
LEARN MORE
</span>
</div>
</body>
</html>
CSS –
/*
Table of Contents
1. Button Animations... Line: (14 - x)
2. Navigation Bar... Line (x)
3. Background Details... Line (x)
4.
*/
.navigationBar li { display: inline; }
.pull-right { margin-top: 30px; }
.loginButton {
margin-right: 50px;
border-style: solid;
border-color: white;
border-width: 3px;
padding-bottom: 9px;
padding-top: 14px;
padding-right: 50px;
padding-left: 45px;
}
.signupButton {
margin-right: 50px;
border-style: solid;
border-color: white;
border-width: 3px;
padding-bottom: 9px;
padding-top: 14px;
padding-right: 45px;
padding-left: 45px;
}
.soccerAcademyLogo { margin-top: 5px; }
/*Chapter 2*/
.pull-right li {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.pull-right li:hover, .pull-right li:focus, .pull-right li:active {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
.navigationBar a:hover { text-decoration: none; }
.navigationBar a { text-decoration: none; }
/*Chapter 3*/
.navigationBar {
background-image: url("http://i.imgur.com/ld48nFB.png");
width: 1242px;
height: 600px;
}
.learnMore {
border-style: solid;
border-width: 3px;
border-color: white;
padding-bottom: 45px;
padding-right: 45px;
padding-left: 45px;
padding-top: 45px;
margin-top: 300px;
}
.sloganPart2 {
margin-top: 20px;
margin-left: 170px;
}
.sloganPart1 {
margin-top: 155px;
margin-left: 213px;
Why is their that extra box near the logo…
learn how to inspect code, it makes that you can resolve this issue within the minute, this line is the box:
<a href="#" style="color: white; font-size: 20; font-family: 'basic title font', Times, sans-serif; font-weight: bold" class="learnMore"><!-- LEARN MORE--></a>
If I delete that part, everything recallibrates, and moves down… why?
because you programmed it that way? I feel like you deleted it, and without trying to do anything else now have this problem. If you still have this problem later on, you can ask me. Now it is your turn to figure it out
I’ve already been decoding for over an hour, and I came across this solution, but as you see, it opened the door to another issue. That’s why I messaged you, I have been attempting this for over an hour. I’m still fairly new to this, so if you could kindly help me out, that would be great. 
your .sloganpart1 has a huge margin-top, when your unordered list holding:
<a href="#" style="color: white; font-size: 20; font-family: 'basic title font', Times, sans-serif; font-weight: bold" class="learnMore"><!-- LEARN MORE--></a>
this margin pushed against this unordered list, but now that unordered list is gone it pushes against the top of your document
But why does everything recallibrate? Do I have to reposition everything? (And there’s still a little opening, none of the other “margin-tops” are creating that…
don’t know, i never understood that. but as you can see in this simplified example the margin-top will push down it’s parent when using margin, you could use top (top doesn’t work on static elements)
I’ve narrowed it down to the h1;
<html>
<head>
<link rel="stylesheet" href="home.css">
<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">
</head>
<body>
<div class="navigationBar">
<ul class="pull-left">
<li>
<a href="#" style="color: white; font-size: 20; font-family: 'basic title font', Times, sans-serif; font-weight: bold;" class="soccerAcademyLogo">
<!-- <img src="http://i.imgur.com/eLizZ2a.png" alt="http://i.imgur.com/eLizZ2a.png" width="130" height="75" class="soccerAcademyLogo">-->
<span class="soccerAcademyLogo">FANTASTIC LOGO</span>
</a>
</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" style="color: white; font-size: 20; font-family: 'basic title font', Times, sans-serif; font-weight: bold;" class ="loginButton" >
LOG IN
</a>
</li>
<li>
<a href="#" style="color:white; font-size: 20; font-family: 'basic title font', Times, sans-serif; font-weight: bold;" class="signupButton">
SIGN UP
</a>
</li>
</ul>
<h1>THE GAME WE PLAY.</h1>
</div>
</body>
</html>
/*
Table of Contents
1. Button Animations... Line: (14 - x)
2. Navigation Bar... Line (x)
3. Background Details... Line (x)
4.
*/
.navigationBar li { display: inline; }
.pull-right { margin-top: 30px; }
.loginButton {
margin-right: 50px;
border-style: solid;
border-color: white;
border-width: 3px;
padding-bottom: 9px;
padding-top: 14px;
padding-right: 50px;
padding-left: 45px;
}
.signupButton {
margin-right: 50px;
border-style: solid;
border-color: white;
border-width: 3px;
padding-bottom: 9px;
padding-top: 14px;
padding-right: 45px;
padding-left: 45px;
}
.soccerAcademyLogo { margin-top: 5px; }
/*Chapter 2*/
.pull-right li {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.pull-right li:hover, .pull-right li:focus, .pull-right li:active {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
.navigationBar a:hover { text-decoration: none; }
.navigationBar a { text-decoration: none; }
/*Chapter 3*/
.navigationBar {
background-image: url("http://i.imgur.com/ld48nFB.png");
width: 1242px;
height: 600px;
}
.learnMore {
border-style: solid;
border-width: 3px;
border-color: white;
padding-bottom: 9px;
padding-top: 14px;
padding-right: 45px;
padding-left: 45px;
}
This is causing the issue;
<h1>THE GAME WE PLAY.</h1>
But why?
causing what kind of issue?
The little what space above the background… and everything…
your h1 still has margin, if you add h1 { margin-top: 0; } the spacing above background is gone.
That didn’t work… Huh… I’ll try top instead of margin-top…
Edit: Neither worked.
because h1 does have a margin in the browser default stylesheet?
Okay, next time you want help, show me what you have tried
I’m still stuck on this, and I’m trying to fix it… I honestly don’t know what to do, since I’m still new to this. Is there any way to fix this?
works fine?
You really need to break it down in tinier steps
Yeah, must be something with my browser than… It’s not being resolved. It works on the jsfiddle.net, but not with the program I use, which shows the file in google chrome.
I CAN JUST USE < p > AND INCREASE THE FONT-SIZE… AHH!!
it works in chromium as well
I apologize for the interminable stream of queries, but you’re extremely helpful. So I’ve placed that < p > element, however if I try to adjust it with:
margin-top:
the whole thing moves…
If I try to adjust it with
top:
nothing moves…
i can quote myself here:
that last bit: top doesn’t work on static elements, is why nothing moved