1

外部 CSS を使用して簡単な Web ページを作成しました。今は自分のコンピューターでは問題なく表示されますが、友人に送信すると、下のボタンが一緒に表示されませんか?

マイモニター http://i.imgur.com/ektmF.png

フレンドモニター http://i.imgur.com/RmB3t.png

HTML コード

    <body>

<style type="text/css">
body {
    overflow:hidden;     <!-- Setting body overflow to hidden -->
}

<!-- Background image -->



    </style>

    <div id="backgroundWrapper">
        <img src="background.png" />      
    </div>

    <!-- Home button -->   

    <div id="homebtn">
        <a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>   
        </a>
    </div>

    <!-- Shop Button -->

    <div id="shopbtn">
        <a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/>  
        </a>
    </div>
    </body>

CSSコード

 #backgroundWrapper{width:100%;height:100%;z-index:-1;position:absolute;}
     #backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;}
     #homebtn {width:100%;height:100%;z-index:1; position:absolute;top:90%; left:35.3%;}
     #shopbtn  {width:100%;height:100%;z-index:1;position:absolute; top:90%; left:50%;}
     #text {
     color:black;
     font-size:15;
     text-align:center;
     position:relative;
     top:20%;
     font-family:verdana;
     font-weight:bold;
     }
     #myform {
    position:absolute;
     left:10%;
     top:30%;

     }


      #submitbuttons {
    position:relative;
    text-align:center;
     top:80%;

     }




    body {
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 0px
    }
4

2 に答える 2

1

使用してposition: absolute;いるため、子要素をコンテナ内にラップposition: relative;して、野生に流出しないようにする必要があります

例えば

<div class="container">
   <div class="firstbtn"></div>
   <div class="secondbtn"></div>
</div>

<style>
   .container {
     position: relative;
     height: 200px;
     width: 500px;
   }

   .firstbtn {
     position: absolute;
       left: /* whatever */;
       top: /* whatever */;
   }

   .secondbtn{
     position: absolute;
       left: /* whatever */;
       top: /* whatever */;
   }
</style>

したがって、両方のボタンがコンテナ要素から流出しません

于 2012-12-24T14:14:39.753 に答える
0

このCSSを次のように変更します

#backgroundWrapper{width:100%; z-index:-1;position:absolute;}
#backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;}
#button-wrapper{width:30%; margin:0 auto;top:90%;z-index:1;}
#homebtn {position:relative;top:90%;float:left;}
#shopbtn  {float:right;}

#button-wrapperそれに応じて幅を調整し、button-wrapper両方のbtnを作成してhtmlに配置します

于 2012-12-24T14:28:38.740 に答える