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定位和媒体查询

回答

相关问题