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
troy beckett
12,035 Pointspage styling problems: Looks different to the video example.
I'm currently working through the 'how to build a website' section and I've currently got some problems, they are really small but they are annoying and if I don't ask I'll feel as if I'm not learning. Basically on my about and contact page on the website there are some styling problems that are different to the video example. My text on both pages is a too far left the example is more centered plus the picture on about page has no space between itself and the nav bar when there should be. I've tried playing around but I have no idea where to look for mistakes so advice on that would really help. I'll paste my whole about.html and main.css code below if you got time please take a look. I would like to thank your help in advance as it really is appreciated.
about.html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Juan Mata | Footballer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Juan Mata</h1>
<h2>Footballer</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/nick.jpg" alt="Photograph of Nick Petit" class="profile-photo">
<h3>About</h3>
<p>Hi this my name is</p>
<p>If you like to follow me on twitter then<a href="">@juanmata8</a></p>
</section>
<footer>
<a href="http://twitter.com/juanmata8"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
<img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
<p>© 2014 Juan Mata</p>
</footer>
</div>
</body>
</html>
main.css code
/*******************************************************
GENERAL
********************************************************/
body{
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
}
#wrapper {
max-width:940px;
margin: 0 auto;
padding: 0 5%;
}
img{
max-width:100%;
}
/*******************************************************
HEADINGS
********************************************************/
header{
float:left;
margin: 0 0 30pxx 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;
}
nav a {
font-weight: 800;
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: 0;
font-size: 0.75em;
color: #bdc3c7;
}
/*******************************************************
PAGE ABOUT
********************************************************/
.profile-photo{
display:block;
max-width:150px;
margin: 0px auto 30px;
border-radius:100%;
padding-top: 30px;
}
/*******************************************************
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: #6ab47b;
}
nav a, nav a:visited{
color: #fff;
}
/*selected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
troy beckett
12,035 PointsThanks for your help so far my image is looking fine now but my text is still to far to the left. the videos are in the add a new page section and heres a link to one http://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/add-a-new-page
Jason Anello
Courses Plus Student 94,610 PointsAre you doing this in workspaces? I think if you're currently working in there you can give the preview url. That would make it easier to track down the problem.
troy beckett
12,035 Pointsok thanks, I think this is my preview url http://web-5x04hfgh82.treehouse-app.com/ i was playing around trying to fix it and now the contact page navigation bar background has gone a bit wierd as well now its got a white line along the top. This is so frustrating as i'm not sure where to look for the problems. Thanks for your help though again. My problems are this the text on the about and contact page seem to far to the left and on the contact page the nav bar color background is a wrong.
troy beckett
12,035 Pointsyour answers worked perfectly so thanks. However I couldn't understand why we had to put clear:both on the contact page to sort out the gap at the top. Is there any chance you could explain this as I really want to understand the problem so I can fix it in the future.
5 Answers
Jason Anello
Courses Plus Student 94,610 PointsIn your header rule near the top you have
margin: 0 0 30pxx 0;
There's an extra 'x'. This 30px is what gives space below your header and before your image.
Jason Anello
Courses Plus Student 94,610 PointsFor the header gap problem you're having on the contact page you need to clear the floated header.
Your h3, "General Information" has a top margin and that is what is producing the gap above the header. Because the header is floated the content box for #wrapper, <section> and the <h3> all extend to the top of the header. This means that a top margin on your h3 will extend upward from the top of the header producing the gap.
To fix this you want to clear the floated header.
Add clear: both to your existing wrapper rule:
#wrapper {
clear: both;
margin: 0 auto;
max-width: 940px;
padding: 0 5%;
}
Currently checking out text issue.
Jason Anello
Courses Plus Student 94,610 PointsOne other thing, you should remove padding-top: 30px; from .profile-photo I think you must have added that at some point to try to get spacing between your header and image. Having it in there messes up the circular profile photo.
I don't think you have a text alignment problem. I compared the project files with your workspace and found that the left edge of all the text is lined up pretty close between the two.
I think the difference is that in the project files and videos the paragraphs are longer and reach the right side of your wrapper and so they appear centered on the page.
Your paragraphs are shorter and since they don't reach the right side of the wrapper they don't appear to be centered. Try adding some more text so that it wraps to another line to check this.
Your content is inside a 940px wide wrapper. That box is what is centered on the page. If your text doesn't take up the full width of the box then it wouldn't appear centered.
Let me know if that's not what you were talking about.
troy beckett
12,035 Pointsthanks alot your answer work perfect. however I really want to understand what happened on the contact page. Why did I need to clear the float I couldn't really understand and I just really want to know for the future.
Jason Anello
Courses Plus Student 94,610 PointsHi Troy,
A demo might help to understand the header gap problem. Here's a codepen demo: http://codepen.io/anon/pen/Anrea
I've stripped it down to the essentials needed to understand the problem. The header doesn't have a background so that it won't cover up what you need to see and I've given it a border simply so we can see the boundaries of the header.
The green box represents the content box of the wrapper div. You might think that since it comes after the header that it should begin below the header but instead it extends all the way to the top of the viewport. The content itself, the "general information" is pushed down below the header but the content box extends all the way to the top. This is because the header is floated.
Hopefully now you can see why a top margin on the h3 creates a gap at the top. Since the top edge of the content box is right at the top of the viewport, a top margin on the h3 is simply going to push everything down from there.
If you want you can go ahead now and find the h3 selector in the css panel and change the 0px to something like 30px. Now you should see the header gap that you experienced on your own project.
Next, go ahead and add the clear: both; to #wrapper and you should see the header gap go away and also the green box should drop below the header. Now, the wrapper div properly begins below the header. Clearing the floats tells the browser that the element has to drop below all the previously floated elements.
I hope that helps you understand.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsCan you link to the video that you're currently on right now and I'll try taking a look at what your text centering problems might be?