菜單和內容與標題中的圖像重疊

我正嘗試在我的網站上的菜單上使用簡單的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

菜單和內容與標題中的圖像重疊

回答

相關問題