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
Learning coding
Front End Web Development Techdegree Student 9,937 PointsWhy is my text dissapearing behind my head element?
In this page http://port-80-0j5jzxg2co.treehouse-app.com/zuurstoftest.html the text is dissapearing behind the head element. How do I solve that? I tried adding padding to the top, but then things happen that I don't understand.
And I rember from another lesson (don't know wich one anymore) that the white line on top of the header can be filled with lightblue as well. How do you do that?
I think that the text here is behind the head element as well. http://port-80-0j5jzxg2co.treehouse-app.com/online%20buteyko%20training.html Also tried solving it with padding, but here nothing happens at all.
Thanks,
5 Answers
ve
5,048 PointsYour webpage has several issues: First, there's no need to give your <head> a class, as you don't need to refer to the head with a class selector (Normally, you don't access it via css, anyway). Just like that you don't need to give your <body> a class. There's only one in a html document.
Then why did you add your stylesheets to your body, too? Is there any reason for it? That's nothing you need to do or should do.
To place your head-Element on the top (I'd call it differently, though. Calling it "head" makes it confusing), you simply give add top: 0; to its css rules. that places it 0px from the top of the page.
And please dont insert plain text into your html, always wrap it inside a <p> element or whatever you need, maybe a <h1> or even a <span>. This way you can't style it.
Then you need another div around your content, outside of your <div> with the class "head". This <div> should be given a clear: both; to fix your problem.
Could you please clean up that html a bit with the changes I listed above and try and tell if it works? :)
ve
5,048 PointsBack to your stylesheets: I'm not talking about the stylesheets you placed in your <head>, that's where they should be. The <head> of your document stores any metadata, such as stylesheets, links to fonts, the title etc.
What I'm talking about is the bootstrap-stylesheets I see embedded in your <div> with the id="lightblue". Did you put them there? They belong into the <head>, just as any other css. Do you know which ones I mean?
Learning coding
Front End Web Development Techdegree Student 9,937 PointsYes, I know what you mean and I have replaced the bootstrap-stylesheets into the <head>, with the other stylesheets.
ve
5,048 PointsCould you give me a link to your updated website?
Learning coding
Front End Web Development Techdegree Student 9,937 PointsOff course, here it is http://port-80-0j5jzxg2co.treehouse-app.com/index.html
Learning coding
Front End Web Development Techdegree Student 9,937 PointsLearning coding
Front End Web Development Techdegree Student 9,937 PointsHi Valerie,
Thanks for your tips and questions. Until now I understand most of the concepts of coding. The separate tasks went well but in the integration of it I need to regain overview in my coding.
Ok, I have removed the classes out of the head and body.
Yes there is a reason for the stylesheeets. As I followed the assignments along with workspaces I added the stylesheets in the head. It is an attempt mimicing a real site. I need normalize.css for that. If I remove the main.css stylesheet, all the styling is gone. And the responsive stylesheet is for mediaqueries.
"To place your head-Element on the top (I'd call it differently, though. Calling it "head" makes it confusing), you simply give add top: 0; to its css rules. that places it 0px from the top of the page."
I don't understand this one, because I learned that the head has to be on the top for metadata?
"And please dont insert plain text into your html, always wrap it inside a <p> element or whatever you need, maybe a <h1> or even a <span>. This way you can't style it."
It looked to me that all (most of) the text was wrapped in an <h1>, <span>, or <p> element, but I rechecked it and have wrapped other parts of the text with an <p> element as well. But maybe there is something I don't see right, or understand?
There is a div around the content on each page now. I know how to add a div, but am not sure if it's right.
"Could you please clean up that html a bit with the changes I listed above and try and tell if it works? :)"
Yes, I have done so. But it's not working.
Hope you can help me get back on track again!