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
William Herold
772 PointsStage 7: About.html text and .jpg are aligned to the left?
So I copied and pasted all the text from index.html into about.html. I deleted the section contents and uploaded my pic as well as a paragraph descriptor. I'm not sure why the info isn't matching the school house example. Any ideas?
William Herold
772 Points<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Bill Herold | Designs</title>
<link rel = "stylesheet" href = "css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English|Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel = "stylesheet" href = "css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Bill Herold</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>
<section>
<img src="img/nick.jpg" alt="Photograph of Bill Herold" class="profile-photo">
<h3>About</h3>
<p>Hi folks. This is my first attempt at a webpage. I've been at it now for a short period of time and so far I am having a blast. Whoever knew that coding could be so much fun? When I'm not coding, you can find me talking Vintage Star Wars with all the cool kids. Sometimes I'll even exercise.</p>
<p>If you'd like to follow me on Twitter, contact me <a href= "http://twitter.com/surfing">@surfing</a>.</p>
</section>
<footer>
<a href="http://twitter.com/surfing"><img src="img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a>
<a href="http://facebook.com/billy.herold.3"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
<p>© 2015 Bill Herold</p>
</footer>
</div>
</body>
</html>
3 Answers
William Herold
772 Points/**********************
General
**********************/
body {
font-family: 'Crimson Text', sans-serif;
}
#wrapper {
max-width:940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/**********************
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: 'IM Fell English', sans-serif;
margin: 15px 0;
font-size: 1.75 em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: .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;
}
nav a {
font-weight: 700;
padding: 15px 10px;
}
/**********************
Footer
**********************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/**********************
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;
}
/**********************
Page: About
**********************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0, auto, 30px;
border-radius: 100%;
}
/***********************
Colors
**********************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color:#000;
}
/* nav links */
nav a, nav a: visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f
}
William Herold
772 PointsThe picture doesn't align in the middle of the page. It looks like it's stuck on the left hand side,
William Herold
772 PointsThanks Jason works like a charm now...
Liz Laffitte
23,691 PointsBill,
It sounds like you didn't give your elements the class or id names that the previous image and paragraph had. Try opening the original code back up and seeing what classes/ids those elements had and applying them to the new content.
Rich Bagley
25,869 PointsHi,
Can you try changing:
<div>
<section>
<img src="img/nick.jpg" alt="Photograph of Bill Herold" class="profile-photo">
<h3>About</h3>
to:
<div id="wrapper">
<section>
<img src="img/nick.jpg" alt="Photograph of Bill Herold" class="profile-photo">
<h3>About</h3>
The opening div above the section was given an id of wrapper in my example. Does that make any difference?
-Rich
William Herold
772 PointsI noticed that after posting the message as well. So my index.html is working correctly now, but the about.html is still not putting the picture in the middle of the page... So weird!!
Jason Anello
Courses Plus Student 94,610 PointsWhere is it putting the image and can you post what css you currently have for the "profile-photo" class?
Jason Anello
Courses Plus Student 94,610 PointsIn your .profile-photo rule you used commas between your margin values:
margin: 0, auto, 30px;
Remove the commas and then let us know if you're still not getting the expected result.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi William,
Can you post here your current html for "about.html"?
Are you seeing the new content that you've put in but it's not styled correctly?