HTML5 Game Update - Aligning and Finagling

in #html57 years ago (edited)

Finally got a chance to get back to work on that HTML5 game.

[Here’s the previous post if you don’t know what I’m talking about].

Anyway, I had some trouble for a little while... I had programmed my Tumblr using an older version of HTML, and I was a bit rusty anyway. I’d never really done anything with CSS (or, rather, I probably used it directly in the HTML file and didn’t realize I was using it lol).

Anyway, the align property is apparently outdated, so it took a bit to figure out how to get it lined up properly.


After a while of fiddling with it, and trying out different settings, this is the goofy thing I wound up with.

image

I had come up with this using the position: relative property in CSS.

I wanted to get the various divs to line up based around the container div.

image

Buuuut, when I got it to stay in the container div, it would all stack on top of each other. It would only stand side-by-side if I would let it get out of the container.

image

I wound up deciding to just more-or-less ditch the container, just using it to affect the text, not the alignment. I changed the position to absolute, that way I could get it to do what I wanted.

image

Took a while to figure out  how to get the divs to not sit on top of each other, but after tweaking the heights and widths, I wound up with this:

image

Strangely, it seems that I can’t get it to just let me say, “make this 95% the width of the page”, or maybe it would if I used a different position attribute, but as far as I can tell, the absolute version is the only one that would let me set them side-by-side.

I’m dissapointed that I couldn’t use a % specification to size them, because that means that it might not really scale very well.

But, in the end, I did wind up with a final result that fairly well matches my original design.

image

Took a bit to get the footer to sit down there, but I have everything about where I want it. I think the Main area needs to be scaled down some so the other areas can be a bit bigger, but idk I may leave it like this.


But woo! I think that’ll about do it for now. I have a bunch to do, and this seems like a good place to stop.

If you’d like to see more HTML5 goodies from me, I’ll be keeping a neat little list of my posts about it [here]!


I wanted to post links to the code-in-progress, too, but Google Drive is loading exceedingly slowly right now. I'll update this post and/or the Tumblr equivalent to this post with the links soon as I'm able to access faster WiFi.

EDIT: You can check out the [HTML here] and the [CSS here]!

Sort:  

This post has been ranked within the top 80 most undervalued posts in the first half of Feb 12. We estimate that this post is undervalued by $3.57 as compared to a scenario in which every voter had an equal say.

See the full rankings and details in The Daily Tribune: Feb 12 - Part I. You can also read about some of our methodology, data analysis and technical details in our initial post.

If you are the author and would prefer not to receive these comments, simply reply "Stop" to this comment.

Coin Marketplace

STEEM 0.20
TRX 0.13
JST 0.030
BTC 64669.52
ETH 3430.49
USDT 1.00
SBD 2.52