A li'l help with this mockup, please? [Harlowe]

avery

Howdy! I, a CSS newb whom w3schools.com can only help so much, have trouble assembling the layout below:



I've managed to implement the background image and style the text, but getting the text to stay on the right and the logo image to stay on the left has proven next to impossible. I appreciate any help you can toss my way!

Thanks in advance, y'all. You're good people.

greyelf

Is the "This Is A Logo" logo displayed only at the start of the story, or is displayed for every passage of the story?
Is the "This Is A Logo" logo an image or is it text?

avery

Hmmm. Now that I think about it, I guess the logo should be styled text for easier editing. I'd like it to show up every page, but if that's too tricky, I can do without!

greyelf

At first I tried a number of more advanced techniques like the following so that the contents of the Logo area would be editable:

a. Using JS to insert a permanent logo element to be a sibling of tw-passage but the contents of tw-story are deleted each passage change.

b. to insert a permanent logo element to be a sibling of tw-story but the element is added to the body which made layout complex.

c. Use a header tagged passage but this is a child of tw-passage which made layout complex.

So I instead went with a very simple solution of editing the background image to include the logo text and to position the other contents of the story so everything is display on the right half of the background image.

note: I am assuming that you want the passage contents to be contained within the bounds of the background image which is 1280px by 720px (width by height)

Add the following to your Story Stylesheet area:

html {
	background-image: url('your-backgound-image.png');
	background-repeat: no-repeat;
	width: 1280px;
	height: 720px;
}
tw-story {
	margin: 0 0 0 auto;
	padding: 4em 0.5em 0.5em 1.5em;
	width: 50%;
	height: 720px;
}
tw-passage {
	height: 100%;
}
tw-sidebar {
	width: 108px;
	height: 75px;
	left: auto;
	bottom: 0.25em;
	right: 0.25em;
}

warning: Although I tested the above CSS in Chrome / Firefox / IE / Edge on Windows 10 and it worked, you may wish to get a more experienced CSS coder to look at it because there may be incompatibilities in it that I am not aware of.

avery

Thanks for your help, man! Is there any way I center all this? The image is aligned with the upper right corner of the screen. If not, that's cool too; your code is great learning material.

greyelf

You could add a left and right margin property to the html element CSS rule, using auto for both left and right will cause it to be centred horizontally.

html {
	background-image: url('your-backgound-image.png');
	background-repeat: no-repeat;
	width: 1280px;
	height: 720px;
	margin: 0 auto;
}