0

これは難しいことではありません...私はメニューといくつかのコンテンツを中央に配置された液体のdivでラップしています。コンテンツは絶対的に配置されます。私がやりたいのはセンター＃content-containerだけです。ここで何が欠けていますか？

    #wrapper {
        max-width:100%;
        min-width:600px;
        min-height:100%;
        margin:0 auto;
    }

    #header {
     -moz-background-clip:border;
     -moz-background-origin:padding;
     -moz-background-size:auto auto;
     background-attachment:scroll;
     background-color:transparent;
     background-image:url(images/KMIAFS_banner.jpg);
     background-position:center top;
     background-repeat:no-repeat;
     height:150px;
    }

    #menu {
     margin-top:150px;
     clear:left;
     float:left;
     padding:0;
     border-top:6px solid #336699;
     width:100%;
     overflow:hidden;
    }

    #menu ul {
     float:left;
     margin:0;
     padding:0;
     list-style:none;
     position:relative;
     left:50%;
     text-align:center;
    }

    #menu ul li {
     display:block;
     float:left;
     list-style:none;
     margin:0;
     padding:0;
     position:relative;
     right:50%;
    }

    #menu ul li a {
     display:block;
     float:left;
     margin:0 1px 0 0;
     padding:30px 10px 6px 10px;
     background:#336699;
     text-decoration:none;
     color:#fff;
    }

    #menu ul li a:hover {
     padding:35px 10px 6px 10px;
    }

    #menu ul li.active a, #menu ul li.active a:hover {
     padding:40px 10px 6px 10px;
    }

    #content-container {
     top:225px;
     position:absolute;
     margin:0 auto;
     width:1000px;
     background-color:#fff;
    }

    #content {
     clear:left;
     float:left;
     width:610px;
     padding:20px 0;
     margin:0 0 0 30px;
     display:inline;
    }

    #content h2 {
     margin:0;
    }

    #aside {
     float:right;
     width:290px;
     padding:20px 0;
     margin:0 20px 0 0;
     display:inline;
    }

    #aside h3 {
     margin:0;
    }


<div id="wrapper">
<div id="header">
 <a id="box-link" href="index.html"></a>
    <div id="menu">
       <ul>
          <li><a href="" title="Link01">Link01</a></li>
          <li><a href="" title="Link02">Link02</a></li>
          <li><a href="" title="Link03">Link03</a></li>
          <li><a href="" title="Link04">Link04</a></li>
          <li><a href="" title="Link05">Link05</a></li>
          <li><a href="" title="Link06">Link06</a></li>
          <li><a href="" title="Link07">Link07</a></li>
          <li><a href="" title="Link08">Link08</a></li>
       </ul>        
    </div>
  <div id="content-container">
  <div id="content">
   <h2>
    Page heading
   </h2>
   <p>
    Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
   </p>
   <p>
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
   </p>
   <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
   </p>
  </div>
  <div id="aside">
   <h3>
    Aside heading
   </h3>
   <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
   </p>
  </div>
 </div>
</div>
</div>
</div>
4

2 に答える 2

1

この問題にはいくつかの解決策があります。

最も簡単なのは、＃content-containerから絶対位置を削除することです。これによりmargin: 0 auto、divを中央に配置できます。メニューにカーソルを合わせたときの垂直方向の動きの問題を修正するには（これが絶対位置にした理由だと思います）、メニューdivの高さを設定するだけです（100pxで十分なようですが、それで遊ぶことができます）。だからこれらはあなたの変更です：

 #menu {
      margin-top:150px;
      clear:left;
      float:left;
      padding:0;
      border-top:6px solid #336699;
      width:100%;
      overflow:hidden;
      height: 100px;
  }

  #content-container {
      margin:0 auto;
      width:1000px;
      background-color:#fff;
      left: 100px;
  }

もう1つの解決策は、本当に＃content-containerの絶対位置を維持したい場合は、＃content-container divを別のdiv（たとえば、＃inner-wrapper）でラップし、そのdivの位置を相対に設定することです。これにより、ウィンドウではなく、＃content-container自体が＃inner-wrapperに対して相対的に配置されます。そのCSSは次のようになります。

  #inner-wrapper {
    position: relative;
    margin: 0 auto;
    width: 1000px;
  }

ただし、このトリックだけではメニューの配置は維持されません。これを行うには、メニューをこの新しいdivでラップし、CSS / HTMLを変更して、青い上部の境界線がページの幅を拡張するようにする必要があります。それほど難しくはありませんが、もっと手間がかかります。

個人的には、最初の解決策を実行して、それを1日と呼びます。

于 2010-06-09T21:08:57.867 に答える
1

position:absolute;＃content-containerクラスから削除するだけです。それ以外の場合margin:0 auto;は無視されます。また、上記の2つの終了divタグが欠落しているようです。

于 2010-06-09T20:56:22.067 に答える