0

モバイル デバイスの上部にロゴを配置し、ロゴの下にナビゲーションを配置する方法を研究しています。これは、デスクトップで表示した場合のロゴとナビゲーションの外観です。ロゴはナビゲーションの真ん中にあります

http://s255.photobucket.com/user/testament1234/media/desktopnav_zps46660bfe.jpg.html?sort=3&o=0

携帯で見るとこんな感じです

http://i255.photobucket.com/albums/hh140/testament1234/navigation_zps14a6e775.jpg

この Web サイトのデザインには、スケルトン グリッド フレームワークを使用しています。

これは私の HTML/マークアップです

<!--HEADER -->
<div id="nav-container" class="container">
 <div class="six columns navigation navigation-left">
     <ul>
         <li><a href="#" title="Home">Home</a></li>
         <li><a href="#" title="Projects">Projects</a></li>
         <li><a href="#" title="Blog">Blog</a></li>
     </ul>
 </div>
 <div id="logo" class="four columns hide-mobile">
     <h1><a href="#" title="Aleem Guialap">Aleem Guialap</a></h1>
 </div>
 <div class="six columns navigation navigation-right">
     <ul>
         <li><a href="#" title="About">About</a></li>
         <li><a href="#" title="Gallery">Gallery</a></li>
         <li><a href="#" title="Contact">Contact</a></li>
     </ul>
 </div>
</div>

これは私のCSSです

/**************************/
/*   NAVIGATION           */
/**************************/


.navigation-right{text-align:right}
.navigation-right li{margin-right:40px}
.navigation-left li{margin-left:40px}
.navigation li{display:inline; line-height:130px}
.navigation a{text-decoration:none; color:#4d4d4d; font-size:25px}
.navigation a:hover{color:#7e2d2d}

#logo h1 a{margin-top:20px; margin-bottom:20px; background:url(images/logo.png) no-repeat; display:inline-block; width:173px; height:105px; text-indent:-99999px}

私の問題を解決してくれる人には本当に感謝しています。マークアップと簡単なスタイリングを変更する必要があるかどうかはわかりません。

4

1 に答える 1

0

あなたの問題に対する3つの異なるアプローチを考えることができます：

最初にマークアップを残し、ロゴの位置を絶対位置に設定してから、両方のナビゲーションを左右にフロートします。

もう 1 つは、両方のナビゲーション div の上にロゴ div を移動してから、margin:0 auto を使用して中央に配置し、div の幅を設定することを忘れないことです。次に、両方のナビゲーション div を左右にフロートします。

3 番目に推奨する方法は、両方のナビゲーションを 1 つのリストに結合し、最初の 3 つの項目を左に、次に他の 3 つを右にフロートすることです。

于 2013-07-09T04:13:28.470 に答える