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
Herschel Greenspan
890 PointsHow do i write the image element?
With your help i might be able to solve this problem. Thanks!!
<!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="Hello all" class="profile-photo">
<p>Good Morning everybody. My name is Hershey and i like saying hello to everybody. So Good Morning</p>
</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
Kirstine Nichols
13,592 PointsI'm not sure I understand your question fully but I'll give it a go.
If you're trying to display "img/gratt.png" as a block level element you could use the class .profile-photo and set the display to block.
example:
.profile-photo { display: block; }
you could also do: img { display: block; }
But the latter will apply that to all the images on your web page and you may not want that. I hope that helps.
Abe Layee
8,378 PointsI think the problem from your code is the white space between the a tag.
<img src= "img/gratt.png" alt="Hello all" class="profile-photo">//white space
<img src="img/gratt.png" alt="hello all" class="profile-photo">
Herschel Greenspan
890 Pointsthat helps but im looking to figure out how to create a element that can display block the image.
Herschel Greenspan
890 PointsNevermind i solved it. Thank you.
Herschel Greenspan
890 PointsHerschel Greenspan
890 PointsKristine that was exactly my question and i tried your way but i could not get it right. here is the code i wrote in a sentence. Please tell me if there is anything wrong with it. Thanks.
<img src="img/gratt.png" alt="Hello World" class="profile-photo" img {display: block;}>