Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Learning by doing: what's this code do?

    Hey, I'm trying to learn javascript and CSS and HTML5 by creating a simple little space shooter game. I'm following along with this tutorial, and starting by copy-writing my own version of the game frame itself, found here. Browse over there and View Source.

    I can't figure out what this following line of code does, or why removing it removes the "Click here to start!" text...

    Code:
    <div style="position: absolute; top: 120px; width: 700px; color: white;">
    Since it's just a div, I can't use the w3c school site I've been using to look up the tags. What exactly is being positioned, what's "top" and "width" doing? And why does removing this code (and the close div tag) remove the "Click here" text, which appears two lines later?

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Code:
    <div style="position: absolute; top: 120px; width: 700px; color: white;">
    That div is basically just a container. It "holds" the loading bar and the "Click here to start" button. Think of it like this. You gave that div certain properties (like a specific position, width, and color).

    Imagine that your div is a box. You have certain materials inside it (like the "Click here to start" button and the loading bar). Now, when you move the box (lets say change the top:120px to top: 500px), the contents inside it move with it. If you change the width to be smaller, the contents inside has to somehow squeeze inside to fit.

    Now, lets say you remove that one line of code like you did. If you simply get rid of that line, you got rid of the box (the div). However, you aren't removing the contents inside it. That "Click here" text still exists. All you did was throw the box away but while keeping the rest of the contents that used to be inside the box. But since you threw the box away, everything is unorganized. The contents inside it are scattered around. Notice that the div has "color:white". That's why your click here button has a white font. When you got rid of that box, the click here text became black (default color). That click here text still exists on the screen but since you made the background black, it's camouflaged.

  • #3
    Regular Coder
    Join Date
    Jun 2012
    Posts
    133
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Each tag has various elements that it can use to further refine how it is shaped and positioned. At this point of your learning you should be looking into the attributes of each of the elements. w3c has an excellent list of attributes for each tag. Go through each one and find out first hand by doing, what each attribute is all about. You will find that in this case, all of these attributes work hand in hand to display the division as desired.
    Oh and look up z-index while you're at it.
    Don't be afraid to experiment.

  • #4
    New Coder
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @ttkim: Ah, I see. That's a good metaphor, I might use it ^_~

    Uh, hmm...when I click "Thank User For This Post," it says I don't have permission...so don't think I'm stiffing you by not Thanking; it just won't let me. Prolly 'cause I'm a new user, they don't want people artificially inflating their Thanks rating by creating new accounts and Thanking their own posts.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •