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 trialSimon Sporrong
35,097 Pointsnav li { display: inline-block; } doesn't work for me. Nothing happens.
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fanny Bengtsson | Veterinär</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Fanny Bengtsson</h1>
<h2>Veterinär</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class ="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="en gubbe>
<p>Experiment med grejer</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="en gubbe">
<p>Experiment med grejer</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="en gubbe">
<p>Experiment med grejer</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="en gubbe">
<p>Experiment med grejer</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="en gubbe">
<p>Experiment med grejer</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/simonsporrong"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/fanny.bengtsson.16"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2017 Simon Sporrong.</p>
</footer>
</div>
</body>
</html>
And the CSS:
/****************************************
General
****************************************/
body {
font-family: 'Open Sans', sans-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: 'Changa One', 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;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
/****************************************
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: 0.75em;
color: #bdc3c7;
}
/****************************************
Colors
****************************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav background on mobile */
nav {
background: #599a68;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
In the Navigation-section: the "nav li" rule doesn't do anything for me, the links ar just on top och eachother as before. What am i doing wrong? Thanks in advance!
Simon Sporrong
35,097 PointsYou're assuming correctly. Tried saving and refreshing a bunch of times. It's like the "nav li" rule can change anything. I can type "block" or "inline" or even "none" but it doesn't change anything.
Steven Sullivan
11,616 PointsTry adding a after li.
nav li a { display: inline-block; }
Steven Sullivan
11,616 PointsAdditionally, try it without li and only a.
nav a { display: inline-block; }
4 Answers
Leandro Botella Penalva
17,618 PointsI've found something strange,
nav li { display: inline-block; }
between the "li" and the "{" there is no space character even though it seems to. I suggest you to rewrite the entire line manually.
You can use this website when you encounter cases like this one for further information: https://jigsaw.w3.org/css-validator/
Simon Sporrong
35,097 PointsWow that's weird but it did work! Thank you so much :) And you to Steven!
Simon Sporrong
35,097 PointsThanks but that doesn't do anything either. Wtf am I doing wrong? :P
Steven Sullivan
11,616 PointsAll I can see is that your spacing is a little bit different than mine, but whitespace doesn't really matter in HTML. Not sure man! If I come up with something I'll let you know!
Leandro Botella Penalva
17,618 PointsYou missed a double quote in the alt attribute on this HTML line:
<img src="img/numbers-01.jpg" alt="en gubbe>
Simon Sporrong
35,097 PointsThanks, but it's not that either. Any other guesses? :)
jlampstack
23,932 PointsUse clear both in the wrapper. Instructor never showed this step.
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
clear: both; /*removes white space at top*/
}
Steven Sullivan
11,616 PointsSteven Sullivan
11,616 PointsCode looks correct. I'm assuming your HTML and CSS pages are saved and they don't have the red dot?