Same padding-top, but pages behave different, how do I solve this?

Question

The padding-top for the "Buteyko taining" page is 140px. Just as the "Symptomen" and the "index" page. The last two pages are appearing neatly under the header. The Buteyko training page doesn't. Part of the text is behind the header.

Why is that and how do I solve it?

https://w.trhou.se/ap0aeyglqb

Answer 1 · 2017-02-07T15:21:14Z

February 7, 2017 3:21pm

Let me start here and then get into the problem at hand. I'm not sure if you're aware of this, but you can inspect each element of your webpages CSS individually in the browser. Open the live preview of the page and go to the menu of the browser - where you'd go to look at history, bookmarks, or to change your settings. Go to more tools, developer tools and open the console. On the top left there's a little box next to an inline directory. The little box has a cursor arrow on it. Click that and then you can individually click on an element to view its default, or your style to it. Additionally, you can click on the element in the browsers html file in the console and it will highlight the selected element. This is a good way to debug your page, when it is not acting as expected.

Onto positioning --- first, you have contradictory styling. Your h1 has a margin-top of 38px, <section> has a margin of -80px, and #index has a padding of 140px. You would be well served to erase those and look at the behavior of the page in the browser - check out the console too. You should see that the h1 is hidden at this point. Why is the h1 hidden? Because you've changed the flow of the page by having a fixed navigation header. In other words, the nav section is no longer interpreted as part of the flow of the document. Test this by going to your main.css and putting a position of relative on the <header> and go back and preview the page again. You will see that <section id="index> has moved down and is visible because now <header> is part of the flow of the document. So now what? How do I handle this? I need my header to be fixed, but I obviously need my <section id="index> to be visible. Can you think of how to move <section id="index"> down below the nav header? What are some ways you can keep it in the flow of the document and what repercussions would you have by choosing one method over another? Hint: once you've eliminated all of the settings at the beginning of this paragraph all you need is one of them to move the <section id="index> down. NOTE: the repercussions might not apply here, but it's good to know them. Think about what you know about background-colors and how the box model plays into showing or not showing colors when different properties are applied.

Some other things to think about.... When styling your html, sometimes a fixed height is a good thing and other times it's not. Lets take your header nav section for an example. You currently have a fixed height, but when you resize the viewport it pushes the two large buttons down into the <section>. You can avoid this by setting a min-height. This will allow the browser to manipulate the headers height based on the needs of that particular section. It will grow to accommodate your buttons when they push down rather than have them possibly overflow onto, or behind another element. Its essentially the same as width 80% margin auto(to center), or width 100%. The min-height will allow for flexibility, if needed/wanted in the same way a % will.

Additionally, take a look at your main.css and note line 3, get in the habit of setting your body style - this will initialize the page, and good rule of thumb is margins: 0;, padding: 0;, color, font-size, font-family, line-height, etc of your entire document and will lead to an easier and more predictable layout, and if you need one element to be different just change that element, and remember that CSS means cascading style sheet(try putting background-color to black at the top of one of your sections grouped css and then go down to the very bottom of your css file and set the same elements background-color to red to get a visual representation of how this can impact your page when you have contradictions). Your CSS should follow the flow of the document. Each section should include all of the style for that section. Separating your id style and putting it at the bottom can lead to frustration of other developers who might work on your code and the stuff at the bottom gets rendered last. If they are teaching you to separate them, then follow what they say, but keep it in mind for later or leave comments at the top of your CSS file to let the next dev know that is how you like to write your CSS.

body {
    property: value;
}

header {
    property: value;
}

#section1 {
    property: value;
}

.section2 {
    property: value;
}

footer {
    property: value;
}

Let me know what you come up with for moving the <section id="index"> down. Good luck! If you need help figuring it out, feel free to ask. Oh, before I forget. Just as your CSS is structured with spaces, tabs, and carriage returns, you should have the same habits for making your html file readable as well. Nested elements get indented from the parent.

Answer 2 · 2017-02-06T12:54:41Z

February 6, 2017 12:54pm

First, I can't see the page Buteyko taining. Second, at the line 31, you're opening another body tag. Third, never add space between the words in href parameters on the "a" tag. Right now it's "Buteyko training". Try to change to "buteykotraining" or "buteyko_training" as you prefer.

Answer 3 · 2017-02-07T06:16:38Z

February 7, 2017 6:16am

