Positioning - Build a technical documentation page

1

Hello, i have two questions:

  1. Why do i have to specify different margin/padding from top to make navbar and header at same level:

    level
    level1066×763 211 KB

  2. How to make that after clicking on navbar element, header text within each section would be at the same level as navbar MENIU:

    header_level
    header_level1230×707 156 KB

Link to codepen : https://codepen.io/SimonasZ/pen/KKdpEqe

2

Hi!

em is not a set measurement. It goes based on the font-size of your selector. So one reason for why the margin-top is different for the elements even though the em size is the same, could be that they use different font sizes.

For your second question there are two ways you can fix this: give your <header> element a padding-top. But that could ruin the rest of your styles

or

Instead of giving id to the <header> give it to their parent element div.main-section and change its margin-top to padding-top

Hope this helps

1 Like
3

@s.zilevicius I’ve taken a peek at your problem and from what I can see, it’s the units (em) that are messing up the layout. You might want to look into using ems a little deeper, but in the mean time, try setting

.main-section { margin-top: 25px;}

and then

#first { margin-top: 25px;}

Then you’ll see that your nav menu and main section header have the same initial positioning.

Once you click on a menu link (which references a section id) the default behaviour is for the line of html that has the section id in it e.g.

<header id="HTML_Basic_Examples">HTML Basic Examples</header>

is for that line to position itself with zero top margin, even if there is a margin defined and even if there is content above it within the same div.

So bear in mind that; the menu link will set the referenced html line to that position - zero margin from the top. You could use a padding-top value of 25px on your main section instead of setting a margin and then setting your menu link to point to that line instead. The thing you will need to bear in mind is to make sure that tests still pass though.

I hope this has given you a starting point. I myself try to avoid using units that reference font sizes (ems, rems) the whole thing makes my brain a little too fuzzy!

1 Like