Размещение ссылок по изображению

Question

Я пытаюсь создать навигационную панель. Фон состоит из изображения, и я использую текстовые заполнители, пока у меня не будут отсортированы ссылки. Кажется, я не могу заставить текст появляться на панели навигации, а они настаивают на появлении ниже в стиле списка.

Пример: Серый градиентный стержень предназначен для навигации.

HTML:

<div id="pagewrapper"> 
<div id="container"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div id="center"> 
     <div id="pagebanner"> 
     <img src="img/banner.png" /> 
     </div> 

     <div id="navibar"> 
     <img src="img/navibar.png"> 
     <div class="naviitems"> 
     Home 
     </div> 
     <div class="naviitems"> 
     PHolder1 
     </div> 
     <div class="naviitems"> 
     PHolder2 
     </div> 
     <div class="naviitems"> 
     PHolder3 
     </div> 
     <div class="naviitems"> 
     Contact Us 
     </div> 
     </img> 
     </div> 

     <div id="pagecontent"> 
     <h1>Oh no, I broke my elephant!</h1> 
     <p>Wiggle!</p> 
     </div> 

    </div> 
</div> 

И соответствующий CSS:

#container{ 
    margin: 0 auto; 
    width:1017px; 
    text-align:center; 
} 
#left{ 
    float:left; 
    width:160px; 
    height:900px; 
    background-color: #D8D8D8; 
} 
#right{ 
    float:right; 
    width:160px; 
    height:900px; 
    background-color: #D8D8D8; 
} 
#center{ 
    display: inline-block; 
    margin:0 auto; 
    width: 697px; 

} 
#pagebanner{ 
display: inline-block; 
    margin:0 auto; 
    width: 697px; 
} 
#navibar{ 
display: inline-block; 
    margin:0 auto; 
    width: 697px; 
    height: 27px; 
} 
.naviitems{ 
margin: 0 auto; 
height:25px; 
width:20%; 
} 
#pagecontent{ 
display: inline-block; 
    margin:0 auto; 
    width: 697px; 
} 

Answer 1

Вы должны установить фоновую свойство родительского DIV к изображению вместо вызова его с помощью тега IMG.

.navibar { 
background:url(URLofImage) 
} 

Answer 2

Я использовал

background: linear-gradient(180deg, #777, #eee); 

вместо фонового изображения, увидеть, если она соответствует вашим потребностям ... jsfiddle