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
Jerome Pratt
3,981 PointsCSS 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
3,699 PointsJerome, check your syntax. I can see an awful lot of missing semicolons in your code.
Jerome Pratt
3,981 PointsMany 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;
}
Jerome Pratt
3,981 PointsHere is a link so that you can see what is happening http://web.hgfe80evaf.treehouse-app.com/Index.html
Daniel Burt
3,699 PointsEdited post.
Thought it was a validation issue as well as just a code issue.
Diane Houghton
5,773 PointsHi 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
3,981 PointsMany 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!