0

レスポンシブ Web サイトを設計していますが、現在少し問題があります。基本的にロゴはナビゲーションの真ん中に配置されているのですが、携帯で見たり、ブラウザを携帯用に設定したりしてみるとこんな感じです。

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

フルスクリーンで見るとこんな感じ。

http://s255.photobucket.com/user/testament1234/media/desktop_zps4c60a09c.jpg.html

モバイル デバイスで表示したときにナビゲーションの上にロゴを設定するにはどうすればよいですか。

これは、マークアップまたは HTML の私のコードです。

<div class="container">
 <div id="nav-container">
     <div class="six columns navigation">
     <ul>
         <li><a href="#" title="Home">Home</a></li>
         <li><a href="#" title="Home">Project</a></li>
         <li><a href="#" title="Home">Blog</a></li>

     </ul>
     </div>
     <div class="four columns">
         <h1>Logo</h1>
     </div>
     <div class="six columns navigation">
         <ul>
             <li><a href="#" title="Gallery">Gallery</a></li>
             <li><a href="#" title="Gallery">About</a></li>
             <li><a href="#" title="Gallery">Contact</a></li>
         </ul>
     </div>
 </div>
</div>

そして、これは私のCSSのコードです

#nav-container{margin-top:20px;}
.navigation{text-align:center; background-color:#D1673A;}
.navigation li{display:inline; }
.navigation a{text-decoration:none; color:black; display:inline-block; padding:20px 20px 20px}
.navigation a:hover{color:white; background-color:black}

レスポンシブ Web サイトの構築にスケルトン フレームワークを使用しています。私の質問に関して、メディア クエリにスタイルを設定するか、マークアップを変更しますか?

4

1 に答える 1

1

編集

この更新された回答がうまくいくかどうかを確認してください：http://jsfiddle.net/panchroma/HBhNt/

HTML は、logo div にロゴのクラスを追加したことを除けば、投稿したものとまったく同じです。

あなたが投稿したものに加えて、 CSSは次のとおりです。

.navigation{
position:relative;
}

.logo{
height:60px;
}

@media only screen and (max-width: 767px) {
.logo{
 position:absolute;
    top:0;
    left:0;


}
.navigation{
   top:60px;
}  

.navigation ul li a{
    width:100%;
}
}

==============================

以下の元の回答

1 つのオプションは、nav コンテナーの先頭に 2 つ目のロゴを追加し、モバイルでのみ表示すると同時に、モバイルで既存のロゴを非表示にすることです。

HTML と CSS でこれを行う方法のドラフトについては、以下を参照してください。

必要な結果を得るには、おそらく @media 設定をいじる必要があります。たとえば、横向きのスマートフォンやタブレットのナビゲーションの途中でロゴを非表示にする必要がある場合があります。

幸運を！

HTML 

 <div class="container">
 <div id="nav-container">
 <div class="four columns display-mobile">
     <h1>Logo</h1>
 </div>
 <div class="six columns navigation">
 <ul>
     <li><a href="#" title="Home">Home</a></li>
     <li><a href="#" title="Home">Project</a></li>
     <li><a href="#" title="Home">Blog</a></li>

 </ul>
 </div>
 <div class="four columns hide-mobile">
     <h1>Logo</h1>
 </div>
 <div class="six columns navigation">
     <ul>
         <li><a href="#" title="Gallery">Gallery</a></li>
         <li><a href="#" title="Gallery">About</a></li>
         <li><a href="#" title="Gallery">Contact</a></li>
     </ul>
 </div>
 </div>
</div>

CSS 

/* set defaults for display-mobile and hide-mobile */  

.display-mobile{
display:none;
}  

.hide-mobile{  
display:inherit;
}  

/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */  
/* depending on the specifics of your site CSS, you may need to use !important with the following */  

@media only screen and (max-width: 479px) {
.display-mobile{
display: inherit; 
}
.hide-mobile{
display:none;
}
}
于 2013-07-07T18:20:07.353 に答える