Harlowe: CSS Help - Three screen divisions, two with independent scrollbars

Flawkes

[working with 2.0, Harlowe]
Good evening. I want to divide the screen in my game in the following way:
One little static sidebar for save/restore and inventory. I called this "SideBar".
One main section where the general passage is displayed, and that occupies about half the screen - preferentially a little bit more.
One "Contextual Info" section that displays dialog and actions options and descriptions of itens as the player interacts with them in the first section - and which occupies the other (horizontal) half of the screen - preferentially a little bit less. This is "dialogBox".

Having no knowledge in CCS, this is what i tried with modified codes from other times i asked for help here (thanks btw ):

tw-passage tw-include[title="SideBar"] {
	width: 15em;
	position: absolute;
	left: -9em;
	top: 0;
	padding: 0.5em;
	text-overflow: clip
}

tw-passage tw-include[title="dialogBox"] {
	width: 15em;
	position: absolute;
	left: 0em;
	right: 0em;
	top: 0;
	padding: 15.5em;
	text-overflow: clip
}

I thought it would be easy to just adjust the values and looked into the argument "absolute". Well, after i changed it to "relative" and things went full weird, i thought better to come to you again.
Not enough - i realized that in very long passages it wouldn't be good for the player to have to scroll all the away up everytime s/he wishes to check inventory. So, i thought about the two independent scrollable boxes working along with the static inventory section. I hope it isn't much of a trouble.
Thank you very much.

greyelf

It would help if you also posted the rest of your CSS, especially anything related to tw-story, tw-passage, and tw-sidebar.

Are your SideBar and dialogBox passages tagged with header or footer?

Flawkes

Thanks for the answering.
Yes, they are tagged with header. But this is the whole CSS i'm using. The only code i omitted from my stylesheet was this first lines:

body {
	background-color: black;
}
tw-story {
	font-family: "nunito-light";
	color: #FFFFFF;
}

This, followed by the code on the original post, is all the CSS i'm using.

greyelf

As I explained in your Multi-pane Layout ... but built with Harlowe thread and commented on in the New, need help picking a story format thread there are issues that need to be solved when creating a multi-panel layout in Harlowe.

1. You want the extra panels to automatically update as the Reader navigates through your story and you want those panels to take up a fixed amount (width) of the horizontal area, but Harlowe defaults the tw-story element (the grand-parent of your header passages) to a width of 60% of the web-browser's current view-port/window width which means that if the view-port is narrow then the extra panels will overlay the passage text.

a. If you change the width of the extra panels to percentages then there will be a visible delay in the positioning/sizing of them because the width of the tw-story and tw-passage elements needs to be calculated first.

b. If you change the width of the tw-story element to a fixed size then you will need to add extra media at-rule based CSS to handle the different potential widths the Reader's web-browser view-port may be.

2. What to do with Harlowe's own side-bar which contains the Undo and Redo links.
Your SideBar passage is currently positioned over Harlowe's side-bar, making it difficult to click on the Undo link.

The following is a very quick, rough and incomplete example of CSS that changes the all the relevant element to having fixed widths, it allows space on the left side for the Harlowe side-bar and it also fits everything into a width of 1024px to show what it would look like on a narrow screen. You will notice a slight delay with the sizing and position of the two extra panels.

tw-story {
	width: 1024px;
}

tw-passage {
	width: 524px;
	margin-left: 200px;
	margin-right: 300px;
	border: 1px solid black;
}

tw-passage tw-include[title="SideBar"] {
	width: 200px;
	position: absolute;
	top: 140px;
	left: -200px;
	padding: 5px;
	text-overflow: clip;
	border: 1px solid black;
}

tw-passage tw-include[title="dialogBox"] {
	width: 300px;
	height: 100%;
	position: absolute;
	right: -300px;
	top: 0;
	padding: 5px;
	text-overflow: clip;
	border: 1px solid black;
}

... I added borders so that you can see the different areas, these can be removed.

note: both of the text-overflow: clip properties in your first example were missing their trailing semi-colon.

Flawkes

Thank you very much. I appreciate all the advices. This solved my problem. (: