0

これは私の最初の html/css/javascript Web サイトです。基本的にcssを使用して背景画像をフィットさせ、次に使用して画像リンクを追加しようとしましたが、何が問題なのかわかりません

    <div id="project_button" style="position:relative; top: 1000px; left: 1000px" >

その結果、水平スクロール バーに 1000 ピクセルのスクロール ルームができました。で場所を編集しようとすると、同様の結果が得られます

    margin-left:1000px
    margin-top: 1000px

余分なスペースがあるのは垂直スクロールバーになることを除いて。

    <html>
          <head>
          <title>Home Page</title>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <meta http-equiv="Imagetoolbar" content="no">
          <SCRIPT LANGUAGE="JavaScript">
          <!--

          if (document.images) {

          var button1_up = new Image();
          button1_up.src = "project1.gif";

          var button1_over= new Image();
          button1_over.src = "project2.gif";
          }

          function over_button(){
           if (document.images) {
       document["buttonOne"].src = button1_over.src
      }
    }

          function up_button() {
               if (document.images) {
               document["buttonOne"].src = button1_up.src
          }
    }
    //-->
    </SCRIPT>
    <style type="text/css">
    html {height:100%;}

    body {height:100%; margin:0; padding:0;}

    #bg {position:fixed; top:0; left:0; width:100%; height:100%;}


    </style>
    <!--[if IE 6]>
    <style type="text/css">
    html {overflow-y:hidden;}
    body {overflow-y:auto;}
    #bg {position:absolute;
    padding-right:800px;
    margin-right:-800px;}

    #project_button {position:static;}
    </style>
    <![endif]-->
    </head>
    <body>
          <div id="page1" style='position: relative'>   
      <div id="bg"><img src="WebBacking.jpg" width="100%" height="100%" alt="">
          </div>
      <div id="project_button" style="position:relative; top: 1000; left: 1000" >
        <a href="projects.html" onMouseOver="over_button()"
                 onMouseOut="up_button()">
        <img src="project1.gif" alt="click me" 
        width="1800" height="200" name="buttonOne" 
        border=0>
        </a>
      </div>
          </div>

    </body>
    </html>

これは私のコードの残りの部分です。どんな助けでも大歓迎です。

ところで、垂直または水平にスクロールすると背景は収まりますが、画像の位置が静的であるため、スクロールすると移動します。私が設定したときにも言及する必要があります

  top: 0; left:0;

スクロール バーが削除されます。これはトップマージンにも当てはまります。

4

2 に答える 2

2

特定の要素でスクロール バーがまったく必要ない場合はoverflow:hidden、css に追加します。このようにして、要素の外側のすべてが切り取られ、スクロール バーが表示されなくなります。

于 2012-08-26T19:06:42.230 に答える
1

また、試してみてくださいoverflow:auto。コンテンツがオーバーフローした場合にのみスクロールバーが表示されます。

于 2012-08-26T19:10:46.630 に答える