Header and footer help

1

newbie here again.

I have a nav list in the header which i’m ok with the positioning but the footer nav element is on the right and i’m struggling to shift it over to the left. any help would be greatly appreciated. here is the html and css. If anything else looks wrong, please let me know:

HTML

<a href="#">Home</a>
<a href="#">Work</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</div>
	
<div id="Copyright"> All Content Copyright 2016 </div>

CSS

nav{
float: right;
font-family: ‘Open Sans’, sans-serif;
font-size: 15px;
letter-spacing: 0.09em;
margin: 30px 30px 0 0;

}

.header ul a {
margin-left: 20px;
font:
size: 14px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
color: black;
}
h1 {
text-align: center;
font-size: 55px;
font-family: ‘Open Sans’, sans-serif;
font-weight: 100;
color: white;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 90px 40 20px 40px;
clear: both;
}

span {
display: inline-block;
margin-top: 100px;
spacing: 0.5em;
border: white solid 10px;
padding: 2 5 2 5;

}
.quote {
line-height: 4px;
text-align: center;
font-size:18px;
font-family: ‘Open Sans’, sans-serif;
text-transform: uppercase;
color: white;
letter-spacing: 0.05em;
}

body p{
height: 200px;
width: 550px;
padding: 30px;
color: black;
font-size: 20px;
font-family: ‘Open Sans’, sans-serif;
display: block;
}

footer {
height:100px;
width: 100%;
background: url(Pictures/74H.jpg) center;
background-size: cover;
margin: -10;
padding: 5 5 5 5;
}

footer a{
float:left;
}

.lockup {
padding: 30px;
}
#Copyright {
float: left;
font-family: ‘Open Sans’, sans-serif;
margin: 38 0 0 0;
font-size: 10px;
text-transform: uppercase;
color: rgba(0,0,0,0.4);
}

2

Hi, @timmparsons. Do you have a Codepen link for this? Your code doesn’t render properly here because it’s not formatted.

3

Here is a codepen link http://codepen.io/timmparsons/pen/akrxNJ

On codepen, the ‘Tester // Los Angeles’’ won’t go under the main heading and I can’t get the footer nav to move to the left or in a list.

Any suggestions to help or if you notice anything else wrong would be greatly appreciated.

Thanks

4

Your <div>'s class name and the selector in the CSS don’t match; one is Quote but the other is quote.

Avoid using spaces in id names (or maybe you meant using class?).

Always specify units in CSS (px, em, etc.). I saw a margin: 38 0 0 0;. But units are not required for 0.

Add display: inline-block; to the copyright <div>, then margin: 38px 0 0 0; (this one lacked units)

5

Thanks. The footer nav still doesn’t move to the left for me.

Also, how do I remove the blue and underline from the nav links?

6

Oh, I think I misread about the footer nav. Sorry.

You can remove the link underlines with

/* or `nav a` */
a {
  color: black; /* or any other color */
  text-decoration: none;
}

Your <nav> has a float: right; property. You can move the <nav> in the footer by unsetting its float.

footer nav {
  float: unset;
}
7

I noticed a few things that may help when you’re using CodePen.

  • Remove the <head> section from the HTML section and go into Settings -> HTML -> Stuff for <head> and place this link <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> in it.
  • Remove the link to site.css all together since you can’t link to a local file from the pen
  • Either remove this line in your css background: url(Pictures/74H.jpg) center; or find a web linked version of it since it’s also attempting to link to a local file that doesn’t exist.
  • You have a class named ul. Just an FYI that it’s bad practice to name a class the same as an element. It could make it confusing and difficult to troubleshoot issues.

The HTML section of the pen is used as the <body> portion of the site you’re trying to build so any local links won’t work and any links to stylesheets will override anything that you have in your CSS section.

8

Thanks for all your help. This forum is amazing!