2

ロゴを中央に配置して、メニュー バーを中央に配置しようとしています。現在、すべてが浮かんでいますが、ページの中央に配置されません。また、中央に配置されている場合は、ページの幅に応じてサイズを変更するために、ロゴの左右に配置した背景画像が必要です-これはライブでどのように見えるかへのリンクです-メニューテスト

私のウェブサイトには、メニューバーの後ろにロゴを配置し、幅を長くして背景が伸びるように作成した元のメニューがまだありますが、そのために自動調整されません....現在のメニュー

私のコードが完璧ではないことはわかっていますので、ご容赦ください

html 

    <div id="access">
      <div class="menu-container">

          <ul id="menu-left" class="menu">
                   <li class="menu-item">
                        <a href="#home">Home</a>
                    </li>
                    <li class="menu-item">  
                        <a href="#about">About</a>
                    </li>
                    <li class="menu-item">
                        <a href="#services">Services</a>
                    </li>
          </ul><!--END of menu-navigation-left-->  

          <ul id="menu-center">
           <li class="menu-item">
            <img src="images/logo.png" alt="Menu">
            </li>
         </ul> <!--close div center-->


         <ul id="menu-right" class="menu">
                        <li class="menu-item">
                            <a href="#">Blog</a>
                        </li>
                        <li class="menu-item">  
                            <a href="#contact">Contact</a>
                        </li>
                        <li class="menu-item">
                            <a href="#portfolio">Portfolio</a>
                        </li>
         </ul><!--END of menu-navigation-left-->

      </div><!--END of menu-navigation-container-->
    </div><!--END of access-->

CSS

   header {
    position:fixed;
    }


   #access {
    width:100%;
    overflow:hidden;
    left:50%;

   }

   #access ul.menu{
    display: inline-block;
    }

   #access ul {

   }

   #access ul a{
    display:block;
   }

   #access ul#menu-left { 
   height:120px;
   background-image:url(../images/menu.png);
   }

   #access ul#menu-center { 
   height:120px;
   }

   #access ul#menu-right { 
   height:120px;
   background-image:url(../images/menu.png);
   }


    ul, li {
    margin:0px;
    padding:0px;
    list-style:none;
    float:left;
    display:block;
    }



    #access a {
    display: block;
    font-size: 16px;
    line-height: 15px;
    padding: 13px 10px 12px 10px;
    text-transform: titlecase;
    text-decoration: none;
    font:"Mc1regular", Arial, sans-serif;
    }

    a:link{
    color:#fff;
    }

    a:visited{
    color:#fff;
    }
4

1 に答える 1

0

これにより、アライメントの問題が整理されるはずです..仕様に置き換えるだけです. メニューを 1 つだけにして、中央に配置します。

ヘッダーの位置が固定されていることに注意してください> position:relative の方が良いでしょう..

div.container {
width: 1160px;
margin: auto;
margin-top: -1;
margin-bottom: -1;
padding: 0;
padding-top: 10px;
background-color: #2d2d2d;
}

div.box {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 20px;
border: solid 1px #A29060;
background-color: #000;
overflow: hidden;
width: 940px;
}
div.top {
text-align: left;
margin: auto;
margin-left: 20px;
padding-top: 12px;
padding-bottom: 11px;
font-weight: normal;
font-size: 14px;
overflow: hidden;
width: 980px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
 li {
float: left;
padding-right: 20px;
 }
 a {
display: block;
color: #a29060;
text-decoration: none;
}


<div class="container">
  <div class="box">
    <div class="top">
      <ul >
        <li><a href="contact.html" title="">Contact</a></li>
        <li><a href="policy.html" title="">Policies</a></li>
        <li><img class="logo"  src="images/logo.jpg" alt="logo" /></li>
         <li><a href="policy.html" title="">Policies</a></li> 
      </ul>
    </div>

このフィドルを参照してください

http://jsfiddle.net/yvytty/RJ4Yp/

これも見ることができます（まだ完成していません）が、基本的なレイアウト、メニューなどがソートされています

https://www.yve3.com/index.html

これは、優れたフォーラムである HTML.net へのリンクでもあります。彼らはあなたのサイトについてあなたに良い意見を与え、多くの専門知識を持っています（ここのように）

http://www.html.net/forums/

于 2013-05-27T14:07:53.573 に答える