Announcement

**Elok** · June 7, 2014, 13:31

I imagine it also has some generalized videogame standbys (like unit health, and the aforementioned save/load templates) which will at least save some time.

EDIT: Do I need to download Node.js to use MelonJS, or is that just for if you want to modify/customize it?

**onodera** · June 7, 2014, 15:31

Originally posted by Elok View Post

I imagine it also has some generalized videogame standbys (like unit health, and the aforementioned save/load templates) which will at least save some time.

EDIT: Do I need to download Node.js to use MelonJS, or is that just for if you want to modify/customize it?

IIRC Node.js is used to run JS outside a browser, while MelonJS runs inside one.

**Elok** · June 11, 2014, 16:21

I haven't forgotten about this--just sidetracked by sundry life events. ATM I've finished the HTML course, but I'm nowhere near really proficient, while I'm about a third of the way into JavaScript. Should I stop and get accustomed to what HTML should do first, or plow on to JS and see if I can paste it all together in the end? I'm in alien territory here, since I last coded in high school.

**Lorizael** · June 11, 2014, 16:30

My recommendation--based solely on the way I just did it--is that you should finish the JS course and then take the JQuery course. We won't be using JQuery, but JQuery is a JS library designed to play well with HTML and CSS. So the course involves writing HTML and CSS pages and then adding JS on top of it all, which is more or less what we'll be doing.

**Elok** · June 11, 2014, 16:35

Ah. See, I finished the HTML course and realized I could do exactly what the course taught me, but not much else. Tried to create a div with words on it (a sidebar with links), and failed miserably no matter how I did it.

And yeah, the guy who wrote their JavaScript tutorial could have made it clearer. And my whole library system only has that one archaic book on JS.

**Aeson** · June 11, 2014, 19:54

You can post your code and we can explain what went wrong and how to achieve what you're trying to do.

HTML Code:

<html><body><div>html code can be posted in html bbcodes</div></body></html>

**onodera** · June 12, 2014, 03:21

JM

**onodera** · June 12, 2014, 04:09

Originally posted by Elok View Post

I haven't forgotten about this--just sidetracked by sundry life events. ATM I've finished the HTML course, but I'm nowhere near really proficient, while I'm about a third of the way into JavaScript. Should I stop and get accustomed to what HTML should do first, or plow on to JS and see if I can paste it all together in the end? I'm in alien territory here, since I last coded in high school.

If you want to make a game, JS is much more important than HTML or CSS, since you will be manipulating game states, map tiles, and units, none of which are HTML elements. If you want to reapply your knowledge elsewhere, listen to Lori.

I also recommend this course: https://www.edx.org/course/harvardx/...-computer-1022

**Elok** · June 12, 2014, 20:25

You guys are awesome

Applied for a summer job that said "hey college students!" and mentioned web knowledge and SEO, which I'm guessing means they're looking for a spam drone of some description. Even so, it'll be relevant experience. Tinkering with HTML right now, trying to get a test page to display properly.
Right now, I've got:

HTML Code:

<!doctype html>
<html>
<head>
<title>HTML Sandbox</title>
<link type="text/css" rel="stylesheet" href="template.css"/>
</head>
<body id="Bodytype">
<div id="Pagetop">
<p><h1>
TESTING
</h1></p>
<p>Ye Gods, what an ugly color scheme!</p>
</div>
<p>Blahblahblah!</p>
</body>
</html>

The corresponding css goes:

HTML Code:

#Pagetop{
	width:101%;
	height: 150px;
	background-color: #0055AA;
	margin-top:-2%;
	margin-left:-1%;
	margin-right:-1%;
	Font-family: Impact, sans-serif;
	color: #999900;
	text-align: center;
	position:fixed;
}

#Bodytype{
	background-color: #666666;
	color: #999900;
	font-side:2em;
}

There's a fair amount of kludge going on there, obviously. Right now I'm stuck as to why the paragraph section won't show up. I thought it was just the div in the way, but even if I comment out all the div html the "blahblah" text won't show at all. Any thoughts?

Even if I never get skilled enough to help you guys--I'm really getting on on the ground floor here--this is much more interesting than the CCNA stuff. Still going to take the second test in a week and a half, but I'm glad this came along to nudge me in this direction.

**Aeson** · June 12, 2014, 20:44

Open it in Chrome, Ctrl-Shift-I, and then hover over the hidden paragraph. it will show you where it is (behind #Pagetop). You can play around with the attribute values this way too ... even go so far as delete or add html ... seeing your changes in real-time.

The reason your P is being hidden by the DIV is because of the "position:fixed" on the div. That allows other content to "scroll up" underneath it or over it, depending on the relative Z values. The browser just thinks, "hey, there's nothing above this P except this thing we can scroll under, so let's put it at the top of the page".

**Lorizael** · June 12, 2014, 20:44

So, your basic problem is that the div is covering up the paragraph outside the div. While this is also a kludgy solution, if you set the blah paragraph to have an absolute position and then specify where it starts in pixels, you can make it show up. So...

HTML Code:

<p id="blah">Blahblahblah!</p>

HTML Code:

#blah {
	position: absolute;
	top: 200px;
}

**Aeson** · June 12, 2014, 20:51

Some general suggestions:

A good CSS reset will help immensely. This is the one I see used the most:

meyerweb.com/eric/tools/css/reset/

Just include it. Basically it tries to make all the browsers have the same basic starting point since they all have their own defaults. In your case it will get rid of all the need for -margins and >100% width since it gets rid of those annoying margins that browsers like to have by default.

**Aeson** · June 12, 2014, 21:02

Also, for fun:

http://css3gen.com/text-shadow/

Ultimate CSS Gradient Generator from ColorZilla

http://www.colorzilla.com/gradient-editor/

A powerful Photoshop-like CSS gradient editor

**Aeson** · June 12, 2014, 21:22

I would recommend putting "top:0" on the #Pagetop, this way you can use margins on the P (or ideally, a DIV wrapping the P) to force it down. This will help so you don't have to put absolute positioning on everything else on the page.

**DaShi** · June 12, 2014, 21:24

Hey Aeson, the "Announcement: Check out the latest info on Beyond Earth in the CivBE Wiki!" looks terrible in my browser. It's white letters on a light blue background. Also, since I use the dark theme, it's a real eyesore.

You're welcome!

Announcement

FrankenCiv: a hypothetical

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment