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 trialPedro Meio-Dia
3,896 Points.profile-photo { display: block; } doesn't work, why, if it is the right class and right declaration?
Is there any thing wrong with the code?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</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>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/gratt.png" alt="here is the discription of the image" class="profile-photo">
<p>Hi, my name is Pedro Meio-Dia and I will become soon a Front End Web Developper</p>
.profile-photo {
display: block;
}
doesn't work, why if it is the right class?
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: ‘Changa One’, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
img {
max-width: 100%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
3 Answers
Pedro Meio-Dia
3,896 PointsI sorted it out friends!
I wasn't aware of the css tab of the challange. Sam and steve, you both were right from the beginning.
Thank you so much,
God bless you for your generous helping hand.
Sam Baines
4,315 PointsHi Pedro - in this code challenge it asks for you to set the display: block; property using the image selector not the class, so like below:
img {
display: block;
}
So add this to your css code file.
Pedro Meio-Dia
3,896 PointsThanks Sam,
I did as you said but the "Bummer" is still there nonetheless.
Sam Baines
4,315 PointsI literally went to the code challenge and passed it using the img css selector - are you sure you are putting this code into the main.css file and not the html index file - there is a tab at the top of the code challenge.
Steve Hunter
57,712 PointsYou need to put the .profile-photo{}
part in the css file, not the html.
Steve.
Pedro Meio-Dia
3,896 PointsYes, I know. But since the the challange came with the html display and they told me to select the image, that's why I did so, though I found it strange too.
Steve Hunter
57,712 PointsI see. The word 'select' what is used to describe writing a line of code for that particular html element.
So, in this example, you do need to 'select' the img
tag - that's just a bit of odd parlance used when describing css.
I hope you got it sorted.
Steve.
Steve Hunter
57,712 PointsSteve Hunter
57,712 PointsNo problem!
Any problems, just ask.
Steve.
Steve Hunter
57,712 PointsSteve Hunter
57,712 PointsNo problem!
Any problems, just ask.
Steve.