I don't see any missing elements, but..... In addition to what Lucas said, you have a number of syntax errors in your CSS file, as well, there is some extraneous/repeated property-value pairs(read background-color...as one of them). I'm not aware of the specific lesson, but I'd be wary of using 'selected' as an id. It could be a way to get you used to the idea of placing selected in the tag, but again, I didn't take the course. If you haven't already learned about attributes, selected is one and requires no prefix. It is best to avoid using classes and id's that resemble predetermined keywords, in any language. It's like saying class="div" or <h1 id="h1">Your header</h1> here's a way that selected is used.. <option value="your-value" selected> choice </option> Keep in mind, consistency is important, when writing your code. CSS selectors should always have a space after them and then the curly brace, don't place empty lines after the property-value pair, and place a carriage return between the closing brace and the next selector. You want your code to be readable to not only you, but anyone that comes along after you.

Notice the difference between the css rule 1, rule 2 && rule 2, rule 3? As well, rule 3 has some serious issues all on its own.

selector {
    property: value;
}

selector {
    property: value;
}
selector{ 
    property:value;

}

May I ask why your header is carried off the page with a margin-left: -30px;? Why not just keep it short of 100% on the width property-value pair? Furthermore, instead of using a margin of 900px to move an element down below another one, why not set the height of the #index section to 900px and move the paragraph inside the #index to wherever you want.. I hope this helps you. Good luck and keep working at it! You'll get there one line of code at a time and some patience.

Answer 4 · 2017-02-07T07:40:44Z

February 7, 2017 7:40am

Excuse me, here is the right snapshot. https://w.trhou.se/kwdjlte2yy I think the margin -30px is solved here as it should be. Setting the height seems a clearer solution. How should I implement that in the code I posted in the snapshot? I tried #index {height: 140px} but that messes everything up. Thanks for the advices about css, i corrected that.

Answer 5 · 2017-02-10T16:34:21Z

February 10, 2017 4:34pm

The height of the header is adjusted, the body is styled and I think the css follows the flow of the document. The id’s are brought together in one id and placed under the header wich I think is in the flow of the document. And I cleared up the html.

The contradictory style is erased and I have reviewed tutorials on youtube about the box model. Only I don’t know what you mean with <section id="index>? That code isn’t in my html. Maybe the <section id="index> was from another snapshot. I am keeping track now of the present workspace when I ask a question. This is the snapshot after your response on https://teamtreehouse.com/community/how-do-i-float-three-images-in-a-row.

https://w.trhou.se/slaq0jnfdr

Yes, i have a question: I didn't change any coding in flexbox, but the "Symptomen" page isn't aligned anymore? And what's best practice to make the h1 appear, with padding-top? Thanks for all the advice and info!

Answer 6 · 2017-02-16T09:47:44Z

February 16, 2017 9:47am

That's ok, i was allready thankfull for your previous advices, but glad to see your reply. To be honest I was hoping for that, because your answers are one of the best that I got here. Thanks for sharing your approaches to these kind of problems. As you know I am learning coding by myself. Although treehouse is a great learning environmont it seems my development here is slowing down. For now I am watching EJ media's jquery's tutorials on youtube in order to create a mobile drop down menu. It would be great if you want to answer my questions about that later. For now power to you, especially in the recovery of your health!

Answer 7 · 2017-02-20T07:33:10Z

February 20, 2017 7:33am

Great to read about your determination. If you have that mindset you will surely become a full stack web developer.
And good to hear your learning process, I had the idea that I should have profeciency in webdesigning now, because i see a lot of courses on internet wich say you can become a web designer in less than a month. I realise now that it takes more time to be a full stack web developer. If you want to know more about jquery I would recommend to watch the jquery tutorials on youtube from EJ media. I understood every tutorial in his series. And you can follow along in his tutorials with notepad++. The code's are also added in the youtube descriptions to make it easier. After those tutorials I went to the the jquery course at treehouse again. To the module on how to create a mobile drop down menu. In the course task I could create the mobile drop down menu, but on my own site i need to do some other things to make it work. If you check https://w.trhou.se/34ml37jffu you will see the media queries. I don't understand why the drop down menu dissapears when I resize my viewport. Do you know what to do to make that work? Sorry for the spelling error, this message has answered your question about that :)

Answer 8 · 2017-02-20T20:24:27Z

February 20, 2017 8:24pm

Hi Kylee, i came across freecodecamps and became a member there. (RenevandenHeuvel) In a few days I will pause my subscription here. Talk to you later? I have also added you on instagram.

Welcome to the Treehouse Community

Looking to learn something new?

Learning coding

Learning coding

Same padding-top, but pages behave different, how do I solve this?

8 Answers

Kyle Jensen

Kyle Jensen

Lucas Sacramento

Lucas Sacramento

Learning coding

Learning coding

Kyle Jensen

Kyle Jensen

Learning coding

Learning coding

Learning coding

Learning coding

Kyle Jensen

Kyle Jensen

Learning coding

Learning coding

Kyle Jensen

Kyle Jensen

Learning coding

Learning coding

Kyle Jensen

Kyle Jensen

Learning coding

Learning coding