2012-04-19 5 views
1

私は中心のページをデザインしていますが、私のメニューは正確に中央に配置されていません。それは右側に少し近いです。なぜそれがそんなのか分からなかった。助けてもらえますか?フレキシブルなページの配置メニュー

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

CSS

body { 

     margin-left: auto; 
     margin-right: auto; 
     text-align:center; 
     background: #ffffff } 

div.wrap { 
     max-width:800px; 
     min-width:400px; 
     margin: 0px auto; 
     border: 1px dashed red; } 

div.inner-wrap { 
     overflow: auto;   
     margin: 30px; 
     border: 1px dashed #222; } 
div.header { 
     padding-top: 1pc; 
     text-align:center; 
     width:100%; 
     color: #000000;} 

    div.menu { 
     list-style:none; 
     margin:0; 
     padding:0; 
     width:100%; 
     text-align:center; 
     background:#FBB117;} 
    div.menu ul{ 
     margin-left: auto; 
     margin-right: auto; 
     margin-top: 3px; 
     margin-bottom: 3px; 
     width: 100px 
     padding:0; 
     display:inline-block;} 
    div.menu li{ 
     display:inline; } 
    div.menu li a{ 
     text-decoration:none; 
     padding:7px 0; 
     width:100px; 
     background:#FBB117; 
     color:#4C4646; 
     float:left; 
     text-align:center; } 
    div.menu li a:hover{ 
     background:#a2b3a1; 
     color:#000 } 

div.content { 
     padding-top: 2pc; 
     text-align:left; 
     margin-left: 50px; 
     margin-right: 50px; 
     color: #000000 } 

div.content p { 
    color: #493831; 
    padding-bottom: 30px; 
    margin: 0;} 

    div.sidebar { 
     margin-right: 15%; 
     padding-top: 2pc; 
     text-align:center; 
     float: right; 
     width: 200px; 
     color: #000000; 
     list-style:none; } 
    div.sidebar ul{ 
     margin-left: auto; 
     margin-right: auto; 
     margin-top: 3px; 
     margin-bottom: 3px; 
     padding:0; 
     list-style: none; 
     display:inline-block; } 
    div.sidebar li{ 
     display:inline; } 
    div.sidebar li a{ 
     text-decoration:none; 
     padding:10px 0; 
     width:100%; 
     background:#FBB117; 
     color:#4C4646; 
     float:right; 
     text-align:center; 
     border-bottom:1px solid #fff;} 
    div.sidebar li a:hover{ 
     background:#a2b3a1; 
     color:#000 } 

HTMLコードこちらです:

<body> 
     <div class="wrap"> 
     <div class="inner wrap"> 
     <div class="header"> 
      <img src="realimg1.jpg" class="real" alt="king"> 
      <h1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1> 
     </div> 
     <div class="menu"> 
      <ul> 

       <li><a href="link1.html">xx</a></li> 
       <li><a href="link1.html">xxxx</a></li> 
       <li><a href="link1.html">xxxxxxx</a></li> 
       <li><a href="link1.html">xxxxxxxxx</a></li> 
       <li><a href="link1.html">xx</a></li> 
       <li><a href="link1.html">xxxxxx</a></li> 

      </ul> 
     </div> 
     <div class="content"> 
      <p> 
      <img src="img1.jpg" class="bw" alt="king"> 
      The CC is one of the oldest continually operating chess club in 
      the Southern Hemisphere.We can proudly boast that we have been open daily since 1990 and we inted to 
      maintain that tradition. On any night, you will find members of the club playing casual games or 
      participating in one of our manly regulary scheduled tournaments. We are family club, and offer competition and 
      instruction suitable for chess players of all skill levels and age groups.</p> 
      <p>No other club in texas can boast a history so rich. Winning the club champion championships is your 
      chance to get amongst these greats, and be immortalized foreve on the honow boards.</p> 
      <p>Throughout the year, Chess Club 'traditional time control' FIDE rated events form, whereby 
      a player's scores from all 9 events will add up to form a grand prix score at the end of the year.The tournaments included are: 
      Australia Day Weekender, Chess Club Championship,ANZAC Day Weekender, City Of Brisbane Open, Edwin Malitis Memorial, Chess Club Open , Chess Club Cup Weekender 

     </div> 
     <div class="sidebar"> 
      <ul> 
      <li><a href="link1.html">xxx</a></li> 
      <li><a href="link1.html">xxxxxxxxx</a></li> 
      <li><a href="link1.html">xxxxxxx</a></li> 
      <li><a href="link1.html">xxxxxx</a></li> 
      <li><a href="link1.html">xxxxxxxxx</a></li> 
      <li><a href="link1.html">xxxxxxxxxx</a></li> 
      <li><a href="link1.html">xxxxxxxx</a></li> 
      <li><a href="link1.html">xxxxx</a></li> 
      <li><a href="link1.html">xxxx</a></li> 
      <li><a href="link1.html">xxxxxxxxxxxx</a></li> 
      <li><a href="link1.html">xxxxxxxx</a></li> 
      </ul> 
     </div> 


     </div> 
     </div> 

    </body>​ 
+0

対応するHTMLコードが必要です。たとえば、オンラインページへのリンクやフィドルを投稿してください – FelipeAls

+0

私はフィドルを保存してリンクを送信する方法がわかりません。私もhtmlコードを追加しました。私はあなたの助けに感謝します。 – pepsicode

+0

@pepsicode jsfiddleの 'save'ボタンは通常、保存時にかなりうまく動作します。 – Petah

答えて

0

サイドバーマージン0または自動フロートを削除するには、このセンターにしたいので

div.sidebar { 

     padding-top: 2pc; 
     text-align:center; 

     width: 200px; 
     color: #000000; 
      list-style:none; 
margin:0 auto;   
} 
このなど

Livedemo http://jsfiddle.net/rohitazad/wFQdj/

+0

@pepsicodeはサイドバーメニューではなく、ページの上部にあるメインメニューについて考えています。 – neo108

+0

あなたのトップナビはすでに中心に置かれています。http://jsfiddle.net/rohitazad/wFQdj/1/ –

+0

私は問題を解決しました。とにかくありがとう! – pepsicode

関連する問題