[CSS Display and Positioning] : Linking to Questions

(First thing : I deeply apologize for my poor english)

Hello !
At the end of this lesson (CSS Display and Positioning), I’ve decided to link the < li >'s "QUESTION"s from the header to the according questions in the content of the page.
When clicking on the links in the header, I’ve noticed that the header was covering the questions, since it was set on position: fixed;.

To solve this issue, I’ve added a new < div > above each of the questions in index.html, like so :

<div class="Q" id="Q1">
    <p>question 1</p>
</div>

and used these < div >'s ids to link to the header.

Then in style.css, I’ve set these < div >s like this :

.Q {
  visibility: hidden;
}

The blank space it created added enough space to solve the problem.

I would like to know if this is a proper way to fix this kind of issue, or if there is a more appropriate way to do so.
Thanks in advance ! I hope it was understandable enough…

1 Like

I would advise you gave the <h4>Question ... </h4>s a padding-top.

1 Like

@ 14cowado Thank you for your answer !
The problem with the padding-top is that :
- it makes the page “less visually appealing” because of all the space it adds before the questions.
- if I set the padding-top at 50px, Questions 2 to 5 appear correctly, but Question 1 is still hidden by the header.
- if I set the padding-top at 100px, Question 1 appears correctly, but it adds a lot of white space between the header and Questions 2 to 5.

I guess I could set a padding-top of 100px to the Question 1 and a padding-top of 50px to the Questions 2-5, but I find the way it renders not pleasing, visually speaking (I know I’m pernickety, but, well, initially I’m a graphist…).

Is the solution using the hidden < div >s not recommended because it’s not how we are supposed to use this property ?