0

ウィンドウを最小化し始めると、左側のバーナビゲーションの下でボディdivが折りたたまれます。

誰かが私が間違ったことやもっとやらなければならないことについてアドバイスしてもらえますか？

どうもありがとうございました。

cssスニペット：

#navigation {


   float: left;
   min-width: 20%;
   margin: 0;
   margin-top: 5px;
   font-weight: normal;

}

#centerDoc {

   float: left;
   width: 80%;
   padding: 0 0 20px 0; /*top right bottom left*/
   margin-top: 0px;

}


#header{

   position: relative;  
   width:100%;
   height:96px;
   margin-left: 5px;


}



#footer {
        font-family: Trebuchet MS;
        font-size: x-small;
        padding:2px;
        margin:0px;
        background-color:#CBE3F6;
        color:#fff;
        border-bottom: 1px solid #9EC4E2;
        border-top: 1px solid #9EC4E2;
        text-align:center;

        width: 100%;
        }


 #wrapper{


   position: relative;
   margin-left: 5px;


}



#container {
   width: 100%;
   height:100%;
}

ページのテンプレート：

<?php require_once 'includes/header.php';?>


<div id="wrapper">

    <?php require_once 'includes/nav.php'; ?>


    <div id="centerDoc">







</div>  <!--centerDoc !-->
 </div> <!-- wrapper !-->



   </div> <!--container !-->




</body>

4

2 に答える 2

0

#navigationのmin-widthをmax-widthに変更します。このようにして、左側のナビゲーションバーの幅がページ幅の20％を超えないようにします。

編集：

#navigation {
   float: left;
   width: 20%;
   margin: 0;
   margin-top: 5px;
   font-weight: normal;
}

#centerDoc {
   float: right;
   width: 80%;
   padding: 0 0 20px 0; /*top right bottom left*/
   margin-top: 0px;
}
于 2012-05-27T10:23:59.127 に答える
0

floatから属性を削除し#centerDoc、それに追加margin-left: 20%.します

次に、またはに変更min-width: 20%します。これがないと、内部のテキストは。の下に流れます。#navigationwidth: 20%max-width: 20%centerDoc#navigation

測定の同期を維持することをお勧めします。あなたはとで持ってwidth: 80%います。両方の場合にプレーンを使用し、ページのに属性を割り当てた場合は、レイアウトを想像する方が簡単な場合があります（したがって、との幅は、それらの共通の親を基準にしています）。#centerDocmin-width#navigationwidthmin/max-widthbody#navigation#centerDoc

編集：CSS：

#navigation {
  float: left;
  width:20%;
}
#centerDoc {
  width: 80%;
  margin-left:20%;
}
#header{
  width:100%;
  height:96px;
}
#container { 
  max-width: 1200px;
  min-width: 600px;
}

を削除しました#wrapper。#container width # max-/min-width´ in thenavigation ＃ centerDoc`をパーセンテージで表示します。. The scrollbars appear into the browser when the page is less then 600 pixels wide. The page also doesn't become wider then 1200 px. This allows you to define thes of theand

次のHTMLを使用すると、すべてが正しく機能するはずです。（中身はわかりませんがnav.php。うまくいけば、フローティングをクリアするものは何もありません#navigation）

<div id="container">
  <?php //require_once 'includes/header.php';?>

<div id="navigation">
  <?php //require_once 'includes/nav.php'; ?>
  <p>Sample text. Sample text. Sample text. Sample text. Sample text.</p>
</div>  <!--navigation !-->

<div id="centerDoc">
  <p>Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.</p>
</div>  <!--centerDoc !-->
</div> <!--container !-->
于 2012-05-27T11:09:26.663 に答える