0

これは私がやろうとしている新しいことで、左側に位置が固定されたフローティング サイドバー、右側にメインのものがあります。何らかの理由で、多くの CSS が機能していません。特に、私が言ったように600ピクセルだけではなく、フル750ピクセルです。結果をご覧になりたい場合は、私のウェブサイトでさまざまな部分を強調表示しました ( http://brandonc.handcraft.com/sevenmages/prolouge ):

  <style>
    html { margin: 0; padding: 0; }
    body { background-image: url('old-paper-texture.jpg'); margin: 0; padding: 0; }
    #wrap { width: 750px; margin: auto; }
    #header { background: purple; }
    #header h1 { text-align: center; }
    #header h2 { text-align: center; }
    #header h3 { text-align: center; }
    #main { float: right; width: 600; background: blue;}
    #main p { font-family: arial; font-size: 3;  margin: 20 30; text-align: left; text-indent: 30px; }
    #main h1 { font-family: Macondo Swash Caps; text-align: center; }
    #main h2 { font-family: Macondo Swash Caps; text-align: center; }
    #main h3 { text-align: center; }
    #sidebar { position: fixed; margin: 0; padding: 0; text-indent: 0; background: red; float: left; width: 150; }
    #sidebar p { text-align: center; text-indent: 0; }
    #sidebar il { text-align: center; }
    #sidebar ul {  }
    #sidebar a:link { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #sidebar a:visited { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #sidebar a:hover { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #sidebar a:active { color: #000000; text-decoration: none; font-family: Macondo Swash Caps; font-size: 15; }
    #footer { margin: 20 0; text-align: center; background: green; }
  </style>

注: wrap はすべての div であり、基本的に body 関数のようなものです。

4

2 に答える 2

2

div 幅の単位が指定されていません#main。これは無効な CSS です。ブラウザは、現在設定されている width プロパティを無視します。px後に含めるだけ600で、期待どおりに動作するはずです。

pxまた、設定された幅に値を追加します#sidebar

width: 150;作るのではなくwidth: 150px;

于 2013-03-09T04:16:13.767 に答える
1

ここでは「px」という単位を含める必要があります。「600」を「600px」に変更します。それはあなたを正しい方向に導くはずです。

于 2013-03-09T04:16:44.653 に答える