ブラウザのサイズを変更する際に、重複する中心の静的divからdivを修正するにはどうすればよいですか？

私は、メインのコンテンツ領域が中央にあるページの左側に常にあるサイドバーを持つ2列のレイアウトを作成しようとしています。ウィンドウのサイズが変更されると、中央に配置されたコンテンツは、左に移動することはありませんが、左に移動することはありません（左に150px）。ブラウザのサイズを変更する際に、重複する中心の静的divからdivを修正するにはどうすればよいですか？

誰かが私を助けることができますか？ここで

がCSSです：

@charset "UTF-8"; 
/* CSS Document */ 

body,td,th { 
    font-size: 16px; 
    font-family: Verdana, Geneva, sans-serif; 
    color: #000; 
} 

body { 
    background-color: #FFF; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 15px; 
    margin-bottom: 0px; 
} 

#nav { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 150px; 
    height: 10000px; 
    background-color: #D61D21; 
    text-align: right; 
} 

#nav a:link { 
    color: #FFF; 
    text-decoration: none; 
} 

#nav a:visited { 
    color: #FFF; 
    text-decoration: none; 
} 

#nav a:hover { 
    color: #FFF; 
    text-decoration: underline; 
} 

#main { 
    width: 810px; 
    height: 810px; 
    margin: 0px auto; 
}

、ここではhtmlです：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Nick Passaro Designs</title> 
<link href="css/index.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 

    <div id="nav"> 
     <a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs"></a> 
     <p><a href="portfolio.php">PORTFOLIO</a> &nbsp;</p> 
     <p><a href="logos.php">LOGOS</a> &nbsp;</p> 
     <p><a href="print.php">PRINT</a> &nbsp;</p> 
     <p><a href="web.php">WEB DESIGN</a> &nbsp;</p> 
     <p><a href="photography.php">PHOTOGRAPHY</a> &nbsp;</p> 
     <p><a href="contact.php">CONTACT</a> &nbsp;</p> 
    </div> 

    <div id="main"> 
     ENTER CONTENT HERE 
    </div> 

</body> 
</html>

すべてのヘルプは大歓迎です！

出典

2012-04-11 Nick Passaro

はこれを行います。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Nick Passaro Designs</title> 
<link href="index.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
    <div id="nav"> 
     <a href="index.php"><img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs"></a> 
     <p><a href="portfolio.php">PORTFOLIO</a> &nbsp;</p> 
     <p><a href="logos.php">LOGOS</a> &nbsp;</p> 
     <p><a href="print.php">PRINT</a> &nbsp;</p> 
     <p><a href="web.php">WEB DESIGN</a> &nbsp;</p> 
     <p><a href="photography.php">PHOTOGRAPHY</a> &nbsp;</p> 
     <p><a href="contact.php">CONTACT</a> &nbsp;</p> 
    </div> 

    <div id="wrapper"> 
     <div id="main"> 
      ENTER CONTENT HERE 
     </div> 
    </div> 
</body> 
</html>

CSS：

#wrapper{ 
    margin-left: 150px; 
}

あなたは何をすべきかは、あなたのメインのdivの周りにラッパーのdivを作成し、それはだように、そのラッパーのdivが150ピクセルの左マージンを持たせるですナビゲーションバーと並べて表示します。メインdiv内のすべてのサイズ変更は、ラッパー内に制限する必要があります。

出典

2012-04-11 23:07:12 Jack

ありがとう！それはトリックをした –

私がちょうど学んだちょっとしたトリックは、あなたの#contentの位置を作ることです。その中にあるすべての子要素をposition：absoluteにします。そうすれば、すべての子要素はコンテンツ領域に対して絶対的なものになり、コンテンツは任意の解像度にリサイズされます。私には時間がかかるので、ダイナミックなサイトを無駄にするのにどれくらいの時間を費やしたのか信じられません。

これはあなたのために何かします。

出典

2012-04-11 22:44:01 sethhoova

私はそれが私が探しているものかどうかはわかりません。私はこれまでにやったことがありますが、#content内のオブジェクトが互いにどのように配置されるかを変更することはできません。 #navは常に画面の左端に貼り付ける必要があり、接触するまで#cententを配置する必要がありますが、包括的なdivの子として配置することはできません。 –

ブラウザのサイズを変更する際に、重複する中心の静的divからdivを修正するにはどうすればよいですか？

答えて

関連する問題