webdevRefinery Forum: How to make this in HTML - webdevRefinery Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Rate Topic: -----

User is offline Sole_Wolf 

  • Group: Members
  • Posts: 303
  • Joined: 24-March 10
  • Expertise:HTML,PHP,Java,SQL

Posted 13 April 2012 - 10:27 AM (#1)

How to make this in HTML


So, I am now working on the battle interface part of my Pokemon Game and I need help making it.

Right now, I can basically make it with only tables. But since everyone hates tables, how would I do it with css?

Also, this is what I am trying to make it look like

Posted Image
--Sole_Wolf
0


User is offline Qasim 

  • Group: Members
  • Posts: 520
  • Joined: 25-October 10
  • LocationOntario, Canada
  • Expertise:HTML,CSS,PHP,Java,Javascript,Graphics

Posted 13 April 2012 - 10:33 AM (#2)

There will be many aspects to making this possible. Without tables, you will be using divs to create each of those boxes, and we can using either an absolute position to position the boxes where you want them, or you can us the "float" behaviour and either float the div right or left.

To move the div up and down, use margin-top to position them exactly where you want them. The first div on the battle scene would be "float:left" with maybe "margin-top:20px". The second div on the battle screen would be "float:right" with something like "margin-top:100px". Of course, you would need to play with these values.

Absolutely positioning them would allow you to position it anywhere on the screen.
using "position: absolute" and then setting a "top", "left", "right", or "bottom" value can position the div wherever you want it. If you want these position values relative to a parent div, make sure you put "position:relative" on that parent div.
Qasim Iqbal
[HTML] [CSS] [JS] [PHP] [JAVA]
[ANDROID DEVELOPER] [CHROME WEB STORE DEVELOPER]
[WEBSITE] [FACEBOOK] [FORRST]
0


User is online arronhunt 

  • I'm a httpster
  • Group: Moderators
  • Posts: 3398
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 13 April 2012 - 11:22 AM (#3)

Here's a getting started guide for CSS https://developer.mo...Getting_Started

Also, what's HTML v2?
DO NOT OPEN THIS

Spoiler
0


User is offline Sole_Wolf 

  • Group: Members
  • Posts: 303
  • Joined: 24-March 10
  • Expertise:HTML,PHP,Java,SQL

Posted 13 April 2012 - 11:27 AM (#4)

View Postarronhunt, on 13 April 2012 - 11:22 AM, said:

Here's a getting started guide for CSS https://developer.mo...Getting_Started

Also, what's HTML v2?


Thanks I will look into that guide. I need to get more familiar with CSS before I attempt to make this.

And, I had previously made another "How to make this in HTML" thread for my game.

I got rid of the v.2 because it is kind of ambiguous and wrongly implies that this is for HTML2 :)
--Sole_Wolf
0


User is offline Cocoa 

  • Group: Members
  • Posts: 418
  • Joined: 30-November 10
  • LocationEngland

Posted 16 April 2012 - 03:19 PM (#5)

I've heard of HTML 4.1 and HTML5. Any predecessors are too old anyway.

Read up on CSS anyway like Arron said, it'll heavily rely on that.
Dan || HTML || CSS || Web & Graphic Designer

Oh, there's no place like 127.0.0.1


Portfolio | Forrst (6 Invites) | Dribbble

MY FIRST TUTORIAL - HOW TO CREATE THE IRON MAN LOGO
0


User is online @Tom 

  • space
  • Group: Members
  • Posts: 704
  • Joined: 24-May 11
  • Locationspace
  • Expertise:Python

Posted 16 April 2012 - 05:11 PM (#6)

Cocoa you sir missed the last post, it's the second version of his project not HTML2. It's okay
ocelotapps.com
jr wdR comedian under ThatRailsGuy

View Postarronhunt, on 30 June 2012 - 10:09 PM, said:

Sir you are the first person to make me piss myself laughing. Kudos.
0


User is offline Cocoa 

  • Group: Members
  • Posts: 418
  • Joined: 30-November 10
  • LocationEngland

Posted 17 April 2012 - 11:38 AM (#7)

I know I saw but I had to make sure, HTML2...!?!? That's like... illegal.

In fact, it's like IE6... YUCK.
Dan || HTML || CSS || Web & Graphic Designer

Oh, there's no place like 127.0.0.1


Portfolio | Forrst (6 Invites) | Dribbble

MY FIRST TUTORIAL - HOW TO CREATE THE IRON MAN LOGO
0


User is offline Sole_Wolf 

  • Group: Members
  • Posts: 303
  • Joined: 24-March 10
  • Expertise:HTML,PHP,Java,SQL

Posted 27 April 2012 - 10:23 AM (#8)

What Lobabob and I have come up with so far:
Posted Image
--Sole_Wolf
0


User is online arronhunt 

  • I'm a httpster
  • Group: Moderators
  • Posts: 3398
  • Joined: 09-March 10
  • LocationLos Angeles, CA
  • Expertise:HTML,CSS,Javascript,Graphics,Flash

Posted 27 April 2012 - 11:30 AM (#9)

Fonts: http://victoryroad.n...=6&d=1266288403

Some more styling for your textbox: http://jsfiddle.net/H3fEQ/

edit: A little off-topic, but I started creating my own Pokémon game like..7 years ago. Had some awesome Pokémon drawn up with MS paint :D http://cl.ly/GAfd
DO NOT OPEN THIS

Spoiler
1


User is offline Sole_Wolf 

  • Group: Members
  • Posts: 303
  • Joined: 24-March 10
  • Expertise:HTML,PHP,Java,SQL

Posted 28 April 2012 - 03:41 PM (#10)

View Postarronhunt, on 27 April 2012 - 11:30 AM, said:

Fonts: http://victoryroad.n...=6&d=1266288403

Some more styling for your textbox: http://jsfiddle.net/H3fEQ/

edit: A little off-topic, but I started creating my own Pokémon game like..7 years ago. Had some awesome Pokémon drawn up with MS paint :D http://cl.ly/GAfd


Wow, thank you for the textbox styling and the pokemon text.

I have now implemented the two into the battle interface.

This is what it looks like now.

Posted Image

Also, your pokemon actually look pretty good in my opinion. A lot better than anything I could have done with MS Paint :)
--Sole_Wolf
0


User is offline Qasim 

  • Group: Members
  • Posts: 520
  • Joined: 25-October 10
  • LocationOntario, Canada
  • Expertise:HTML,CSS,PHP,Java,Javascript,Graphics

Posted 28 April 2012 - 03:44 PM (#11)

You're making great progress! I can't wait to see how this turns out.
Qasim Iqbal
[HTML] [CSS] [JS] [PHP] [JAVA]
[ANDROID DEVELOPER] [CHROME WEB STORE DEVELOPER]
[WEBSITE] [FACEBOOK] [FORRST]
0


Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users


Enter your sign in name and password


Sign in options
  Or sign in with these services