菜单和内容与标题中的图像重叠

我正尝试在我的网站上的菜单上使用简单的img标记添加网站横幅，但每当我这样做时菜单只是重叠图像。我想要实现的是菜单被上面的图像压下来，所以它出现在它下面。菜单和内容与标题中的图像重叠

HTML：

<header> 
<img src="site_logo.jpg" alt=""> 

<img src="banner_small.png" alt="" id="banner"> 
    <nav> 
     <ul> 
     <li class="selected"><a href="index.html">Main page</a> 
     </li> 
     <li><a href="classes.html">Classes</a> 
     </li> 
     <li><a href="gamemodes.html">Game modes</a> 
     </li> 
     <li><a href="contact.html">Contact</a> 
     </li> 
     </ul> 
    </nav> 
</header>

我的第一张图片是网站的标志，第二个是在菜单中。我想定位第一张图片是在网站的顶部，推动菜单中上下

CSS：

header { 
    height: 50px; 
    background: #333333; 

} 
header nav { 
    display: inline-block; 
    vertical-align: middle; 
} 
header nav ul { 
    margin: 0; 
    padding: 0; 
} 
#banner, 
header ul li { 
    display: inline-block; 
    vertical-align: middle; 
} 
header nav > ul > li { 
    box-sizing: border-box; 
    height: 50px; 
    padding: 12px; 
    position: relative; 
}

来源

2016-04-21 sn4ckhun

您是否尝试过只给边界添加'margin-top' css的菜单？假设横幅总是相同的大小，那么这应该工作得很好。 –

将您的第一张图片包裹在'div'标签中。此外，你正在着色整个标题......所以你的第一个图像将总是“看起来”，就好像它在菜单中一样。 – pookie

尽量把div元素里面的图片：

<div id='x'><img src="site_logo.jpg" alt=""></div> 
<div id='y'><img src="banner_small.png" alt="" id="banner"></div>

然后，如果你想增加或减少元素之间的空间使用保证金属性：

x{margin-bottom:...px;} 
y{margin-top:...px; margin-bottom:..px;}

来源

2016-04-21 16:48:55

菜单和内容与标题中的图像重叠

回答

相关问题