Hi
I'm quite new to HTML and javascript and I have problem that I cannot solve.

I have canvas where I draw some stuff and top of the canvas I wanted to show a message box like popup window with it's own HTML code. The problem is I can set this message box on top of the canvas by setting absolute position in the CSS (position: absolute;) but i do not know how to center the box on the canvas.

Because of the absolute position I don't know if this is even possible. I could write JS script where I count the proper X & Y coords for the box but I would prefer a more simpler/better HTML/CSS way for this to center (vertically/horizontally) the box if possible.

Here's the code for the message box and it's CSS style:







Any tips?

thx!

Depends. On a lot of things. We need to know more. What the HTML looks like for instance.

You say this "window" is positioned absolute. But what is the positioning context? CANVAS, the viewport, something else?

IF this window's containing block is the canvas (or a container for the canvas that has the same width as the canvas) and canvas (or the container) has a set width you can get the window centered by positioning it 50% from the left and then nudge it back with a negative left margin that's half of the window's own width. On the other hand, maybe it isn't necessary to make it position: absolute at all. Can't say.

Like so.

Sorry I knew I forgot something.

Here's the HTML:





canvas is in canvasArea and the box in overlayControls

This post has been edited by jar17: Aug 11 2020, 01:34 AM

No, show us what you really have please. With corresponding CSS. Easiest is if you link to the page or paste it all in here.

I think I posted everything related. I am actually making a JS game have ton of JS files. But I did post the whole index.html body, it's just those 4 tags

Here's how I create the canvas though, if it matters:




This post has been edited by jar17: Aug 11 2020, 02:07 AM

I can't get that to produce anything I can see on the page.

But CANVAS has a width, 800px, which is good for what you want to do. If you wrap the 4 Ps in a DIV and give the DIV width: 800px and make it position: relative you have created a context so you can position things inside it absolute with the DIV as containing block. As far as I can see you now position it relative the view port which generally isn't a good idea.

I wouldn't use P for the 4 containers since the come with browser styling like margins (and semantically these aren't paragraphs). Use DIV instead. It has no margins or other default styling except that it's a block level element as P and thus breaks the line.






Then what I suggested should work. Provided the outer DIV is 800px...

No. I tried to style it.


You need top: something suitable too. I only messed with the horizontal centering. Start with top: 0 and take it from there.

This post has been edited by pandy: Aug 11 2020, 03:06 AM

just realized that. and why is your post appearing with my user name? lol

anyway. putting:

left: 50%;
top: 50%;

doesn't make it centered...


This post has been edited by jar17: Aug 11 2020, 03:10 AM

That's because I'm a clumsy moderator and accidentally pushed the EDIT button instead of REPLY. Good I quoted everything you said anyway.




Did you also use margin-left: -200px?

yes

you know the box dimensions are pretty dynamic, I create differen't sizes of them via JS


This post has been edited by jar17: Aug 11 2020, 03:21 AM

I find it hard to relate to something I can't see. This mockup should correspond to your JavaScript generated HTML, right?


With this CSS .customWin is centered both horizontally and vertically. I didn't write out stuff you already had in your CSS. Now I've lumped it together.

the box is in overlayControls (That is where createCustomWindow places it)

Here's screenshot of the structure:



(Sorry for the bad quality)

I put there "mainContainer" like you suggested and edited CSS accordingly


This post has been edited by jar17: Aug 11 2020, 03:50 AM

OK, I misread. But that shouldn't matter. The important thing is that customWin is inside the container.

Is #overlayControls also positioned? Does my mockup correspond to what you have, apart from where customWin is? Do you have more CSS floating around?

no I have very little CSS atm and nothing that should effect this (except "winCenCtrls" but that shouldn't matter)




yes



no

Then just apply my mockup to what you have. You can see that it works, can't you? You can move the window thing to the right box without that affecting anything.

hmm, nope it's not centered.

I removed all the CSS and put your CSS to make sure there's not conflict but it still doesn't work.

all I had was this which you gave me:

Well, then I don't know.

Could you give me your test code please? maybe it's browser issue. I'm using chrome

You already have it. It's just what I posted. It's fine in Chrome.

Ok made a test page and still didn't get it centered:



result