title: Position HTML elements diagonally
body: <p>I am new to Javascript &amp; relatively new to HTML. I would like to know what language(pure html or Javascript &amp; html) I should use &amp; some suggestions of an algorithm in order to do the following:</p>
  
  <p>Place 4 squares on a background but position them diagonally. Each square is a link you can click to go to a different page. <strong>So how would I be able to position html  elements diagonally like my picture below?</strong></p>
  
  <p><a href="http://i54.tinypic.com/2v7uw5u.png" rel="nofollow noreferrer">http://i54.tinypic.com/2v7uw5u.png</a></p>
  
  <p>I believe my code would look like this:</p>
  
  <pre><code>&lt;script&gt;
      function positionIt()
      {
          var screenW = // javascript function to get screen width??;
          var screenH = // javascript function to get screen height??;
  
          var sq1 = document.getElementById( "square1" );
          var sq2 = document.getElementById( "square2" );
          var sq3 = document.getElementById( "square3" );
          var sq4 = document.getElementById( "square4" );
  
          // What javascript functions set a elements x,y positions?
          // Should I use another way of positioning the square (not by absolute terms)
          sq1.setXPos( screenW / 4 );
          sq1.setYPos( screenH / 4 );
  
          sq2.setXPos( screenW / 3 );
          sq2.setYPos( screenH / 3 );
      }
  &lt;/script&gt;
  
  // OR if I use css
  .menu { background-color: blue; }
  /* Position the square in absolute terms diagonally */
  #square1 { x=200; y=200; }
  #square2 { x=300; y=300; }
  #square3 { x=400; y=400; }
  #square4 { x=500; y=500; }
  
  &lt;div class="menu" onload="positionIt()"&gt;
      &lt;a id="square1" href="home.html"&gt;&lt;img src="square.jpg" /&gt;&lt;/a&gt;
      &lt;a id="square2" href="home.html"&gt;&lt;img src="square.jpg" /&gt;&lt;/a&gt;
      &lt;a id="square3" href="home.html"&gt;&lt;img src="square.jpg" /&gt;&lt;/a&gt;
      &lt;a id="square4" href="home.html"&gt;&lt;img src="square.jpg" /&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>