0 votes
by (180 points)

So, I have a header and want it to be black with white text (got that). The problem is that when I scroll, The words go over the header. I am using a basic header code:

header {
position: fixed;
background-color: black;
color: white
}

What must I fix so that the words don't go over the hea

1 Answer

0 votes
by (144k points)

Please use the Question Tags to state the name and full version number of Story Format you are using, as answers can vary based on this information. I will assume you are using Harlowe v2.1.0

> The words go over the header..

Based on the CSS example you suppled I will assume that when you say 'header' you mean a HTML <header> element, and not a Harlowe header tagged special passage.

The position: fixed setting in your CSS causes the <header> element to be removed from the standard layout of the page's HTML element, which results in the <header> element being shown at a higher z-index than the rest of the content of the current passage. This is why scrolling the content of the passage causes it to move underneath the content of the <header> element.

You can do a couple of things you can add you your CSS to reduce this visual effect:

1. Add a width: 100%; property which will cause the area representing the <header> to always cover the whole width of the passage it appears above.

2. Add a top: 0; property which will move the <header> element's area to the top of the web-browser's view-port.

3. Add a padding-bottom: 1em; property which will add a small horizontal blank section to the bottom of the area representing the <header> element.

by (180 points)
edited by
Hi! Thanks! It worked!

 

How would I make sure my <i> elements dont do the same?
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...