1

だから、私はWebデザイン/開発にかなり慣れていないので、コツをつかむためだけに、あまり機能しない単純なWebサイトに取り組んでいます。ブラウザが最大画面のときに Web ページの見栄えを良くしましたが、ウィンドウを縮小すると、すべての div とすべてが移動し、突然完全に混乱したように見えます。どうすればこれが起こらないようになりますか。

念のためのコードは次のとおりです...経験者にとってはおそらく混乱しているように見えますが、とにかくここにあります：

STYLE.CSS ファイル

   body{
    background-image:   url(Images/background.gif);
    background-repeat:repeat-x;
    background-size: cover;
    }
    .topBar{
    width: 100%;
    top: 0;
    height: 50px;
    position: fixed;
    right: 0;
    -webkit-box-shadow: 0px 0px 8px 0px #000;

    background-image:url(Images/topBar2.gif);
    }
    #logoImage{
    float: left;
    width: 180px;
    height: 50px;
    top: 0;
    margin-left: 380px;
    background-image: url(Images/images/topBar_02.gif);

    }

    .topBar h1{
    float: left;
    margin-left: 400px;
    color: white;
    top: 0;
    font-family: Tahoma, Geneva, sans-serif;
    text-align:justify;
    text-shadow: -1px -1px 1px #000;

    }
    .logoImage {
    top: 0;
    float: left;
    margin-left: 100px;
    }
    #btn{
    cursor:pointer;
    border-radius: 4px;
    border: 1px solid #039;
    font: 16px bold  Tahoma, Geneva, sans-serif;
    color: white;

    background-color: #0499ff;

    padding 4px;


    }
    .searchBox {
    float: right;
    margin-top: 7px;

    padding-right: 500px;


    }
    .searchBox input{
    border-radius: 5px;
    padding:4px;

    color:#666;
    font:  "Times New Roman", Times, serif;

    }

    .topBar img{
    width: 40px;
    height:20px;
    margin: 20px;
    margin-left: 400px;
    }
    .mainLogin{
    border: 1px solid  #999;
    border-radius: 6px;
    width: 300px;
    height: 100px;
    margin-top: 300px;
    float: right;
    margin-right: 500px;
    position: fixed;
    background-image:url(Images/login_back2.gif);
    padding: 20px;



    }
   .mainLogin input{
    border-radius: 5px;
    padding: 4px;

    }
    .username{
    width: 300px;

    }
    #rmbrme{
    float:right;
    color: #999;
    text-shadow:-.3px -.3px .3px #000;
    margin-right: 110px;
    margin-top: 3px;
    font: 10px Georgia, "Times New Roman", Times, serif;

    }
    #rmbrme a{
    text-decoration: none;
    color: #999;
    text-shadow: -.3px -.3px .3px #000;
    }
4

4 に答える 4

2


レスポンシブ デザイン、メディア クエリ、Fluid レイアウトが必要です (:

CSS: 画面サイズに基づいて要素を整列する

于 2012-10-29T07:06:28.157 に答える
1

私は単純に最も外側のdivを作成して位置属性を相対的にすることをお勧めします

style="position:relative"

次に、それに応じて残りの内部要素を配置するだけです。問題が修正されることを願っています

于 2012-10-29T07:45:00.307 に答える
0

float:leftandを使用float:rightすることは、より良い方法ではありません。position:fixedタグとフロートタグがあなたのサイトを台無しにしていると思います。

次のような個別の配置クラスを使用します。

.leftalign
 { 
   float:left;
   position:static;
 }
于 2012-10-29T07:29:08.213 に答える
0

まあ、私もウェブ開発は初めてです。「ビューウィンドウ」のサイズを修正するアウターコンテナを使用できます。これにより、ブラウザのサイズを変更しても、すべての div が固定されたままになり、スクロールバーがすべてのデータを表示します。

たとえば、次のようなことを試すことができます。

<body>
     <div class="outercontainer">
           <div class="innercontainer">
            Do all you stuff here
           </div>
     </div>
</body>

そしてcssシートで：

.outercontainer{
      height:100%;
      width:100%
}
.innercontainer{
      height:800px;
      width:1200px
}

またはそのようなもの。

于 2012-10-29T07:20:29.740 に答える