CSS定位和媒體查詢

我試圖做一個簡單的響應的網頁和我需要一些方法來解決我的問題 - Page with some appreciable space for the logo CSS定位和媒體查詢

現在，當我調整窗口的大小，看看

page after resizing

現在我想要的是，這個標誌不是向下滾動，而是留在那裏並與身體其他部分一起滾動。

這裏是我的html

<ul id="gn-menu" class="gn-menu-main" style="z-index:99"> 
      <li class="gn-trigger"> 
       <a class="gn-icon gn-icon-menu"><span>Menu</span></a> 
       <nav class="gn-menu-wrapper"> 
        <div class="gn-scroller"> 
         <ul class="gn-menu"> 
          <li><a class="gn-icon gn-icon-download">Home</a></li>        
          <li><a class="gn-icon gn-icon-cog">Us</a></li>                
          <li><a class="gn-icon gn-icon-download">MSR Scenes</a></li> 
          <li><a class="gn-icon gn-icon-cog">Literature</a></li> 
          <li><a class="gn-icon gn-icon-help">Music</a></li> 
          <li><a class="gn-icon gn-icon-cog">Food</a></li> 
          <li><a class="gn-icon gn-icon-download">Gaming</a></li> 
          <li><a class="gn-icon gn-icon-cog">Sci-Tech</a></li> 
          <li><a class="gn-icon gn-icon-help">Horoscopes</a></li> 
          <li><a class="gn-icon gn-icon-cog">Art</a></li> 
          <li><a class="gn-icon gn-icon-download">Comic</a></li> 
          <li><a class="gn-icon gn-icon-cog">Sports</a></li> 
          <li><a class="gn-icon gn-icon-help">Pop Culture</a></li> 
          <li><a class="gn-icon gn-icon-download">Free Advice</a></li>       
         </ul> 
        </div><!-- /gn-scroller --> 
       </nav> 
      </li> 
      <li style="position:relative"><img src="images/logo_01.jpg" width="230" height="90" style="z-index:-1" class="logo" ></li> 
      <li><a id="us" >Us</a></li> 
      <li><a id="home" ><span>Home</span></a></li> 
     </ul>

和列表樣式如下 -

.gn-menu-main > li { 
    display: block; 
    float: right; 
    height: 100%; 
    border-right: 1px solid #c6d0da; 
    text-align: center; 
    } 
.gn-menu-main > li:nth-child(1) { 
    float: left; 
    border-right: none; 
    border-left: 1px solid #c6d0da; 
    } 

.gn-menu-main > li:nth-child(2) { 
    float: left; 
    border-right: none; 
    border-left: 1px solid #c6d0da; 
    }

來源

2013-08-31 DeadMan

你應該上傳你的相關代碼到http://www.jsfiddle.net – Itay

好吧，對不起，但我在這裏創建了小提琴 - http://jsfiddle.net/iamdeadman/aWCuJ/當我調整大小然後標誌向下浮動我該如何解決這個問題 – DeadMan

1.你爲什麼支持這樣的小分辨率？我不認爲他們甚至存在。 2.你期望發生什麼？沒有足夠的地方爲按鈕和徽標 – Itay

您可以設置整個菜單的min-width屬性。

#gn-menu { 
    min-width: 300px; 
}

jsFiddle Demo

來源

2013-08-31 07:26:14 Itay

嗯...我不認爲它會滿足用戶，因爲它只是隱藏在菜單欄中溢出的元素..我認爲調整將是一個更好的選擇 –

@RitabrataGautam我認爲不支持顯微分辨率是最好的選擇。 :)說實話，如果OP沒有說他期望發生什麼，我們不應該猜測。 – Itay

好吧ty調整大小的作品，雖然我在想的是隱藏菜單項'家'和'我們'，並填充屏幕上的標誌，對不起itay不得不去午餐..... – DeadMan

是否需要懸？如果你不介意保持內聯，你可以這樣做：max-height: 100%; width: auto;這將保持它在菜單欄的邊界內。

來源

2013-08-31 07:21:55 probablyup

真的不清楚你想讓他放置這些樣式。 – Itay

如果屏幕尺寸相對較小並且無法容納菜單項，我想將徽標填滿屏幕。 – DeadMan

是的，但我試圖把它們放在根無序列表中，發現它不起作用 – DeadMan

我認爲你應該使用媒體查詢，以適應它在小屏幕上的同一位置改變標誌圖像大小，你也可能需要更改字體大小，填充等與媒體查詢如果你想以適應菜單小屏幕尺寸

.img{ 
    width:100px;height:100px; 
} 
@media screen and(max-width:480px) 
{ 
    .img{ 
     width:50px; 
     height:50px; 
    } 
}

這種情況正在發生，因爲當你調整你的瀏覽器你的IMG規模過於龐大，以適應在同一行

來源

2013-08-31 07:26:44

CSS定位和媒體查詢

回答

相關問題