0

こんにちは、div エリアを修正しました。これらの固定 div を、「ページ」と呼ぶ 1 つの div に入れます。ここでは css です。

.page {
    width: 964px;
    margin-top:6px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
}

しかし、異なる解像度の固定div領域でデザインをチェックすると、「ページ」divから遠く離れてしまいます

そしてここに修正されたdiv cssがあります：

#rocket_left
{
  width:127px;
  height:148px;
  background-image:url(../../images2/images/tapinak_resim.jpg);
  top:244px;
  left: 5.4%;
  position:fixed;
}

#rocket_left_desc
{
 background-image:url(../../images2/images/bg_sol_bslk_tpnk.png); 
  width:130px;
  height:335px;
  top:385px;
  left:70px;
  position:fixed;
}
4

2 に答える 2

1

"But when I check my design with different resolution fixed div area go far from my "page" div".

これは、要素の位置を固定として設定すると、その位置が画面に対して相対的に計算されるためです。この場合、要素は常に画面から次の位置に配置されtop:244px; left: 5.4%;ますtop:385px; left:70px;。

私の提案は、それらを絶対に配置し（ を使用position:absolute;）、ビューアーの画面の幅がドキュメントの幅（あなたの場合、964px）よりも大きいかどうかを（JavaScript を使用して）検出し、そうである場合は変更することですロケットの位置position:fixed;

上記の私の提案のjQueryコードは次のとおりです。

<script type="text/javascript">
    $(document).ready(function(){
        if($(window).width()>=964){
            $('#rocket_left').css('position','fixed');
            $('#rocket_left').css('position','fixed');
        }
    });
</script>

使用する css は次のとおりです (MarvinLabs の投稿による)。

.page {
    position: relative; /* Position context for the rockets */
    width: 964px;
    margin-top:6px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
}

#rocket_left
{
  width:127px;
  height:148px;
  background-image:url(../../images2/images/tapinak_resim.jpg);
  top:244px;
  left: 5.4%;
  position: absolute; /* Absolute positionning within the page */
}

#rocket_left_desc
{
 background-image:url(../../images2/images/bg_sol_bslk_tpnk.png); 
  width:130px;
  height:335px;
  top:385px;
  left:70px;
  position: absolute; /* Absolute positionning within the page */
}
于 2012-10-30T09:20:39.150 に答える
1

あなたの言いたいことは、ブラウザのドキュメントではなく、ページに対してロケットを配置することだと思います。その場合は、配置指示を変更するだけです。

.page {
    position: relative; /* Position context for the rockets */
    width: 964px;
    margin-top:6px;
    margin-left: auto;
    margin-right: auto;
    background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
    background-repeat:repeat-y;
}

#rocket_left
{
  width:127px;
  height:148px;
  background-image:url(../../images2/images/tapinak_resim.jpg);
  top:244px;
  left: 5.4%;
  position: absolute; /* Absolute positionning within the page */
}

#rocket_left_desc
{
 background-image:url(../../images2/images/bg_sol_bslk_tpnk.png); 
  width:130px;
  height:335px;
  top:385px;
  left:70px;
  position: absolute; /* Absolute positionning within the page */
}
于 2012-10-30T08:37:26.097 に答える