درود برشما
اگه امکان داره یه نگاه به کدمن میندازنین ببین چرا در قسمت box المان های دایره اینجوری قرار گرفتن؟
<style type="text/css">
body
{
margin:0;
padding:0;
background-color:#eee;
}
#intro
{
width:100%;
height:350px;
background-color:#fff;
border-top:5px solid #ba1000;
border-bottom:5px solid #ba1000;
position:fixed;
top:50%;
margin-top:-175px;
}
#main
{
width:1000px;
height:200px;
/*background-color:#60F;/*remove*/
margin:0 auto;
}
#header
{
width:1000px;
height:110px;
/*background-color:#0C3;*/
position:relative;
}
#logo
{
width:400px;
height:100px;
/*background-color:#3CF;/*remove*/
position:absolute;
top:5px;
left:50%;
margin-left:-200px;
}
#box
{
width:1000px;
height:240px;
background-color:#F0F;
}
#hand
{
width:412px;
height:240px;
background-color:#FC0;
position:absolute;
left:50%;
margin-left:-206px;
}
#circle-en
{
width:140px;
height:140px;
border-radius:70px;
-moz-border-radius:70px;
-webkit-border-radius:70px;
background-color:#0C0;
position:absolute;
top:50%;
left:50%;
margin-left:-70px;
margin-top:-70px;
}
#circle-fn
{
width:140px;
height:140px;
border-radius:70px;
-moz-border-radius:70px;
-webkit-border-radius:70px;
background-color:#336;
position:absolute;
top:50%;
left:50%;
margin-right:-70px;
margin-top:-70px;
}
</style>
<!-- Start Intro -->
<div id="intro">
<!-- Start Main -->
<div id="main">
<!-- start header -->
<div id="header">
<!-- Start Logo -->
<div id="logo">
<img src="logo.png" alt="logo" />
</div>
<!-- End Logo -->
</div>
<!-- End Header -->
<!-- Start box -->
<div id="box">
<div id="hand">
<img src="hand.png" alt="hand" />
</div>
<!-- start circle-en -->
<div id="circle-en"></div>
<!-- End circle-en -->
<!-- start circle-fn -->
<div id="circle-fn"></div>
<!-- End circle-fn -->
</div>
<!-- End box -->
</div>
<!-- End Main -->
</div>
<!-- END Intro -->