HTML要素の位置を対角線で指定します。

Question

JavaScriptが新しく、&は比較的新しいHTMLです。私は、次の操作を行うためには、アルゴリズムの&いくつかの提案を使用する必要がありますどのような言語（純粋なHTMLやJavaScript & HTML）知っていると思います：背景に

場所4つの正方形のが、斜めにそれらを配置します。それぞれの四角は、クリックして別のページに移動するためのリンクです。 どのように私は下の写真のように斜めにhtml要素を配置することができますか？

http://i54.tinypic.com/2v7uw5u.png

私は私のコードは次のようになりますと信じて：

<script> 
    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); 
    } 
</script> 

// 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; } 

<div class="menu" onload="positionIt()"> 
    <a id="square1" href="home.html"><img src="square.jpg" /></a> 
    <a id="square2" href="home.html"><img src="square.jpg" /></a> 
    <a id="square3" href="home.html"><img src="square.jpg" /></a> 
    <a id="square4" href="home.html"><img src="square.jpg" /></a> 
</div> 

Answer 1

Live Demo
Live Demo（leftプロパティを使用してモックアップと一致するように変更オーダー）

私はあなたを求めた数値に維持しようとしました。

HTML：

<div class="menu"> 
    <a id="square1" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a> 
    <a id="square2" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a> 
    <a id="square3" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a> 
    <a id="square4" href="home.html"><img src="http://dummyimage.com/100/f90/fff" /></a> 
</div> 

CSS：この作業を行いどのよう

.menu { 
    background: blue; 
    width: 800px; 
    height: 800px; 
    position: relative 
} 
/* Position the square in absolute terms diagonally */ 
#square1 { position:absolute; left:200px; top:200px; } 
#square2 { position:absolute; left:300px; top:300px; } 
#square3 { position:absolute; left:400px; top:400px; } 
#square4 { position:absolute; left:500px; top:500px; } 

？参照：http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

あなたは、この目的のために絶対位置を使用することができます。 CSSで

：

#menu { 
    position: relative; 
    width: /*enough width for all of the positioned elements*/ 
    height: /*enough height for all of the position elements*/ 
} 
#squareN { 
    top: /*how far from top of #menu*/ 
    left: /*how far from left of #menu*/ 
    position: absolute; 
    width: /*as required*/ 
    height: /*as required*/ 
}