3

ページの左側に常にサイドバーがあり、メイン コンテンツ エリアが中央に配置されている 2 列のレイアウトを構築しようとしています。ウィンドウのサイズを変更すると、中央に配置されたコンテンツが最終的にナビゲーション バーに突き当たります。ただし、触れたときの位置よりも左に移動しないでください (左: 150px)。

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

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>

どんな助けでも大歓迎です！

4

2 に答える 2

1

これを行う：

<!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 の左マージンを 150px にして、ナビゲーション バーと並べて表示します。メイン div 内のすべてのサイズ変更は、ラッパー内に制限する必要があります。

于 2012-04-11T23:07:12.283 に答える
1

私が学んだちょっとしたコツは、#content position: relative; を作成することです。次に、その中のすべての子要素を position: absolute; にします。そうすれば、すべての子要素がコンテンツ領域に対して絶対的になり、コンテンツは任意の解像度にサイズ変更されます。動的サイトのレイアウトにどれだけの時間を無駄にしていたか信じられないほどの時間を節約できます。

これがあなたのために何かをすることを願っています。

于 2012-04-11T22:44:01.123 に答える