Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Geek Culture / A little help in the HTML arena?

Author
Message
xplosys
14
Years of Service
User Offline
Joined: 5th Jan 2006
Playing: FPSC Multiplayer Games
Posted: 24th Nov 2019 03:00
I'm working on an Interactive Fiction Engine in Visual Studio (VB) and I want the stories to be played out in a browser, locally or on-line.

It's been 10+ years since I've developed anything in HTML, and as you know a lot has changed. I'm afraid that anything I know how to write would not work in modern browsers. I've tried downloading free HTML5 templates and editing them, but I'm afraid it's just got too far ahead of me. With multiple CSS, JS, and other files, I'm pretty lost trying to change things and remove things that I don't need. So... I'm asking for help.

Is there someone here with a working knowledge of HTML5 and CSS who would be willing to create a simple page template and style sheet for me? My only requirements/wants are these:

1. The page should have a header, a main area, and a footer.
2. The entire page should be 100% of the browser window. (something like header: 10vh, main: 80vh, footer: 10vh)
3. The main area should have a full background image and a text area near the bottom
3. Responsive would be nice but desktop only would still be a very nice start.



I'm sure I'm forgetting something but if I don't have to search through multiple files to find the styles and classes and values, I can do some of it myself.
Any help is appreciated.
Supermarket Killer: I got a bomb here! I'll kill her! I'll blow this whole place up!
Marion Cobretti: Go ahead. I don't shop here.

Attachments

Login to view attachments
xplosys
14
Years of Service
User Offline
Joined: 5th Jan 2006
Playing: FPSC Multiplayer Games
Posted: 24th Nov 2019 15:21
This is what I've been able to figure out so far. I'm sure it's not exactly right but it does some of the things I need, such a responsive size, image and menu.
What I haven't figured out yet is how to get the "Screen Title and Text" closer to the bottom of the page. Any help with that is greatly appreciated.

Supermarket Killer: I got a bomb here! I'll kill her! I'll blow this whole place up!
Marion Cobretti: Go ahead. I don't shop here.

Attachments

Login to view attachments
xplosys
14
Years of Service
User Offline
Joined: 5th Jan 2006
Playing: FPSC Multiplayer Games
Posted: 24th Nov 2019 21:11
I've figured out the positioning...

It's enough to get started with. If anyone has any tips, advise or corrections please let me know.
Thanks.
Supermarket Killer: I got a bomb here! I'll kill her! I'll blow this whole place up!
Marion Cobretti: Go ahead. I don't shop here.
xplosys
14
Years of Service
User Offline
Joined: 5th Jan 2006
Playing: FPSC Multiplayer Games
Posted: 25th Nov 2019 19:59
Pretty much got it all down. No help required. Thanks.
Supermarket Killer: I got a bomb here! I'll kill her! I'll blow this whole place up!
Marion Cobretti: Go ahead. I don't shop here.
Raven
15
Years of Service
User Offline
Joined: 23rd Mar 2005
Location: Hertfordshire, England
Posted: 26th Nov 2019 07:10
HTML5 while on the surface doesn't look or seem to act any differently to HTML4 (or earlier)., is the entire reason that no one uses Flash or Silverlight anymore.
And keep in mind., you're just scratching the surface here.

I mean depending on how deep you want to delve down the rabbit hole (say with Core.js and Angular.js... both are Free Libraries; which are akin to the Win32 API or such for HTML5)
well there is A LOT that you can do to create a highly interactive experience.
Like do you remember years ago when the Forum was gripped with Legend of the Green Dragon? (A PHP Multi-User Dungeon / MMORPG)

Well that worked heavily on being Server-Side, with the Pages having various Templates that were then created and dispatched to the "End Users" (i.e. Players)
But with HTML5., you can essentially create that as a Single MVC Page Solution; with Graphics that Animated based on what's going on... Direct Peer-to-Peer PVP... Real-Time Chat, Events, Actions, Interactions between Players, etc.
All a Server would need to handle today would be keeping storing the Asset Resources and Player Data.

I'm sure that W3Schools (which was a great HTML/JS/CSS/etc. learning site in the past) is still a great place to start.
And as noted there are some good (Free and Open) Libraries that are fairly plug-and-play, so that you can rapidly create something usable without having to manually handle all of the backend.
xplosys
14
Years of Service
User Offline
Joined: 5th Jan 2006
Playing: FPSC Multiplayer Games
Posted: 26th Nov 2019 13:46
@ Raven.
Thanks for the response.
Quote: "I mean depending on how deep you want to delve down the rabbit hole"

Exactly. As I stated above, I want a simple page, with as little dependency as possible. I don't want to learn 6 languages to create a webpage, especially knowing that the technology will all change in a year or two. If I could get away using HTML5 only, I would, though it seems that CSS is the only way to position content on the screen properly. I may be wrong, like I said I've been out of the game for too long. So I'll stay as simple as I can and hope the page can stay unbroken by new tech and browsers for as long as possible.

Yes, W3Schools was my go-to for this, but I was hoping someone here was familiar with HTML5/CSS and could help clean-up my code. I'm sure it's not optimized or as good as it could be, but it's enough to keep going on the project for now.
Supermarket Killer: I got a bomb here! I'll kill her! I'll blow this whole place up!
Marion Cobretti: Go ahead. I don't shop here.
Phaelax
DBPro Master
17
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 28th Nov 2019 23:03
You might take a look at bootstrap, which is really just a giant CSS library. Takes a lot of guess work out of designing responsive websites and makes it easy to design a page that looks good on multiple device sizes.
Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
xplosys
14
Years of Service
User Offline
Joined: 5th Jan 2006
Playing: FPSC Multiplayer Games
Posted: 29th Nov 2019 03:12
Thanks. I've seen a lot of templates that use Bootstrap. For now I have the basics of what I need and I'm busy creating the app which will create the pages. When the app is further along I plan to dive back into CSS to make the app options work on the web page.
Supermarket Killer: I got a bomb here! I'll kill her! I'll blow this whole place up!
Marion Cobretti: Go ahead. I don't shop here.
Phaelax
DBPro Master
17
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 29th Nov 2019 05:50
I write web apps for my day job, just yell if you need help.
Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
xplosys
14
Years of Service
User Offline
Joined: 5th Jan 2006
Playing: FPSC Multiplayer Games
Posted: 29th Nov 2019 17:03
Will do. Thanks.
Supermarket Killer: I got a bomb here! I'll kill her! I'll blow this whole place up!
Marion Cobretti: Go ahead. I don't shop here.

Login to post a reply

Server time is: 2020-09-29 06:07:30
Your offset time is: 2020-09-29 06:07:30