Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Jerome Pratt
Jerome Pratt
3,981 Points

CSS Tutorial float:left header issue.

So I'm following along the web development tutorial exactly as it says in the videos and it has been going well so far.

However during the video "Build Navigation with Unordered Lists" I'm instructed to float the header left whilst getting rid of the gap at the top of the browser.

I tried to do exactly what he did (and I've tried for about an hour now to see where I went wrong) but it isn't formatting properly for me and I'm seeing a gap there UNLESS I take away the float: left but I'm sure it will cause problems later if I do.

Here is the Css code can someone tell me what has happened by any chance?

/***********************************
GENERAL
************************************/


body {
  font-family:'Yanone Kaffeesatz', serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration:none
}

img{
  max-width: 100%;
}


/***********************************
HEADING
************************************/
header {
  float:left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}


#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Volkhov' , sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/***********************************
NAVIGATION
************************************/

nav {
  text-align: center;
  padding:: 10px 0;
  margin: 20px 0 0;
}



/***********************************
FOOTER
************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}



/***********************************
PAGE: PORTFOLIO
************************************/

#gallery {
  margin:: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 1em;
  color: #bdc3c7
}

/***********************************
COLOURS
************************************/

/* site body */

body {
  background-color: #fff; 
  color: #999;    
}

/* green header */
header {
  background-color:#6ab47b;
  border-color: #599a68
}

/* nav background on mobile devices */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color:#6ab47b;
}

/* nav links */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav links */
nav a.selected, nav a:hover {
  color: #32673f
}

5 Answers

Daniel Burt
Daniel Burt
3,699 Points

Jerome, check your syntax. I can see an awful lot of missing semicolons in your code.

Jerome Pratt
Jerome Pratt
3,981 Points

Many thanks for responding Daniel,

I have just double checked it and have put semi-colons at the end of each declaration that was missing it.

However the issue has not been resolved as a result.

Are there other syntax issues or could there be something else?

/***********************************
GENERAL
************************************/


body {
  font-family:'Yanone Kaffeesatz', serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration:none;
}

img{
  max-width: 100%;
}


/***********************************
HEADING
************************************/
header {
  float:left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}


#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Volkhov' , sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/***********************************
NAVIGATION
************************************/

nav {
  text-align: center;
  padding:: 10px 0;
  margin: 20px 0 0;
}



/***********************************
FOOTER
************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}



/***********************************
PAGE: PORTFOLIO
************************************/

#gallery {
  margin:: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 1em;
  color: #bdc3c7;
}

/***********************************
COLOURS
************************************/

/* site body */

body {
  background-color: #fff; 
  color: #999;    
}

/* green header */
header {
  background-color:#6ab47b;
  border-color: #599a68;
}

/* nav background on mobile devices */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color:#6ab47b;
}

/* nav links */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav links */
nav a.selected, nav a:hover {
  color: #32673f;
}
Daniel Burt
Daniel Burt
3,699 Points

Edited post.

Thought it was a validation issue as well as just a code issue.

Hi Jerome, your header has a top padding of 5px and your nav has a top padding of 10px. I have not looked at the code challenge that you're on, but I think that if you are floating the header left so that the nav will appear next to it, the padding may be an issue. A good rule of thumb is to use padding as little as possible, and use margins, widths and heights to position content.

Jerome Pratt
Jerome Pratt
3,981 Points

Many thanks to both of you for your responses. After following Daniel's advice to take out the spaces before the colons I noticed that I had mistakenly put two colons in certain places instead of 1. Taking this out has fixed the issue.

Diane I will take heed of that advice in the future as well, cheers!