Ingolme

The overflow would go on #Geodevideo because it's the direct parent of the video element. It seems to have padding already, so overflow may not be necessary.

I think you need to go through the CSS tutorial again to understand what CSS selectors do. The selector I used only applies to <video> elements that are descendants of an element with id="Geodevideo"

CSS can be applied to any element. Your selector is targeting the <div> element, but it seems you're intending to target the <video> element. You're using the wrong selector for that, use this selector: #Geodevideo video { margin-top: 70%; }

I'm not sure whether you have the margin on the right element. Perhaps you intended to put it on #Geodevideo video Also, 70% margin is really large. It's likely going to mess up your page layout.

One of your elements has a margin, you haven't told us which one so I can't tell you. The parent of that element has to have overflow set to hidden. If you tell us which element has the margin we can tell you exactly which one to put the overflow on.

It seems I can't properly teach you software development on a forum, there are so many principles you can't grasp without prior experience. I've attached a working game that runs smoothly on my phone, it will work provided you put it in the same location on your server and you use the same image and audio file names. Hopefully reading the code you can learn about structuring your software. You seem to have missed out a whole lot of requirements when describing your game to me, here are some things I had to figure out by digging through your original code: When a target gets hit by a cowpie it toggles its state between "tru" and "lies" When a target bounces off the boundaries three times it also toggles a state change Each state has a different image to represent it There can be more than one target on the screen Hitting a target in its "tru" state adds 1 to the "oops!" counter Hitting a target in its "lies" state adds 1 to the "goodHits" counter The total score is calculated with the following formula: goodHits * 4 - oops * 2 All these details and more are necessary in your requirements document. If you can't describe your game to somebody, how are you going to be able to build it? index.html

An element that is between the tags of another element is a child of that element. <parent><child/></parent> Any element that is inside another element at any level is a descendent: <element> <descendant> <descendant/> </descendant> </element> Any element that wraps around another element is that element's ancestor: <ancestor> <ancestor> <element/> </ancestor> </ancestor>

Which element is the margin on? Is it on the <video> element or on the <div id="GeodeVideo"> element? <video> is a child of <div id="GeodeVideo">

It's never necessary to explicitly set the width of an element to 100% because block elements always fill the full width of their container by default. Your issue with the margin is caused by collapsing margins: The vertical margin of an element combines with the margins of its ancestors as long as they don't have a border or padding. A quick solution is to set the overflow property of the parent element to "none". A solution without side-effects is a bit more complicated, you would create the :before pseudo-element from the parent container to cause a separation between the element and the edge of its parent. something::before { /* "something" should be the selector of the element's parent */ content: ""; display: block; }

Something like this: <nav>Navigation (no width set)</nav> <div> <div>percentage width</div> <div>percentage width</div> <div>percentage width</div> </div>

The basic principle is that a <video> element is in the background, stretched to fit the whole element in which it is contained.

No, that leads to the same problem. There's something called page flow, it's when all the elements are aware of what is around them and adjust themselves to fit together properly. You should never break the page flow. You have to learn to do layouts properly. Dsonesuk provided you an example of how to do that type of layout.

It is very inefficient to add and remove nodes from the DOM. What you should have is an internal data structure that's a single- or two-dimensional array with numbers in it. On each game cycle you would read the array and write its contents into the cells of an existing table. The entirety of the game is played in the data structure while the table is only used to represent it visually to the user.

These days we don't use pixel width and height for layout, we make flexible pages that adapt to fit any screen they're being displayed on. This is done using percentage sizes, ems for fonts and media queries to rearrange things.

Just put your error messages within the same form and only display them if there is a message to display: <label for="first-name-input">First Name</label> <input type="text" name="first-name" id="first-name-input"> <?php if(isset($errors['first-name'])) { /* Only show an error message if there was an error */ ?> <span class="error"><?php echo $errors['first-name']; ?></span> <?php } ?>

It represents the elements of the transformation matrix in 3d space. It is pretty complicated, you need to understand university level algebra to use it properly. Your understanding of the 2d matrix is also very simplified. Have you wondered where the rotate function is in that matrix?

There isn't an easy way to make a page responsive, each page on your site has to be designed and coded to be responsive, media queries are one of the tools used to make that happen. If you want the whole page to shrink down to fit the phone screen then you actually shouldn't use the meta viewport tag, but just shrinking the site is not responsive because the user is forced to zoom in to see anything.

You have to specifically write line breaks in the file. If you don't put a line break there, there won't be a line break. fwrite($fp, $hostname . "\n");

For the third time. You're writing this: Game.hitTest(a, { It's supposed to be this: Game.hitTest = function(a, {

I didn't provide a diagram, I just wrote some code with some incomplete object templates. Why have you commented out the closing curly brace "}" in this code? That would be what's causing a syntax error. // Create or destroy cowpies Game.createCowpie = function() { cowpies.push(new Cowpie()); //} The other errors likely just cascade down from there. You seem to have completely commented out the hitTest() method, so it's not throwing errors, but doesn't do anything else either which isn't very useful. Instead of pressing the <> button for code in your posts, just put your code between [ c o d e ] and [ / c o d e] tags.

They're just syntax errors, syntax errors are easy to debug. In my previous post I told you how to fix the hitTest method which had a mistake. Game.hitTest = function(a, { There's also a mistake I made here, it should be using Game.cowpies: Game.createCowpie = function() { cowpies.push(new Cowpie()); } But you still seem to be missing the bigger picture, have you determined the structure of your game? The code itself does not matter very much, you should have the game designed well enough that it could be programmed in any language. You have to describe all the objects, their properties and methods, and the interactions between the objects. The code I wrote is incomplete, it's just setting up some of the objects. If I write much more code I'll have built the whole game.

It's either a CSS rule with higher precedence or the "headings" in your table are actually <td> elements.

Do you know what format your video is? It seems that the format that has the widest compatibility among browsers is H.264 video and MP3 audio in an MP4 container.

Check to see whether the video format is supported by the browser you're using: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility

I believe mobile devices respond to the oninput event rather than onkeyup.